Can you demonstrate navigation between different routes in an Angular application?

Question

Q:

Can you demonstrate navigation between different routes in an Angular application?

Answer 1

You can demonstrate the navigation between different routes in an Angular app in the following way. See the following code to demonstrate navigation in an Angular app named "My First App."

1. import from "@angular/router";  
2. .  
3. .  
4. .  
5. @Component({  
6.   selector: 'app-header',  
7.   template: `  
8. <nav class="navbar navbar-light bg-faded">  
9.   <a class="navbar-brand" (click)="goHome()">My First App</a>   
10.   <ul class="nav navbar-nav">  
11.     <li class="nav-item">  
12.       <a class="nav-link" (click)="goHome()">Home</a>   
13.     </li>  
14.     <li class="nav-item">  
15.       <a class="nav-link" (click)="goSearch()">Search</a>   
16.     </li>  
17.   </ul>  
18. </nav>  
19. })  
20. class HeaderComponent {  
21.   constructor(private router: Router) {}   
22.   goHome() {  
23.     this.router.navigate(['']);   
24.   }  
25.   goSearch() {  
26.     this.router.navigate(['search']);   
27.   }  
28. }