Go to src >> app >> and open app.routing.ts file and add routing like this:-<\/p>\n\n\n\n
{ path: 'about\/:keyword',component: AboutComponent }
{ path: 'cart', component: CartComponent }<\/pre>\n\n\n\nFor Reference: https:\/\/angular.io\/guide\/router<\/a>\u200b\u200c<\/p>\n\n\n\n1. Router navigate with params<\/strong><\/h6>\n\n\n\nIf you want to use this routing in component. then go to src >> app >> and open component.ts file then do the followings:-\u200c<\/p>\n\n\n\n
a) Add the the routing at top of the file like this:<\/p>\n\n\n\n
import { Router} from '@angular\/router';constructor(private router: Router){}<\/pre>\n\n\n\nb) Add in your desire component and add these line of code in your function:- For Example:-<\/p>\n\n\n\n
gotoAbout(){
this.router.navigate(['\/about'], { queryParams: { keyword: 'Test' } });
}<\/pre>\n\n\n\nFor Reference :- https:\/\/alligator.io\/angular\/query-parameters\/<\/a>\u200b\u200c<\/p>\n\n\n\n2. RouterLink and RouterLinkActive<\/strong><\/h6>\n\n\n\nWhen the HTML element with RouterLink binding is clicked then the CSS classes bound with RouterLinkActive will be active. These directives are used are follows.<\/p>\n\n\n\n
<a routerLink=\"\/cart\" routerLinkActive=\"active-link\">Cart<\/a><a [routerLink]=\"['\/cart']\">Cart<\/a> <\/pre>\n\n\n\nFor Reference :- https:\/\/angular.io\/guide\/router#router-links<\/a>\u200b\u200c<\/p>\n\n\n\n3. Lazy Loading<\/strong><\/h6>\n\n\n\nLazy Loading in Embryo we need to create a routing module and a module for that component. \u200c<\/p>\n\n\n\n
1.Go to src >> app >> and open app.routing.ts file and add routing like this:-<\/p>\n\n\n\n
{
path: 'products',
loadChildren: '.\/Products\/Products.module#ProductsModule'
}<\/pre>\n\n\n\n2. Inside the products module routing, Go to src >> app >> Products and open Products.routing.ts file and add routing like this:- <\/p>\n\n\n\n
{ path: '', component: ProductsListComponent }<\/pre>\n\n\n\nFor Reference :- https:\/\/angular.io\/guide\/lazy-loading-ngmodules<\/a>\u200b<\/p>\n