I've learned that the best way to route information is to use what is already given to you.

The first thing is the documentation. In my case to solve my routing and navigation problem I used Angular.io

My problem is I needed to figure out a way to route a button click that would engage a method in the component where the button is. The method would need to provide a route to another component and along with it some data from the first component.

  1. I used the (click)=methodInComponent() to do this
  2. In the component.ts I first needed a way to store the data that I wanted to pass to the other component. I ended up using a method for that as well. I will call the method in the routing method to pass the data using router. I created a void methodInComponent() and used the following for the route this.router.navigate(['theOtherComponentPath', theVariableFromTheOtherMethodToPassData], {});

with private router: Router being defined in the constructor.

  1. In the otherComponent.ts I needed a way to access the data that was passed to it. Angular thankfully provides a way to do this via 'ActivatedRoute'. I assigned the data to a variable and used snapshot and paramMap methods to get the data. The code in question looks like this variableNameForData = userId = this.route.snapshot.paramMap.get("id"); id is data that was passed from the other component.
  2. I am now working on using the Java backend of the app to get the respective data and display it on the other component. So far it looks like me using the httpClient to 'get' the information that I need. It returns an '[object Object]'. I will try Observable to display the actual data.
  3. I interpolated the variables in the HTML template as {{dataFromComponent}}

Let me know if I'm missing something, but this has been quite a learning adventure because I chose to

Struggle Try things out Read the documentation Implement it

This post is also available on DEV.