Angular Router: Parameter with the snapshot

The Angular Router is a powerful router library that allows developers to implement advanced functionality in their Angular applications. Earlier what we were doing if we want to send the value of the parameter from one component to the other we were makes use of the @Input decorator to get hold of that value that was being passed in from one component to the other.

But, In this blog, we will see how we can pass any value or information from component to the other using the power of the router parameter. Suppose you have a need to pass a parameter value from one component to another component.

Then how do we do that? 
Now, the only way you are communicating between the components is by using the router link. And/or to use the router module to do the navigation from one component to another component. Now, this is where the ability to specify parameter values within the URL for a component, the path for a component, enables us to pass this information.

How does Route parameter Works?
So when you specify a route parameter in the path definition, this route parameter is specified using a token. So when you specify the path in the path specification for the routes, you would specify a path like this:

path: ‘/component-name/:id’            //where id is a token

So it’s a time to dive into the code and see how we can make us of Route Parameters.

1: The first step here is to update the route file and specify the path and name of the component in the route.ts file.

{path: '/mycomponent/:id', component: MyComponent}

Here, the :id placeholder (called dynamic router parameter) means that the MyComponentthe component will be activated when the user visits any path that matches this expression: /mycomponent/id

2: Navigation using the routerLink directive with parameters: Now we will make use of RouterLink to navigate and pass the value: id to the other component.

*ngFor="let item of items" [routerLink]="['/mycomponent',item.id]"

So here, This routerLink takes in values which you can supply in your template like shown in the snippet with highlighted code. So, you can supply that as an array here. Within the array, you can supply two parts of an array. So, in mycomponent, you saw that when I defined the route, I said “/mycomponent/:id”.

3: The Next question here is how we can receive the value of the parameters?

The Angular Router provides two different methods to get route parameters:

• Using the route snapshot,
• Using Router Observables

In this blog, we will see how we can retrieve the value of the parameter using the route snapshot.

@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
export class MyComponent implements OnInit {

  item: Item;
  constructor(private myComponentService: MyComponentService,
              private route: ActivatedRoute) {}

  ngOnInit() {
    const id = this.route.snapshot.params['id'];
    this.item = this.myComponentService.getItem(id);
  }
}

I need to inject one service here called ActivatedRoute service that is part of the Angular routers(highlighted code in the constructor) along with MyComponent service needed for the data. So this ActivatedRoute service provides me with access to the route here.
for that, The Angular Router provides the ActivatedRoute class that can be injected in the component. So first start by importing it using:

import { ActivatedRoute } from '@angular/router';

Next, you need to inject this class in the component via the constructor:

constructor(private route: ActivatedRoute) {}

Moving back to the above snippet, I can ask for this route, Snapshot, Params(highlighted portion inside ngOnit() method). This param is an array to which I can index using the id as the value, so Params id. This fetches me the id from the parameter shown below. So, when I define this URL, the URL for this would be defined as MyComponent. For example, MyComponent 0, MyComponent 1, MyComponent 2, and so on.

ngOnInit() {
  const id = this.route.snapshot.params['id'];
  this.dish = this.myComponentService.getItem(id);
}

Conclusion:
I hope you have enjoyed my blog and get a basic understanding of passing values using router parameters with a snapshot. As the Angular Router allows you to easily retrieve parameters from the URL which is an essential functionality that’s required by most web applications. You can use both ways: the paramMap observable or the snapshot.

Thank For Reading!!!