Navigation - Navigate between routes

Navigate through your web site with button clicks.

By: King

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.

Let’s take a look at both methods. Open your Angular project on VS Code. To begin, create 3 components with the ng generate component command so we can use them for our routes. Name them page 1, 2, and 3.

ng generate component page1

ng generate component page2

ng generate component page3

Once the components are created, make sure you have the router-outlet tags in the app component html page.

<router-outlet><router-outlet>

Go to the app-routing module file and define the routes.

The first route will use the path articles and page 1 for the component.

The second will use the path articles/today and page 2 for the component.

And the third will use the path articles/today/noon and page 3 for the component.

const routes: Routes = [

{path: "articles", component: Page1Component},

{path: "articles/today", component: Page2Component},

{path: "articles/today/noon", component: Page3Component}

];

Go to the app component html page.

Add 3 buttons and label them 1, 2, 3.

<router-outlet><router-outlet>

To activate the routes inline, inside our HTML page, we have to add the routerLink attribute directive to our element and then provide the path to the route we want to activate.

Since we want to activate the articles route when we click on button 1, we will put articles.

For the button 2, it would be articles/today.

And for button 3 it would be articles/today/noon

The routerLink attribute directive will enable us to click on our elements and activate the routes.

Let’s see it on the browser. Save the project and start the local server. Open the browser and go to localhost:4200.

Click on button 1.

Take a look at what changed. The address in the browser address bar has changed to localhost:4200/articles and the page is displaying the page one component.

Similarity, if we click on the button 2, we would get a similar result. And the same for button 3.

But let’s go back to VS code. Go into the page 2 component html page. Add a button and label it Navigate To Page 3.

When we click on this button, we want to activate the route for page 3. You may think, we could do the same as we did the first time, by adding the routerLink attribute and providing the path for the page 3 route which is articles/today/noon.

<p>page2 works!</p>

<button routerLink="articles/today/noon">Navigate to Page 3</button>

Let’s see if it would work. Save the project and go to the browser.

Click on button 2, so it will show the page 2 component and then click on the navigate to page 3 button.

As you can see, it did not work. Go back to VS Code and go to the app-routing module.

const routes: Routes = [

{path: "articles", component: Page1Component},

{path: "articles/today", component: Page2Component},

{path: "articles/today/noon", component: Page3Component}

];

Whenever we create a route, we are creating a path for our router to reach the end point so it can retrieve the contents.

Imagine a straight path. That is our root for our site - localhost:4200 or codeible.com.

When we define a route, it will add a new path to the straight path so the router can reach it. Each extension will add a level to the path.

For example, the path for the page 1 component is articles. It will add a 1 level path to our root path.

The page 2 component is articles/today. There are 2 extensions so it will add 2 levels. The first level is articles and the second is today.

Similarity, the page 3 component has 3 extensions, articles, today, and noon.

Here’s why it didn’t work the first time. Every time, we activate a route, our route handler will travel to the end point of that route. In order for it to reach another route, it has to go back to the root path and then go to the next route.

If you take a look at the browser, it is currently at localhost:4200/articles/today. So, our route handler is here. We have to go back two levels to reach the root path.

Go back to VS Code. Go to the page 2 component html page.

To go back one level, we use the double period and forward slash syntax.

<p>page2 works!</p>

<button routerLink="../">Navigate to Page 3</button>

We have to go back two levels, so we need two of them.

<button routerLink="../../">Navigate to Page 3</button>

Now that we’re back at the root, we can insert the path to page 3, which is articles/today/noon.

<button routerLink="../../articles/today/noon">Navigate to Page 3</button>

Save the project and go to the browser.

Click on the navigate to page 3 button. As you can see, this time it worked because we manually told the route handler how to go from page 2 to page 3.

Now let’s see how we can do it in the class file.

Go back to VS Code and go into the app component html page and remove all the routerLink attribute directives. Then attach a click event and the event handler function to each.

We need to do this because we need a way to trigger our route handler to navigate to the next route. The routerLink attribute already did this for us.

Go to the app component TypeScript file and define the functions.

button1(){

}

button2(){

}

button3(){

}

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.

Add the router imports and then inject it in the constructor. This action is call dependency injection which we will go over in a later video but basically, it is a shorthand way of instantiating and object.

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

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor(private router: Router){

}

Locate the functions that was define earlier.

The router object contains a method call navigate. This method will activate the route that is passed in. It takes n an array. Inside the array, we add the path for the route we want to activate. This function is for page 1, so it is articles.

button1(){

this.router.navigate(['articles']);

}

The next one is articles/today. And the last one is articles /today/noon.

button2(){

this.router.navigate(['articles/today']);

}

button3(){

this.router.navigate(['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.

The difference between using the router object and the routerLink attribute directive is that we can perform some task before navigating to a new route when we navigate with the router object. We also do not need to manually tell our route handler how to go from one route to another. Here is what I mean, go back to VS Code. Go to the page 2 component html page. If you recall, we manually told our route handler how to go to the next route.

<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';

constructor(private router: Router){

}

Define the handler function and call the navigate function. Since we want to go to page 3, we use articles/today/noon.

navToPage3(){

this.router.navigate(["articles/today/noon"]);

}

Save the project and go to the browser. Click on the navigate to page 3 button.

As you can see, we do not need to manually tell our route handler how to go from page 2 to page 3.

Recap

Let’s take a moment to recap what we have learned.

1. We learned how to navigate between our routes by using the routerLink attribute directive and the router object.

2. We learned what happens when we define a new route to our application and how to manually tell the route handler to move fro one route to another by using the double period and forward slash syntax.

3. We also learned the difference between using the routerLink attribute directive and the router object.

Policy

Follow @codeible

Video Tutorials

Policy

Video Tutorials

Policy

Video Tutorials

Policy

Video Tutorials

Policy

Sign In