Navigate to Another Page with a Button in Angular 6/7/8

<< Back to Angular Tutorial

In this short article, I am gonna show you how to navigate from one page to another page using an anchor tag or button in Angular 6/7/8.

Let's first configure routing like this:

import { EmployeeDetailsComponent } from './employee-details/employee-details.component';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeListComponent } from './employee-list/employee-list.component';

const routes: Routes = [
  { path: '', redirectTo: 'employee', pathMatch: 'full' },
  { path: 'employees', component: EmployeeListComponent },
  { path: 'add', component: CreateEmployeeComponent },
];

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

Using Router links

After Angular v4 we can directly add a routerLink attribute on the anchor tag or button. 

Consider the following template, where routerLink attribute added to the anchor tag.

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
        <a routerLink="employees" class="nav-link" routerLinkActive="active">Employee List</a>
    </li>
    <li class="nav-item">
        <a routerLink="add" class="nav-link" routerLinkActive="active">Add Employee</a>
    </li>
  </ul>
</nav>

The routerLink directive on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink (a "one-time" binding).

From the above code:

<a routerLink="employees" class="nav-link" routerLinkActive="active">Employee List</a>
<a routerLink="add" class="nav-link" routerLinkActive="active">Add Employee</a>

Note that the routerLink="employees" and routerLink="add" are configured in app.routing.module.ts.

Navigate on Button Click

Step 1: Import Router module

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

Step 2: Inject Router in the constructor like this:

  constructor(private router: Router) { }

Step 3: Usage

this.router.navigate(['/employees']);

Here is a complete typescript file:

import { EmployeeService } from './../employee.service';
import { Employee } from './../employee';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {

  employee: Employee = new Employee();
  submitted = false;

  constructor(private employeeService: EmployeeService,
    private router: Router) { }

  ngOnInit() {
  }

  newEmployee(): void {
    this.submitted = false;
    this.employee = new Employee();
  }

  save() {
    this.employeeService.createEmployee(this.employee)
      .subscribe(data => console.log(data), error => console.log(error));
    this.employee = new Employee();
    this.gotoList();
  }

  onSubmit() {
    this.submitted = true;
    this.save();
    
  }

  gotoList() {
    this.router.navigate(['/employees']);
  }
}

References

1. https://stackoverflow.com/questions/41427405/navigate-to-another-page-with-a-button-in-angular-2/41427647
2. https://angular.io/guide/router

<< Back to Angular Tutorial