Question

What do you understand by RouterOutlet and RouterLink?

Answer 1

A RouterOutlet is a directive from the router library that acts as a placeholder. It marks the spot in the template where the Router should display the components for that outlet. Router outlet is used as a component.

Syntax:

1. <router-outlet></router-outlet>  

On the other hand, a RouterLink is a directive on the anchor tags that gives the router control over those elements. Since the navigation paths are fixed, you can assign string values to router-link directive as below,

Syntax:

1. <h1>Angular Router</h1>  
2. <nav>  
3.   <a routerLink="/todosList" >List of todos</a>  
4.   <a routerLink="/completed" >Completed todos</a>  
5. </nav>  
6. <router-outlet></router-outlet>