Angular Routing
A declarative router for Angular applications.
Install
Use your package manager of choice to install the package.
npm install angular-routing
OR
yarn add angular-routing
Installation with ng add
You can use ng add to install the package by using below command.
ng add angular-routing
The above command will install the package, and add the RoutingModule import in the AppModule.
Usage
To register the Router, add the RoutingModule.forRoot()
to your AppModule imports.
import { RoutingModule } from 'angular-routing';
@NgModule({
imports: [
// ... other imports
RoutingModule.forRoot(),
],
})
export class AppModule {}
Or in a feature module
import { RoutingModule } from 'angular-routing';
@NgModule({
imports: [
// ... other imports
RoutingModule,
],
})
export class FeatureModule {}
After your components are registered, use the Router
and Route
components to register some routes.
<router>
<!-- For nested routes use exact: false -->
<route path="/blog" [exact]="false">
<app-blog *routeComponent></app-blog>
</route>
<route path="/posts/:postId">
<app-post *routeComponent></app-post>
</route>
<route path="/about">
<app-about *routeComponent></app-about>
</route>
<route path="/" redirectTo="/blog"> </route>
<route path="/" [exact]="false">
<app-page-not-found *routeComponent></app-page-not-found>
</route>
</router>
Navigating with Links
Use the linkTo
directive with a full path to register links handled by the router.
<a linkTo="/">Home</a>
<a linkTo="/about">About</a>
<a linkTo="/blog">Blog</a>
Adding classes to active links
To add classes to links that match the current URL path, use the linkActive
directive.
<a linkTo="/" linkActive="active">Home</a>
<a linkTo="/about" linkActive="active">About</a>
<a linkTo="/blog" linkActive="active" [activeOptions]="{ exact: false }"
>Blog</a
>
Using the Router service
To navigate from a component class, or get global route information, such as the current URL, or hash fragment, inject the Router
service.
import { Component } from '@angular/core';
import { Router } from 'angular-routing';
@Component({...})
export class MyComponent {
constructor(private router: Router) {}
ngOnInit() {
this.router.url$.subscribe();
this.router.hash$.subscribe();
}
goHome() {
this.router.go('/');
}
}
Using Route Params
To get the route params, inject the RouteParams
observable. Provide a type for the shape of the route params object.
import { Component } from '@angular/core';
import { RouteParams } from 'angular-routing';
@Component({...})
export class MyComponent {
constructor(
private routeParams$: RouteParams<{ postId: string }>
) {}
ngOnInit() {
this.routeParams$.subscribe(console.log);
}
}
Using Query Params
To get the route params, inject the QueryParams
observable. Provide a type for the shape of the query params object.
import { Component } from '@angular/core';
import { QueryParams } from 'angular-routing';
@Component({...})
export class MyComponent {
constructor(
private queryParams$: QueryParams<{ debug: boolean }>
) {}
ngOnInit() {
this.queryParams$.subscribe(console.log);
}
}
Lazy Loading Modules
To lazy load a module, use the load
binding on the route
component.
import { Component } from '@angular/core';
@Component({
template: `
<router>
<route path="/lazy" [exact]="false" [load]="modules.lazy"> </route>
</router>
`,
})
export class MyComponent {
modules = {
lazy: () => import('./lazy/lazy.module').then((m) => m.LazyModule),
};
}
Register a component to register the child routes.
import { NgModule, Component } from '@angular/core';
import { ModuleWithRoute } from 'angular-routing';
@Component({
template: `
<router>
<route path="/">
<app-lazy *routeComponent></app-lazy>
</route>
<route path="/" [exact]="false" redirectTo="/404"> </route>
</router>
`,
})
export class LazyRouteComponent {}
Implement the ModuleWithRoute
interface for the route component to render after the module is loaded.
@NgModule({
declarations: [LazyRouteComponent, LazyComponent],
})
export class LazyModule implements ModuleWithRoute {
routeComponent = LazyRouteComponent;
}
Lazy Loading Components
To lazy load a component, use the load
binding on the route
component.
import { Component } from '@angular/core';
@Component({
template: `
<router>
<route path="/lazy" [load]="components.lazy"> </route>
</router>
`,
})
export class MyComponent {
components = {
lazy: () => import('./lazy/lazy.component').then((m) => m.LazyComponent),
};
}
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Miroslav Jonaš 💻 📖 |
Santosh Yadav 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!