How to Use Router Navigate in Angular

We will introduce the router service navigate method in Angular and discuss how to use it for navigation in Angular applications.

Router Navigate in Angular

Navigation is one of the most important parts of any web application. Even when building a single-page application (SPA) that does not have multiple pages, we still use the navigation to move from one section to another.

Navigation allows users to easily find what they are looking for on web applications. If we provide clear and easy-to-understand navigation, it makes our web application successful.

Angular provides many methods for navigation to achieve simple to complex routing easily. Angular provides a separate module to set up navigation in our web application.

The router navigate() method is used to programmatically navigate the user from one page to another.

We will go through an example in which we will navigate through different components using navigate(). So let’s create a new application using the following command.

# angular
ng new my-app

After creating our new application in Angular, we will go to our application directory using this command.

# angular
cd my-app

Now, let’s run our app to check if all dependencies are installed correctly.

# angular
ng serve --open

We will generate components using commands. First, we will generate our home component.

# angular
ng generate component home

Once we have generated our home component, we will generate our about component.

# angular
ng generate component about

Lastly, we generate our services component using the following command.

# angular
ng generate component services

After generating our components, we will have three components in separate folders with 3 files.

Output:

Once we have generated our components, we will create views for them. We will open about.component.html from the about folder and add the following code.

# angular
<div class="container" >
  <h1> This is About component </h1>
  <h3> Try navigating to other components </h3>
</div>

We will open the home.component.html file from the home folder and add the following code.

# angular
<div class="container">
 <h1> This is Home component </h1>
 <h3> Try navigating to other components </h3>
</div>

Next, we will open the services.component.html file from the services folder and add the following code.

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

Once we have our components and views ready, we will define our routes in app-routing.module.ts. As shown below, we will import ngModule, Routes and RouterModule from router and import our created components.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Once we have imported everything, we will define our components’ routes below.

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

We will create our navigation menu in app.component.html. Each link will call a function using the (click) method.

We will display components data using router-outlet, as shown below.

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToHome()">Home</a>
  </li>
  <li>
    <a (click)="goToAbout()">About</a>
  </li>
  <li>
    <a (click)="goToServices()">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

We will create our functions goToHome(), goToAbout(), and goToServices(). We will open app.component.ts and import Router from router and using router.navigate we will create these functions to navigate between components, as shown below.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private router: Router) {}

  goToHome() {
    this.router.navigate(['/', 'home']);
  }
  goToAbout() {
    this.router.navigate(['/', 'about']);
  }
  goToServices() {
    this.router.navigate(['/', 'services']);
  }
}

Output:

As you can see from the above example that we can easily navigate from one component to another using navigate() and defining routes.

So in this tutorial, we learned how to create components and define routes and how to use navigate() to navigate between components easily.

Demo here