Subscribe to angular route parameter changes 

Text version of the video
csharp-video-tu...
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
Slides
csharp-video-tu...
Angular CRUD Tutorial
• Angular CRUD tutorial
Angular CRUD Tutorial Text Articles & Slides
csharp-video-tu...
All Dot Net and SQL Server Tutorials in English
www.youtube.co...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
In this video we will discuss how to subscribe to angular route parameter changes and then execute some code in response to those changes. In our previous video, we discussed there are 2 ways to read the route parameter values. We can either use the snapshot approach or observable approach. We discussed the snapshot approach in our previous video. In this video we will discuss the 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.
For example, if we have "View Next Employee" button on EmployeeDetailsComponent and every time when we click this "View Next Employee" button, we want to display the next employee details on the page. Notice in this workflow, we are not navigating to another component before navigating from the current employee to the next employee. So the snapshot approach will not work. Let's try to use the snapshot approach and see what happens.
export class EmployeeDetailsComponent implements OnInit {
employee: Employee;
private _id;
constructor(private _route: ActivatedRoute,
private _employeeService: EmployeeService,
private _router: Router) { }
ngOnInit() {
this._id = +this._route.snapshot.paramMap.get('id');
this.employee = this._employeeService.getEmployee(this._id);
}
getNextEmployee() {
if (this._id < 3) {
this._id = this._id + 1;
} else {
this._id = 1;
}
this._router.navigate(['/employees', this._id]);
}
}
At this point, run the project and notice that, every time we click "View Next Employee" button the route parameter value changes as expected, but the employee details displayed on the page does not change. This is because the code in ngOnInit() is executed only when the component is first loaded and initialised.
After that, every time we click "View Next Employee" button, only the route parameter value changes and the component is not reinitialised and hence the code in ngOnInit() is not executed. If you want to react to route parameter changes and execute some code every time the route parameter value changes, then you have to subscribe to the route parameter changes. So modify the code in ngOnInit() method as shown below.
// The paramMap property returns an Observable. So subscribe to it
// if you want to react and execute some piece of code in response
// to the route parameter value changes
ngOnInit() {
this._route.paramMap.subscribe(params => {
this._id = +params.get('id');
this.employee = this._employeeService.getEmployee(this._id);
});
}
With the above change in place, when we click "View Next Employee" button, the application works as expected.
Please note : paramMap is introduced in Angular 4. So if you are using Angular 4 or any version beyond it, then the above code works. If you are using Angular 2, then use params instead of paramMap as shown below.
ngOnInit() {
this._route.params.subscribe(params => {
this._id = +params['id'];
this.employee = this._employeeService.getEmployee(this._id);
});
}
Another important point to keep in mind : When we subscribe to an observable in a component, we also must write code to unsubscribe from the observable when the component is destroyed. However, for some observables we do not have to explicitly unsubscribe. The ActivatedRoute observable is one such observable. The angular Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.