Membuat Custom Directive – Part 2

Angular tidak hanya dapat berjalan di browser, tapi bisa juga digunakan dalam service worker. Dimana ada kemungkinan tidak bisa mengakses DOM.

Pada modul sebelumnya, directive mengakses DOM secara langsung. Pendekatan ini tidak disarankan, karena alasan diatas.

Angular menyediakan tool helper yaitu renderer, dimana kita bisa render object HTML tanpa mengakses DOM.

Buat file directive baru, kita akan gunakan CLI.

Perhatian: digunakan option d untuk membuat directive.

ng g d --skip-tests=true adv-highlight

Buka file adv-highlight.directive.ts, lalu tambahkan code dibawah.

Untuk mengatur style suatu element digunakan perintah

renderer.setStyle(element_html, 'property-css', 'value')

import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appAdvHighlight]'
})
export class AdvHighlightDirective implements OnInit{

  constructor(private elRef: ElementRef, private renderer: Renderer2) { }

  ngOnInit(): void {
    this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
  }
}

Buka file app.component.html, lalu tambahkan penggunakan directive diatas.

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p appBscHighlight>Custom Directive Direct DOM</p>
            <p appAdvHighlight>Custom Directive Renderer</p>
        </div>
    </div>
</div>

Sesuai ekspektasi, directive berjalan sesuai harapan yaitu mengubah warna background menjadi biru.

Jika Anda ingin memahami renderer lebih detail, silakan lihat dokumentasinya disini.