Angular read route parameters

In this video we will discuss, reading route parameter values in Angular 2 and later versions.

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
   / @aarvikitchen5572  

To read the route parameter value use Angular ActivatedRoute service.

There are 2 ways to read the route parameter value.

We can either use the snapshot approach or observable approach.

Snapshot approach works fine, if you navigate to another component before navigating from the current employee to the next employee. In our case we are always navigating back to the ListEmployeesComponent before navigating to view another employee details.

If you expect users to navigate from employee to employee directly, without navigating to another component first, then you need to use the observable approach. We will discuss the observable approach in our next video.

constructor(private _route: ActivatedRoute) { }

ngOnInit() {
const id = +this._route.snapshot.params['id'];
}

Since Angular 4, params have been deprecated in favor of the new interface paramMap. So if you are using Angular 4 or above, use paramMap instead of params.

ngOnInit() {
const id = +this._route.snapshot.paramMap.get('id');
}

Introduce getEmployee() method in employee.service.ts file

getEmployee(id: number): Employee {
return this.listEmployees.find(e => e.id === id);
}

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
   • Angular CRUD tutorial  

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic