Angular Routing – Part 3

Pada modul ini kita akan belajar melakukan navigasi yang ditrigger melalui TypeScript.

Buka component home.component.html, lalu tambahkan button dengan event binding.

<h4>Routing Tutorial</h4>
<p>Belajar menggunakan Angular Routing</p>
<button class="btn btn-primary" (click)="onLoadUsers()">Load Users</button>

Lalu buka file home.component.ts, lalu tambahkan method untuk handling click button diatas.

Instance router dapat kita inject melalui constructor.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; //import library jika IDE tidak otomatis menambahkan

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  //inject router melalui constructor.
  constructor(private router: Router) { }

  ngOnInit() {
  }

  //method untuk handling click
  onLoadUsers(){
    this.router.navigate(['/users']);
  }
}

Jika Anda test, sesuai ekspektasi, kita sudah bisa melakukan navigasi melalui TypeScript.