asp.net core docker Angular optional route parameters

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

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

Angular CRUD Tutorial
https://www.youtube.com/playlist?list...

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
https://www.youtube.com/c/KudvenkatAr...

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.

asp.net core docker Angular optional route parameters
72 Likes	72 Dislikes
12,371 views views	524K followers
Science & Technology	Upload TimePublished on 17 Apr 2018

Related keywords

tutorialspoint,csharp-video-tutorials.blogspot,tutorials dojo,csharp string format,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,csharp corner,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,services google play apk,asp.net core 3 release date,server job description,tutorials by a,servicenow,csharp assembly,csharp array,tutorialspoint python,services briefcase,asp.net core web api,csharp enum,craigslist ny,server pro,server status ffxiv,csharp foreach,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,services technologies gps,csharp to json,college football,csharp dictionary,server jobs,cvs,cnn,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,tutorialspoint spark,asp.net core download,csharp to vb.net,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,asp.net core logging,tutorialsystems,cunyfirst,csharp download,services fms publish announcement,services.msc no abre,csharp online,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,csharp random,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,services.msc,asp.net core configuration,csharp list,asp.net core tutorial,asp.net core mvc,server hosting,chase online,costco,server jobs near me,capital one,server rack,tutorialspoint html,csharp interface,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,csharp tutorial,tutorialspoint spring boot,asp.net core middleware,csharp online compiler,services tag dell,csharp switch,csharpstar,