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!