Hellow guys, Welcome to my website, and you are watching Subscribe to angular route parameter changes. and this vIdeo is uploaded by kudvenkat at 2018-04-16T13:12:51-07:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | Subscribe to angular route parameter changes |
| Video Uploader | Video From kudvenkat |
| Upload Date | This Video Uploaded At 16-04-2018 20:12:51 |
| Video Discription | Text version of the video http://csharp-video-tutorials.blogspot.com/2018/04/subscribe-to-angular-route-parameter.html 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. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 Slides http://csharp-video-tutorials.blogspot.com/2018/04/subscribe-to-angular-route-parameter_12.html Angular CRUD Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5 Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists 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. |
| Category | Science & Technology |
| Tags | angular parammap subscription | component routing to itself | angular subscribe route change | angular router params observable | angular route params subscribe | angular activatedroute subscribe | angular activatedroute params subscribe | angular 2 router params subscribe | angular 4 route params subscribe | angular 2 activatedroute subscribe | angular 4 activatedroute get params | angular 4 activatedroute example | angular 4 activatedroute params | angular 5 activatedroute params |
