Memanggil Fungsi di Angular dengan Parameter dalam HTML
Dalam pengembangan Angular, seringkali kita perlu memanggil fungsi komponen dari template HTML. Fungsi ini bisa digunakan untuk berbagai keperluan, seperti memperbarui data, memanipulasi DOM, atau menjalankan operasi asynchronous. Dalam beberapa kasus, kita perlu mengirimkan parameter ke fungsi tersebut agar dapat bekerja dengan benar. Artikel ini akan membahas bagaimana memanggil fungsi Angular dengan parameter dalam HTML.
1. Mendefinisikan Fungsi dalam Komponen
Pertama, definisikan fungsi yang ingin Anda panggil dalam template HTML. Fungsi ini harus dideklarasikan sebagai method di dalam kelas komponen Angular.
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent {
// Deklarasikan fungsi yang akan dipanggil
greetUser(name: string) {
console.log(`Hello, ${name}!`);
}
}
2. Memanggil Fungsi dalam Template HTML
Dalam template HTML, Anda dapat memanggil fungsi menggunakan directive (click). Directive ini akan menjalankan fungsi yang Anda tentukan ketika elemen HTML diklik. Parameter dapat diteruskan ke fungsi dengan menambahkan tanda kurung kurawal {} dan menggunakan expression binding.
3. Mengirimkan Data Dinamis
Anda juga dapat mengirim data dinamis ke fungsi dengan menggunakan variabel komponen atau interpolasi string. Contohnya:
export class MyComponent {
userName = 'Jane Doe';
greetUser(name: string) {
console.log(`Hello, ${name}!`);
}
}
4. Menyertakan Parameter Tambahan
Anda dapat menyertakan parameter tambahan dengan memisahkannya dengan koma.
5. Penggunaan Event Binding Lainnya
Selain (click), Anda dapat menggunakan event binding lainnya seperti (mouseover), (mouseout), (keydown), dan sebagainya.
Kesimpulan
Memanggil fungsi di Angular dengan parameter dalam HTML dapat dilakukan dengan mudah menggunakan directive event binding. Dengan memahami konsep ini, Anda dapat membangun aplikasi Angular yang lebih interaktif dan dinamis.