Angular 2 - Navigation


Advertisements

In Angular 2, it is also possible to carry out manual navigation. Following are the steps.

Step 1 − Add the following code to the Inventory.component.ts file.

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router';  

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

The following points need to be noted about the above program −

  • Declare an html tag which has an onBack function tagged to the click event. Thus, when a user clicks this, they will be directed back to the Products page.

  • In the onBack function, use the router.navigate to navigate to the required page.

Step 2 − Now, save all the code and run the application using npm. Go to the browser, you will see the following output.

Application Using npm

Step 3 − Click the Inventory link.

Inventory Link

Step 4 − Click the ‘Back to products’ link, you will get the following output which takes you back to the Products page.

Back to Products

Useful Video Courses


Video

AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma

Video

Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma

Video

Step By Step Angular For Beginnners

11 Lectures 7.5 hours

SHIVPRASAD KOIRALA

Video

Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain

Video

Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac

Video

JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac

Advertisements