Need help with router?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

angular-component
229 Stars 14 Forks MIT License 74 Commits 11 Opened issues

Description

Angular Component Router - A declarative router for Angular applications

Services available

!
?

Need anything else?

Contributors list

Angular Component Router

npm version

All Contributors

A declarative router for Angular applications.

Install

Use your package manager of choice to install the package.

npm install @angular-component/router

OR

yarn add @angular-component/router

Installation with ng add

You can use ng add to install the package by using the command below.

ng add @angular-component/router

The above command will install the package, and add the ComponentRouterModule import in the AppModule.

Usage

To register the Router, add the

ComponentRouterModule.forRoot()
to your AppModule imports.
import { ComponentRouterModule } from '@angular-component/router';

@NgModule({ imports: [ // ... other imports ComponentRouterModule.forRoot(), ], }) export class AppModule {}

Or in a feature module

import { ComponentRouterModule } from '@angular-component/router';

@NgModule({ imports: [ // ... other imports ComponentRouterModule, ], }) export class FeatureModule {}

After your components are registered, use the

Router
and
Route
components to register some routes.
  
  
    
  
  
    
  
  
    
  
   
  
    
  

Route sorting

Angular routing is sorting the routes upon registration, based on priority. The order in which the routes are defined in your template is therefore not important.

The following two examples will give the same results

  
    
  
  
  
    
  

and

  
    
  
  
  
    
  

The sorting algorithm has only a few rules (ordered by importance):

  • Named routes (e.g.
    /blog
    ) have priority over root route (
    /
    )
  • Static routes (e.g.
    /blog/view
    ) have priority over parametrized (e.g.
    /blog/:id
    )
  • Exact route (with
    exact
    set to
    true
    or omitted) has priority over non-exact (with
    exact
    set to
    false
    )
  • Longer paths have priority over shorter

Route restrictions

Implementing the route restriction is as simple as adding a structural directive on a

route
component
  
    
  
  
    
  

The restriction doesn't stop the navigation. It simply removes the route from the configuration so the next eligible route will pick it up.

Navigating with Links

Use the

linkTo
directive with a full or relative path to register links handled by the router.
Home
About
Blog

Adding classes to active links

To add classes to links that match the current URL path, use the

linkActive
directive.
Home
About
Blog

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-component/router';

@Component({...}) export class MyComponent { constructor(private router: Router) {}

ngOnInit() { this.router.url$.subscribe(); this.router.hash$.subscribe(); }

goHome() { this.router.go('/'); }

goForward() { this.router.forward(); }

goBack() { this.router.back(); } }

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-component/router';

@Component({...}) export class MyComponent { constructor( private routeParams$: RouteParams ) {}

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-component/router';

@Component({...}) export class MyComponent { constructor( private queryParams$: QueryParams ) {}

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"> </route> </router> , }) export class MyComponent { modules = { lazy: () => import('./lazy/lazy.module').then((m) => m.LazyModule), }; }

Register a component to register the child routes.

import { Component } from '@angular/core';

@Component({ template: <router> <route path="/"> <app-lazy></app-lazy> </route> <route path="/" redirectto="/404"> </route> </router> , }) export class LazyRouteComponent {}

Implement the

ModuleWithRoute
interface for the route component to render after the module is loaded.
import { NgModule } from '@angular/core';
import { ModuleWithRoute } from '@angular-component/router';

@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"> </route> </router> , }) export class MyComponent { components = { lazy: () => import('./lazy/lazy.component').then((m) => m.LazyComponent), }; }

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Brandon

💻 📖 ⚠️

Miroslav Jonaš

💻 📖 ⚠️

Santosh Yadav

💻 📖

Kyle Cannon

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.