Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@angular-component/router
Advanced tools
Changelog
0.4.1 (2021-04-19)
<a name="0.4.0"></a>
<a name="0.3.1"></a>
Readme
Use your package manager of choice to install the package.
npm install @angular-component/router
OR
yarn add @angular-component/router
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.
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.
<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>
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
<router>
<route path="/blog" [exact]="false">
<app-blog *routeComponent></app-blog>
</route>
<route path="/" redirectTo="/blog"></route>
<route path="/" [exact]="false">
<app-page-not-found *routeComponent></app-page-not-found>
</route>
</router>
and
<router>
<route path="/" [exact]="false">
<app-page-not-found *routeComponent></app-page-not-found>
</route>
<route path="/" redirectTo="/blog"></route>
<route path="/blog" [exact]="false">
<app-blog *routeComponent></app-blog>
</route>
</router>
The sorting algorithm has only a few rules (ordered by importance):
/blog
) have priority over root route (/
)/blog/view
) have priority over parametrized (e.g. /blog/:id
)exact
set to true
or omitted) has priority over non-exact (with exact
set to false
)Implementing the route restriction is as simple as adding a structural directive on a route
component
<router>
<route path="/admin" *ngIf="user.isAuthenticated$ | async">
<app-admin *routeComponent></app-admin>
</route>
<route path="/admin" *ngIf="!(user.isAuthenticated$ | async)">
<app-login *routeComponent></app-login>
</route>
</router>
The restriction doesn't stop the navigation. It simply removes the route from the configuration so the next eligible route will pick it up.
Use the linkTo
directive with a full or relative path to register links handled by the router.
<a linkTo="/">Home</a>
<a linkTo="/about">About</a>
<a linkTo="/blog">Blog</a>
<a linkTo="../other"></a>
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
>
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();
}
}
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<{ postId: string }>
) {}
ngOnInit() {
this.routeParams$.subscribe(console.log);
}
}
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<{ debug: boolean }>
) {}
ngOnInit() {
this.queryParams$.subscribe(console.log);
}
}
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 { Component } from '@angular/core';
@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.
import { NgModule } from '@angular/core';
import { ModuleWithRoute } from '@angular-component/router';
@NgModule({
declarations: [LazyRouteComponent, LazyComponent],
})
export class LazyModule implements ModuleWithRoute {
routeComponent = LazyRouteComponent;
}
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),
};
}
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!
FAQs
A declarative router for Angular applications
The npm package @angular-component/router receives a total of 27 weekly downloads. As such, @angular-component/router popularity was classified as not popular.
We found that @angular-component/router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.