There are two methods we can use to navigate between our routes. We can do it in-line, in the HTML page, or in the class file.
There are two methods we can use to navigate between our routes. We can do it in-line, in the HTML page, or in the class file.
ng generate component page1
Once the components are created, make sure you have the router-outlet tags in the app component html page.
<router-outlet><router-outlet>
Click on button 1.
<p>page2 works!</p>
<p>page2 works!</p>
<button routerLink="../../">Navigate to Page 3</button>
<button routerLink="../../articles/today/noon">Navigate to Page 3</button>
button1(){
To navigate with our class file, we need to bring in a router object. This object contains all the methods and property for us to use to manipulate our route handler.
button1(){
The next one is articles/today. And the last one is articles /today/noon.
Now we are all set. Save the project and go to the browse. Click on button 3, then 1, then 2.
As you can see, we still got the same effect.
<button routerLink="../../articles/today/noon">Navigate to Page 3</button>
We do not need to do this with the router object. Remove the routerLink attribute and attach a click event and the handler function.
<button (click)="navToPage3()">Navigate to Page 3</button>
Go to the page 2 component TypseScript fileand add the router imports and get the router object in the constructor.
import { Router } from '@angular/router';
Define the handler function and call the navigate function. Since we want to go to page 3, we use articles/today/noon.
navToPage3(){
Save the project and go to the browser. Click on the navigate to page 3 button.