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

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 },

  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 class="nav-item">
        <a routerLink="add" class="nav-link" routerLinkActive="active">Add Employee</a>
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
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';

  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() {
      .subscribe(data => console.log(data), error => console.log(error));
    this.employee = new Employee();

  onSubmit() {
    this.submitted = true;;

  gotoList() {



Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours

Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course