Mengatur Navigasi Menggunakan Custom Event Binding

Saat ini aplikasi yang kita buat menampilkan recipe dan shopping list secara bersamaan.

Harapannya adalah, ketika menu Recipe pada header di click, halaman recipe saja yang akan ditampilkan, begitu juga dengan Shopping List.

Untuk itu, parent component harus bisa mengetahui menu mana yang dipilih. Dalam hal ini adalah app.component yang bertugas menampilkan halaman recipe atau shopping list.

Jadi konsepnya adalah kita akan melakukan passing data antar component.

Pada modul ini pendekatan menggunakan ngIf untuk memilih component yang akan ditampilkan. Kedepan akan diubah, untuk kesederhanaan karena modul ini tujuannya adalah menjelaskan penggunaan custom event binding.

Buka file header.component.html, tambahkan event listener pada link menu.

<li class="nav-item"><a class="nav-link" href="#" (click)="onSelect('recipe')">Recipes</a></li>
<li class="nav-item"><a class="nav-link" href="#" (click)="onSelect('shopping')>Shopping List</a></li>

Berikut isi lengkap file header.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Buku Resep</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link" href="#" (click)="onSelect('recipe')">Recipes</a></li>
          <li class="nav-item"><a class="nav-link" href="#" (click)="onSelect('shopping')">Shopping List</a></li>
        </ul>
        <ul class="navbar-nav navbar-right">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Manage
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Save Data</a></li>
              <li><a class="dropdown-item" href="#">Get Data</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Buka file header.component.ts, untuk menambahkan method onSelect.

Method ini akan membroadcast custom event, dimana informasi dari custom event ini harus bisa diakses oleh component lain.

Agar bisa diakses, digunakan decorator @Output() pada event yang kita buat.

Perhatikan, jika IDE Anda tidak melakukan auto-import module yang digunakan. Anda harus import manual module EventEmmiter dan Output dari @angular/core.

import { Component, EventEmitter, Output } from "@angular/core";

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})

export class HeaderComponent{
    @Output() featureSelected = new EventEmitter<string>();

    onSelect(feature: string){
        this.featureSelected.emit(feature);
    }
}

Sekarang component lain dapat mengakses informasi event featureSelected.

Informasi ini akan digunakan oleh app.component untuk mengetahui menu mana yang diclick.

Buka file app.component.html, tambahkan listener untuk event featureSelected. Serta tambahkan *ngIf untuk memilih component yang akan ditampilkan.

<app-header (featureSelected)="onNavigate($event)"></app-header>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <app-recipes *ngIf="loadedFeature==='recipe'"></app-recipes>
            <app-shopping-list *ngIf="loadedFeature==='shopping'"></app-shopping-list>
        </div>
    </div>
</div>

Buka file app.component.ts, kita tambahkan method onNavigate yang berguna untuk menarik data featureSelected yang akan digunakan oleh app.component.html.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loadedFeature = 'recipe';

  onNavigate(feature: string){
    this.loadedFeature = feature;
  }
}

Sesuai ekspektasi, navigasi berfungsi dengan semestinya.