Membuat Custom Directive – Part 6

by

Pada modul ini akan dibahas structural directive.

Seperti yang sudah dibahas, structural directive menggunakan tanda asterisk (*). Tujuannya sebagai informasi bagi Angular.

Dibelakang layar, Angular akan mengubah structural directive. Berikut contohnya: 

<div *ngIf="!onlyOdd">
  <!-- content goes here -->
</div>

akan diubah menjadi

<ng-template [ngIf]="!onlyOdd">
  <!-- content goes here -->
<ng-template>

Custom Structural Directive

Berikutnya kita akan membuat custom structural directive unless, dimana merupakan kebalikan dari directive ngIf.

Buat directive baru dengan nama unless

$ ng g d unless --skip-tests=true

Buka file unless.directive.ts, lalu tambahkan kode berikut

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

/**
 * Add the template content to the DOM unless the condition is true.
 */
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  private hasView = false;

  //Inject TemplateRef and ViewContainerRef pada directive constructor sebagai private variables.
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  //method setter
  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

Penjelasan Code

unlessDirective membuat embedded view dari <ng-template> yang akan disisipkan dalam view container pada original host element.

TemplateRef berfungsi untuk mendapatkan isi dari <ng-template> dan ViewContainerRef berfungsi untuk mengakses view container.

Method setter pada appUnless property untuk set value dari kondisi.

Jika false dan Angular sebelumnya belum membuat view , method setter akan membuat embedded view dari template.

Jika kondisi true dan view sedang ditampilkan, method setter akan membersihkan is container.

Kemudian Buka file app.component.ts, tambahkan property condition = false.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular Apps';
  condition = false;
}

Kemudian buka app.component.html, tambahkan code berikut.

<p *appUnless="condition" class="unless a">
    (A) This paragraph is displayed because the condition is false.
  </p>
  
  <p *appUnless="!condition" class="unless b">
    (B) Although the condition is true,
    this paragraph is displayed because appUnless is set to false.
  </p>

  <p>
    The condition is currently
    <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
    <button
      type="button"
      (click)="condition = !condition"
      [ngClass] = "{ 'a': condition, 'b': !condition }" >
      Toggle condition to {{condition ? 'false' : 'true'}}
    </button>
  </p>

Untuk informasi lebih lengkap, silakan buka dokumentasi Structural Directive disini.

Sharing is caring:

Leave a Comment