@nobyte/router-name v8.0.0

Router Name

Lets you link to specific routes in your app.

Consider the following route configuration:

[
    { path: 'user/:name', data: { alias: 'user' }, component: UserComponent }
]

When linking to this user/:name route, you use the RouterName directive.

<a [routerName]="['user', 'john']">
    link to user component
</a>

Explicit parameters.

<a [routerName]="['user', { name: 'john'}]">
    link to user component
</a>

RouterName will use these to generate this link: /user/john.

Consider the following route configuration:

[
    { path: 'user/:name/:id', data: { alias: 'user' }, component: UserComponent }
]

Apply RouterName Directive.

<a [routerName]="['user', { name: 'john'}, 1]">
    link to user component
</a>

Explicit parameters.

<a [routerName]="['user', { id: 1, name: 'john'}]">
    link to user component
</a>

Consider the following route configuration:

[
    {
        path: 'user',
        redirectTo: '',
        data: { alias: 'user' },
        children: [
            { path: 'reset-password', data: { alias: 'reset.password' }, component: ResetPasswordComponent },
            { path: 'recovery-password', data: { alias: 'recovery.password' }, component: RecoveryPasswordComponent },
        ]
    }
]

Apply RouterName Directive.

<a [routerName]="'user.reset.password'">
    link to reset password component
</a>

...

<a [routerName]="'user.recovery.password'">
    link to recovery password component
</a>