Angular optional route parameters

Suggested Videos
Part 40 - Angular route params | Text | Slides
Part 41 - Angular read route parameters | Text | Slides
Part 42 - Subscribe to angular route parameter changes | Text | Slides

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. 

Notice in the example below, the second employee "Mary" panel is styled with green background colour, indicating that we have just viewed her 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.