Cara Bekerja dengan Dekorator TypeScript di Angular

Dekorator TypeScript adalah jenis deklarasi khusus yang dapat dilampirkan ke kelas, metode, aksesor, properti, atau parameter. Di Angular, dekorator menyediakan cara untuk menambahkan metadata ke kelas, sehingga sangat ampuh untuk membuat komponen, layanan, dan lainnya yang dapat digunakan kembali. Panduan ini menjelaskan cara bekerja dengan dekorator TypeScript di Angular, dengan memberikan contoh untuk membantu memahami penggunaannya dengan lebih baik.

Apa itu Dekorator TypeScript?

Dekorator adalah fungsi yang mengubah perilaku kelas atau anggota kelas. Dalam Angular, dekorator digunakan untuk mendefinisikan komponen, direktif, pipa, dan layanan yang dapat disuntikkan. Dekorator menyediakan cara deklaratif untuk menerapkan metadata ke kelas, yang digunakan Angular untuk berbagai keperluan, seperti membuat contoh komponen atau menyuntikkan dependensi.

Dekorator Sudut Umum

Angular memiliki beberapa dekorator bawaan yang digunakan untuk berbagai keperluan. Berikut ini adalah dekorator Angular yang paling umum:

• @Component - Menentukan komponen Angular.
• @Directive - Menentukan direktif Angular.
• @Pipe - Menentukan pipa Angular.
• @Injectable - Menentukan layanan yang dapat disuntikkan ke komponen atau layanan lain.
• @Input - Menghias properti untuk menjadikannya input pengikatan data.
• @Output - Menghias properti untuk menjadikannya keluaran yang mengikat peristiwa.

Menggunakan @Component Decorator

Dekorator @Component digunakan untuk mendefinisikan komponen Angular. Dekorator ini menyediakan metadata tentang komponen, seperti pemilih, templat, gaya, dan konfigurasi lainnya.

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

Dalam contoh ini, dekorator @Component mendefinisikan komponen sederhana dengan templat yang menampilkan "Halo, Dunia!". Pemilih menentukan tag HTML khusus yang akan digunakan untuk komponen ini.

Menggunakan Dekorator @Injectable

Dekorator @Injectable digunakan untuk menentukan kelas layanan yang dapat disuntikkan ke komponen atau layanan lain. Dekorator ini merupakan bagian penting dari sistem injeksi dependensi Angular.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

Di sini, dekorator @Injectable membuat DataService tersedia untuk injeksi ketergantungan di seluruh aplikasi.

Menggunakan Dekorator @Input dan @Output

Dekorator @Input dan @Output digunakan untuk membuat properti input dan peristiwa output dalam komponen Angular. Dekorator ini umumnya digunakan untuk komunikasi komponen.

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

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

Dalam contoh ini, dekorator @Input digunakan untuk meneruskan data dari komponen induk ke komponen anak. Dekorator @Output digunakan untuk mengirim data dari komponen anak kembali ke komponen induk melalui suatu peristiwa.

Membuat Dekorator Kustom

Dekorator kustom dapat dibuat di Angular untuk menambahkan perilaku atau metadata tertentu ke kelas, metode, atau properti. Berikut ini adalah contoh dekorator kelas sederhana:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

Di sini, fungsi LogClass adalah dekorator khusus yang mencatat kelas ke konsol saat kelas tersebut ditetapkan. Menerapkan @LogClass ke MyService akan mencatat pesan selama pembuatannya.

Kesimpulan

Dekorator di Angular menyediakan cara yang ampuh untuk menambahkan metadata dan perilaku ke kelas, metode, properti, dan parameter. Memahami cara menggunakan dekorator bawaan seperti @Component, @Injectable, @Input, dan @Output sangat penting untuk pengembangan Angular yang efektif. Selain itu, dekorator kustom dapat dibuat untuk memenuhi kebutuhan khusus dalam suatu aplikasi, sehingga menambah fleksibilitas pada proses pengembangan.