Subscribe to angular route parameter changes

Text version of the video

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.

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

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() {
}

getNextEmployee() {
if (this._id < 3) {
this._id = this._id + 1;
} else {
this._id = 1;
}

}
}

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() {
});
}

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._id = +params['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.

[hellokishorshrestha]

how to give dynamic value in if condition eg. (this._id < arrayname.length) instead of (this._id < 3)

[ajeeteppakayala]

Thanks Sir! for making this video.
This cleared me everything.

[lenavogt]

hello, u helped me today....really with update route.navigation. Where can i find ur full list of angular videos??

[sourishdutta]

Nice one but in real world app IDs are not going to created like this approach, then how to tackle this id in employee details component.I will be so grateful if you give me the answer regarding this.Thanks.

[karanaggarwal]

What if while using snapshot method we navigate back to the same component and do not write that code (which is written inside ng_on_init method) inside ng_on_init method..? Will it work fine?

[nitinpatil]

i still did not get why this_router.navigate is not changing employee to next employee. this is what job of _router.navigate method is to refresh or route the page.

[ashutoshkushawaha]

can i use third party jquery library in our angular 5 project. Please give me a solution. example jquery datatable plugin in angular 5 project.

[debayansaha]

Please give me steps so that we don't have to hardcode the values when the list enters the last item

[luisbrazilva]

So far, a great tutorial but this particular lesson is flawed.
First, this assumes that the IDs will be in exact order (1, 2, 3, 4, 5...nth). It's a bad idea to assume this. If an employee is deleted (i.e. ID=4), then the code breaks because it is told to go up incrementally.
Second, the ceiling of the conditions to check for before it loops back to the beginning should be done by calling the service data array length. Instead of hard-coding it to 3 or any number. Again, what happens if someone gets deleted or added?

employees: Employee[];


ngOnInit() {
this.employees =
=> {
this._id = +params.get('id')
this.employee =
});
}

viewNextEmployee() {
if( this._id < this.employees.length ){
this._id = this._id + 1; //this should use the this.employees index
this._router.navigate(['/employees', this._id])
} else {
this._id = //this should return you to the employees index = 1
}
}

Third, even if you used the IDs to find if this._id < the.employees.length. That will fail if the ID numbers do not start from 1. In other words, if the employee's IDs are and ID=677483. Then the logic fails because all of those IDs are > 3 which is the.employees.length.

I recommend using index for this logic

But great job nonetheless. If you could re-do this portion with those fixes, you will have a complete lesson.

[bkarthikkannan]

Below code works fine without subscribe.

this.employee=
this._router.navigate(['/employees', this._id]);

[ashutoshkushawaha]

can i use third party jquery library in our angular 5 project. Please give me a solution.