# router.navigate and ActivatedRoute

Apart from using `<a routerLink="destinationComponent">`, another option to navigate among components is Angular Router's `navigate` method. This method is usually suitable when we need to pass some dynamic data/params to destination component.

```javascript
...
import { Router } from '@angular/router';
...


@Component({
   selector: 'product-list',
   template: `<div>
      <ul>
         <li *ngFor="let prod of products" (click)="gotoProdDetails(prod)">
            <span>{{prod.id}} -- {{prod.name}}</span>
         </li>
      </ul>
   </div>`
})
export class ProductListComponent {
   products = [
    {id: 1, name: "Milk"}, 
    {id: 2, name: "Bananas"},
    {id: 3, name: "Almonds"}
   ];

   constructor(private router: Router){
   }

   gotoProdDetails(product){
      router.naviagte(['/ProductDetails', product.id]);
      // 👆 is based on  the assumption that '/ProductDetails' route is configured as below:
      // { path: '/ProductDetails/:id', component: 'ProductDetailsComponent' }
   }
}
```

## Reading Route param value in the component using `ActivatedRoute`

Above, we passed `product.id` as route param with the `/ProductDetails` route. This will take the form `/ProductDetails/1` in the URL for the product 'Milk'.

In the destination component for this route i.e. 'ProductDetailsComponent', the passed route param can be read using `ActivatedRoute` object that angular's router module sets for us as below:

```javascript
...
import { ActivatedRoute } from '@angular/router'; // 👈
...

@Component({
   selector: 'Product-Details',
   template: `<div *ngIf="selectedProd">
    <h3>{{selectedProd.id}} -- {{selectedProd.name}}</h3>
    <div> {{selectedProd.details}} </div>
   </div>`
})
export class ProductDetailsComponent implements OnInit {
   selectedProd = {};
   ProductsWithDetails = [
      {id: 1, name: "Milk", details: "Milk is rich with Calcium"},
      {id: 2, name: "Bananas", details: "Banana is loaded with fiber and has high content of potassium "},
      {id: 3, name: "Almonds", details: "Almonds is rich with protein and Vitamin E"}
   ]
   constructor(private activatedRoute: ActivatedRoute){}

   ngOnInit(){
      let prodId = this.activatedRoute.snapshot.params['id']; // 👈 note how to read route parameters using ActivatedRoute.snapshot.params


      [ product ] = this.ProductsWithDetails.filter((prod) => prod.id === prodId); 
      if (product) {
         this.selectedProd = product;
      }
   }

}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bharat-tiwari.gitbook.io/our-tech-journal/angular-4/routing/routernavigate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.