python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
6

What Is Angular Router link?

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']
})

ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions