Angular

Event Binding

Penjelasan

Event binding memakai syntax (namaEvent)="method()" — kurung biasa membungkus nama event DOM (click, submit, dst), isinya method/ekspresi yang dipanggil saat event itu terjadi. Objek event browser bisa diakses lewat parameter khusus $event kalau dibutuhkan.

Contoh Konsep

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

@Component({
    selector: 'app-form',
    standalone: true,
    template: `
        <button (click)="handleKlik()">Klik Aku</button>
        <form (submit)="handleSubmit($event)">
            <button type="submit">Kirim</button>
        </form>
    `,
})
export class FormComponent {
    handleKlik() {
        alert('Tombol diklik!');
    }

    handleSubmit(event: Event) {
        event.preventDefault();
        console.log('Form disubmit');
    }
}

Praktikum

Buat method handleKlik() di dalam sebuah component yang mencetak "Tombol ditekan!" ke console lewat console.log(). Panggil method itu dari (click) di sebuah tombol di template.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Perhatikan bedanya dengan property binding: event binding pakai KURUNG BIASA (click), property binding pakai KURUNG SIKU [src] — dua-duanya sering disatukan jadi banana-in-a-box [(ngModel)] untuk two-way binding, dibahas di materi berikutnya.

← Kembali Template Syntax & Property Binding Lanjutkan → Two-way Binding dengan ngModel