What Is Router link?
The Router-link is a directive and it used to link a specific part of your applications.
@Directive({ selector: ':not(a)[routerLink]' })
Let explain the route configuration using the -
{ path: 'user/:id', component: UserDetailComponent
I the above rote configuration, when linking to this user/:id route, you use the RouterLink directive.
If the link is static, you can use the directive as follows.
<a routerLink="/user/id"> See the User detail</a>
If you using dynamic values to generate the router link that you can pass an array of path segments.
You can specify a route parameter like this.
<a [routerLink]="['/user', user.id]">
<span class="text-align">{{ user.id }}</span>{{ user.name }}
</a>
You can set query params and fragment as follows.
<a [routerLink]="['/user/id']" preserveQueryParams preserveFragment>
See the user component
</a>
You can specify optional route parameters like this.
<a [routerLink]="['/user-detail', { id: '102348014' }]">User Detail</a>
And
@Component({
selector: 'app-user',
template: `<nav>
<a [routerLink]="['/users']">User List</a>
<a [routerLink]="['/userDetail/101', { Id: '102348014' }]">User Detail</a>
</nav>
<router-outlet></router-outlet>`,
styleUrls: ['./user.component.css']
})
For
more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html