Angular Route Providers
May 30, 2023
Route providers in our angular application
1. Angular
Route has providers property to configure provider array for this route and its children.
2. The provider will be available for the children loaded by either lazily or eagerly. The lazy loaded children can be configured using
loadComponent or loadChildren.
3. The services configured with the
Route providers, are available to this route and its sub-routes.
4. The
Route provider is used as following.
export const ROUTES: Route[] = [
{
path: 'emp',
component: EmployeeComponent,
providers: [
EmployeeService
]
},
......
];
Route Providers Example
Here we are creating a Angular standalone application that configuresRoute providers.
routes.constant.ts
import { InjectionToken } from "@angular/core";
import { Route } from "@angular/router";
import { EmployeeComponent } from "src/components/employee.component";
import { Employee } from "src/services/employee";
import { EmployeeService } from "src/services/employee.service";
const TEAM_LEAD: Employee = { id: 100, name: 'Amit', age: 30, city: 'Varanasi' };
export const WELCOME_MESSAGE = new InjectionToken('');
export const ROUTES: Route[] = [
{
path: 'emp',
component: EmployeeComponent,
providers: [
EmployeeService,
{ provide: Employee, useValue: TEAM_LEAD },
{ provide: WELCOME_MESSAGE, useValue: 'Welcome!' }
],
children: [
{
path: 'emp-detail/:id',
loadComponent: () => import('src/components/employee-detail.component')
.then(mod => mod.EmployeeDetailComponent)
}
]
}
];
import { CommonModule } from "@angular/common";
import { Component, Inject, OnInit } from "@angular/core";
import { RouterModule } from "@angular/router";
import { WELCOME_MESSAGE } from "src/constants/routes.constant";
import { Employee } from "src/services/employee";
import { EmployeeService } from "src/services/employee.service";
@Component({
standalone: true,
imports: [
RouterModule,
CommonModule
],
template: `
<h3>{{message}}</h3>
<div *ngFor="let e of employees">
<p>{{e.name}} | <a [routerLink]="['emp-detail', e.id]">View Detail</a> </p>
</div>
<router-outlet></router-outlet>
`
})
export class EmployeeComponent implements OnInit {
employees?: Employee[];
constructor(private service: EmployeeService,
@Inject(WELCOME_MESSAGE) public message: string) { }
ngOnInit() {
this.service.getAllEmployees().subscribe(data => {
this.employees = data;
});
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { CommonModule } from '@angular/common';
import { switchMap } from 'rxjs/operators';
import { Employee } from '../services/employee';
import { EmployeeService } from '../services/employee.service';
@Component({
standalone: true,
imports: [CommonModule],
template: `
<div *ngIf="emp">
<h3>Details</h3>
{{emp.id}} - {{emp.name}} - {{emp.age}} - {{emp.city}}
<h3>Team Lead</h3>
{{teamLead.id}} - {{teamLead.name}} - {{teamLead.age}} - {{teamLead.city}}
</div>
`,
styles: ['div { font-weight: bold}']
})
export class EmployeeDetailComponent implements OnInit {
emp?: Employee;
constructor(private route: ActivatedRoute,
private empService: EmployeeService,
public teamLead: Employee) { }
ngOnInit() {
this.route.params.pipe(
switchMap((params: Params) => this.empService.getEmployeeById(+params['id']))
).subscribe(emp => this.emp = emp);
}
}
