Angular 2 - Navigation

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.

Step 3 − Click the Inventory link.

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