Membuat DropDown Directive

Kita akan menerapkan custom directive yang telah dipelajari pada Tutorial Angular Part 1.

Pada modul ini akan dibaha membuat directive dropdown, yang berfungsi menampilkan dropdown menu pada button.

Perhatian: saat ini menu dropdown tidak berfungsi karena JavaScript Bootstrap tidak diimport, karena hanya akan digunakan Angular sebagai JavaScript Framework.

Karena kita menggunakan Bootstrap 5, untuk membuka dropdown menu, kita harus menambahkan class show. Sementara untuk menutup menu, membuang class show pada element dropdown.

Pada bootstrap 5, diperlukan sedikit hack, dikarenakan perlu menambah atau menghapus class pada element dengan class .dropdown-menu dengan menggunakan object renderer.

Buat file baru dropdown.directive.ts di direktori shared.

import { Directive, ElementRef, Host, HostBinding, HostListener, Renderer2 } from "@angular/core";

@Directive({
    selector: '[appDropDown]'
})
export class DropDownDirective {
    constructor(private el: ElementRef, private renderer: Renderer2){}

    @HostBinding('class.show') isOpen = false;

    @HostListener('click') toggleOpen(){
        this.isOpen = !this.isOpen;
        let part = this.el.nativeElement.querySelector('.dropdown-menu');
        if(this.isOpen){
            this.renderer.addClass(part, 'show');
        } 
        else {
            this.renderer.removeClass(part, 'show');
        }
    }

}

Directive selesai dibuat, berikutnya kita gunakan pada menu header dan menu recipe detail.

Buka file header.component.html, lalu gunakan directive pada element menu dropdown.

<li class="dropdown" appDropDown>

Berikut isi lengkap code pada 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="nav navbar-nav navbar-right">
          <li class="dropdown" appDropDown>
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
            appDropdown>
              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>

Kemudian buka file recipe-detail.component.html, lalu tambahkan appDropDown directive pada dropdown menu

<div class="dropdown" appDropDown>

Berikut isi lengkap file recipe-detail.component.html

<div class="row">
    <div class="col-xs-12">
        <img [src]="recipe.imgPath" alt="{{recipe.name}}" class="img-fluid" style="max-height:240px;">
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <h1>{{recipe.name}}</h1>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="dropdown" appDropDown>
            <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">Manage Recipe</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Add Shopping List</a>
              <a class="dropdown-item" href="#">Edit Recipe</a>
              <a class="dropdown-item" href="#">Delete Recipe</a>
            </div>
          </div>        
    </div>
</div>
<div class="row">
    <div class="col-xs-12">{{recipe.description}}</div>
</div>
<div class="row">
    <div class="col-xs-12">
        Ingredients
    </div>
</div>

Sesuai ekspektasi, jika menu diclick, dropdown menu akan ditampilkan.