> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/embryo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/embryo/embryo-angular/routing-navigation.md).

# Routing/Navigation

Embryo is compatible with parameter routing and lazy Loading. There are followings steps:

Go to src >> app >> and open app.routing.ts file and add routing like this:-

```
{ path: 'about/:keyword',component: AboutComponent }
{ path: 'cart', component: CartComponent }
```

For Reference: <https://angular.io/guide/router>

#### 1. Router navigate with params

If you want to use this routing in component.  then go to src >> app >> and open component.ts file then do the followings:-

a) Add the the routing at top of the file like this:

```
import { Router} from '@angular/router';
constructor(private router: Router){}
```

b) Add in your desire component and add these line of code in your function:- For Example:-

```
gotoAbout(){
  this.router.navigate(['/about'], { queryParams: { keyword: 'Test' } });
}
```

For Reference :- <https://alligator.io/angular/query-parameters/>

#### 2. RouterLink and RouterLinkActive

When the HTML element with RouterLink binding is clicked then the CSS classes bound with RouterLinkActive will be active. These directives are used are follows.

```
<a routerLink="/cart" routerLinkActive="active-link">Cart</a>
<a [routerLink]="['/cart']">Cart</a> 
```

For Reference :- <https://angular.io/guide/router#router-links>

#### 3. Lazy Loading

Lazy Loading in Embryo we need to create a routing module and a module for that component.&#x20;

1. Go to src >> app >> and open app.routing.ts file and add routing like this:-

```
{ 
  path: 'products', 
  loadChildren: './Products/Products.module#ProductsModule'
}
```

2\. Inside the products module routing, Go to src >> app >> Products and open Products.routing.ts file and add routing like this:-&#x20;

```
{ path: '', component: ProductsListComponent }
```

For Reference :- <https://angular.io/guide/lazy-loading-ngmodules>