Angular optional route parameters
Hellow guys, Welcome to my website, and you are watching Angular optional route parameters. and this vIdeo is uploaded by kudvenkat at 2018-04-17T13:21:26-07:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
Info About This Video
Name |
Angular optional route parameters |
Video Uploader |
Video From kudvenkat |
Upload Date |
This Video Uploaded At 17-04-2018 20:21:26 |
Video Discription |
Text version of the video
http://csharp-video-tutorials.blogspot.com/2018/04/angular-optional-route-parameters.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/angular-optional-route-parameters-slides.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 optional route parameters in Angular with a simple example.
On some routes, the route parameters are required and on some routes they are optional.
For example, when we navigate from Employees list route to employee details route, the employee id is a required route parameter. Without it, we wouldn't know which employee details to retrieve and display.
Let us understand one use case for optional route parameter. If we have just viewed the details of the employee whose ID is 2 and if we navigate back to the employees LIST route, we want to pass the employee ID 2 in the URL as a route parameter to the LIST route, so that specific employee can be styled with a different colour indicating that, we have just viewed his details.
On the other hand, if we navigate from the CREATE route to the LIST route, we do not have an employee ID to pass to the LIST route. So the ID has to be an optional route parameter on the LIST route. If the employee ID route parameter is present on the LIST route, then that specific employee panel will be styled with a colour different from the rest of the employees in the list. If the ID route parameter is not present, then all the employee panels will have the same colour.
The following route is activated when we navigate from Employee LIST to employee DETAILS. To view a specific employee details, we need his or her ID. Hence in the following route, id is a required route parameter.
{ path: 'employees/:id', component: EmployeeDetailsComponent }
A required route parameter is part of the route definition and is used in route pattern matching. When defining routes, in the route definition, we include a place holder for required route parameter. In the above route definition, ":id" is the placeholder for employee id required route parameter.
Now if we want to view the details of an employee whose ID is 2, we will navigate to localhost:4200/employees/2
On the other hand, an optional route parameter is not part of the route definition and is not used in route pattern matching. When defining routes, we do not include a place holder for an optional route parameter like we do for the required route parameter. The following is the route for employee LIST.
{ path: 'list', component: ListEmployeesComponent }
When navigating back to the employee LIST from employee DETAILS, we want to pass the ID of the employee whose DETAILS we have just viewed to the LIST route. So the LIST url, looks as shown below. Notice we are passing 2 as the value for id. In this url id is an optional route parameter.
http://localhost:4200/list;id=2
To pass an optional route parameter you use the LINK parameters array as shown below. Notice we are using an object with an optional id parameter. The LIST route works perfectly fine without the id parameter value. If we have the id parameter value, then we style that specific employee with a different colour to indicate he is the employee whose details we have just viewed.
<a class="btn btn-primary" [routerLink]="['/list',{id:employee.id}]">
Back to List
</a>
Reading optional route parameter is very similar to reading required route parameter. We use the same ActivatedRoute service.
constructor(private _route: ActivatedRoute) { }
ngOnInit() {
this.selectedEmployeeId = +this._route.snapshot.paramMap.get('id');
}
In the view template (display-employee.component.html), we want to add panel-success bootstrap css class to the employee panel, if the id of the employee being displayed by that panel IS EQUAL TO the value we have in selectedEmployeeId property.
<div class="panel panel-primary"
[class.panel-success]="selectedEmployeeId === employee.id">
In our next video, we will discuss the differences between optional route parameters and required route parameters and when to use one over the other. |
Category |
Science & Technology |
Tags |
angular 2 optional route parameter | angular 2 optional parameters | angular 4 optional route parameter | angular 4 optional parameter | angular 5 optional route parameter | angular 5 optional parameters | angular routing optional parameters | angular2 routing optional parameter | angular optional parameter url | angular optional url parameter | angular 2 optional url parameter | angular 2 route optional parameter | angular 4 routing optional parameter | angular 5 routing optional parameter |
More Videos