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

@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

Comments

  1. Thanks for sharing this blog.This article gives lot of information.
    Mean Stack Online Training

    ReplyDelete
  2. This order will provoke in a discourse box to validate the 192.168.1.110.0.0.0.1 router is extremely direct, and for most clients, this guide just stays helpful until the previously mentioned half. Be that as it may, issues are normal when attempting to configure routers. Numerous clients face the blunder 'this page isn't accessible' when they type in the IP address: http://192.168.10.1 – here's the means by which to fathom this issue.

    ReplyDelete

Post a comment