Contents hide 1) Pass Data From Routes (Static Data) 1.1) Send data through Routes 1.2) Access data from Routes 2) Pass Data From Routes (Dynamic Data) 2.1) Send data through navigation links 2.2) Accessing the state value In this tutorial, we will see what are the different ways to Pass Data From Routes To Components In Angular 10. In other words like sending data from anchor tags or routing module files of angular other than query params. Pass Data From Routes (Static Data) For passing the static data (via the routing module) below example can be implemented. Send data through Routes For example, if the route can be accessed for particular user roles we can define in routes data and that roles can be retrieved inside the component. app-routing.module.ts { path: 'dashboard', loadChildren: loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule), data: { userRoles: [UserRoles.SELLER, UserRoles.SUPER_ADMIN, UserRoles.DATA_MANAGER] } } The Angular Router will pass the defined roles when the dashboardModule is rendered. The data will be located in the data property of the ActivatedRoute service. Access data from Routes For getting data from the route we can subscribe to the data property of the ActivatedRoute class which will contain data we send from the Routing Module. app.component.ts public ngOnInit(): void { this.activatedroute.data.subscribe(data: UserRoles[] => { this.roles = data.userRoles as UserRoles[]; }); } Pass Data From Routes (Dynamic Data) For passing the dynamic data to routes (via component) below example can be implemented. Send data through navigation links The option for passing the dynamic data or a user-defined object was implemented in the Angular Version 7.2 using the state object. The state object is stored in the History API. The state can be provided in two ways: 1: Using routerLink directive app.component.html <a [routerLink]="['dashboard']" [state]="{ id:1 , role:'super_admin'}"> Dashboard </a> 2: Using navigateByUrl method app.component.ts // value which can be set dynamically public user: {id: string, role: string} = { id:1 , role:'super_admin' }; // on click action this.router.navigateByUrl('/dashboard', { state: this.user }); Accessing the state value The state can be accessed in three different ways: 1: Using getCurrentNavigation method app.component.ts this.router.getCurrentNavigation().extras.state Note: The getCurrentNavigation method will only work in constructor. 2: Using history.state in ngOnInit app.component.ts console.log(history.state) // browser property 3: Using getState in Location service app.component.ts import { Location } from '@angular/common'; export class SomeComponent implements OnInit { public user: {id: string, role: string}; constructor(private location:Location){} public ngOnInit(): void { this.user = this.location.getState(); } } Note: The getState method is available Angular 8+ Get More tutorials on Angular 10 Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular, Angular Router, Routing