Event Binding Angular — Angular

Angular menggunakan () untuk menangani event DOM. Event Dasar +1 Event Object export class AppComponent { onInput(event: Event) { const input = event.target…

Event binding membuat template mendengarkan kejadian di halaman, misalnya klik atau ketikan, lalu menjalankan kode di class. Ditulis dengan kurung biasa: (click)="tambah()". Bayangin bel di meja kasir Martabak Bang Jali. Pembeli menekan bel (event), Bang Jali mendengar lalu mencatat pesanannya (method), dan papan pesanan di dinding ikut diperbarui (template). Kurung siku [ ] membawa data dari class ke halaman; kurung biasa ( ) membawa kejadian dari halaman ke class.

🧪 Tebakan cepat: Tombolnya ditulis <button (click)="jumlah++">+1</button>. Diklik tiga kali, jumlah jadi berapa? Jawabannya ada di bagian "Template statement: apa yang boleh ditulis".

(click): dari klik ke method

import { Component } from '@angular/core'

@Component({
  selector: 'app-pesanan',
  standalone: true,
  template: `
    <h3>Martabak Telur Spesial · Rp50000</h3>
    <button (click)="kurang()">-1</button>
    <button (click)="tambah()">+1</button>
    <p>Jumlah: {{ jumlah }}</p>
    <p>Total: Rp{{ jumlah * 50000 }}</p>
  `,
})
export class Pesanan {
  jumlah = 0

  tambah() {
    this.jumlah = this.jumlah + 1
  }

  kurang() {
    if (this.jumlah > 0) {
      this.jumlah = this.jumlah - 1
    }
  }
}

Kejadian	`jumlah`	Tampil
Render pertama	0	Jumlah: 0, Total: Rp0
Klik +1	1	Jumlah: 1, Total: Rp50000
Klik +1	2	Jumlah: 2, Total: Rp100000
Klik -1	1	Jumlah: 1, Total: Rp50000

(click)="tambah()": nama event-nya di dalam kurung, dan isi tanda kutipnya adalah template statement, kode yang dijalankan saat event itu terjadi.
Di dalam method kamu menulis this.jumlah; di template cukup jumlah, karena template selalu membaca dari class-nya sendiri.
Sesudah handler dari template selesai, Angular memeriksa template lagi dan memperbarui teks yang berubah. Itu sebabnya Jumlah: dan Total: ikut naik tanpa kamu menyentuh DOM.
Di Angular modern, angka seperti ini makin sering disimpan di signal: jumlah = signal(0), diubah dengan this.jumlah.update(n => n + 1), dan dibaca di template dengan {{ jumlah() }}. Signal dibahas di pelajaran Signals. Latihan di sini menerima properti biasa.

$event: isi kejadiannya

<input (input)="ubahCatatan($event)" (keyup.enter)="kirim()" placeholder="Catatan" />
<p>Catatan: {{ catatan }}</p>

catatan = ''
terkirim = ''

ubahCatatan(event: Event) {
  const input = event.target as HTMLInputElement
  this.catatan = input.value
}

kirim() {
  this.terkirim = this.catatan
}

$event adalah objek event DOM-nya. Untuk (input), event.target adalah kotak input, dan .value isinya. Tiap huruf yang diketik memicu (input) sekali.
as HTMLInputElement memberi tahu TypeScript bahwa target-nya kotak input, supaya .value boleh dibaca.
(keyup.enter)="kirim()" cuma jalan saat tombol Enter dilepas. Angular menyaring tombolnya untukmu.

Template statement: apa yang boleh ditulis

Yang boleh:

memanggil method: (click)="tambah()"
assignment dengan =: (click)="jumlah = jumlah + 1" atau (click)="favorit = !favorit"
beberapa langkah, dipisah titik koma: (click)="tambah(); simpan()"

Yang ditolak compiler, dengan pesan dari Angular 22 (versi editor latihan):

Ditulis	Pesan
`(click)="jumlah++"`	`Parser Error: Unexpected end of expression: jumlah++ at the end of the expression [jumlah++]`
`(click)="new Date()"`	`Parser Error: Unexpected token 'Date'`

(click)="jumlah += 1" ditolak Angular 18 (Parser Error: Unexpected token = at column 9 in [jumlah += 1]), tapi Angular 22 menerimanya: di editor latihan, tombol itu menaikkan jumlah. Di proyek yang masih Angular 18, tulis jumlah = jumlah + 1.

Error kompilasi membuat seluruh template gagal: tombolnya gak pernah dibuat, jadi gak ada yang bisa diklik dan jumlah gak pernah berubah. Itu jawaban tebakannya. this.jumlah++ di dalam method tetap boleh, karena itu TypeScript biasa, bukan template.

( ) lawan [ ]

[disabled]="habis": data mengalir dari class ke halaman.
(click)="tambah()": kejadian mengalir dari halaman ke class.

Kalau kurungnya tertukar, <input [keyup.enter]="kirim()"> gak menjalankan apa pun saat Enter. Angular menganggapnya property, dan console menulis NG0303: Can't bind to 'keyup.enter' since it isn't a known property of 'input'. Yang benar (keyup.enter)="kirim()".

⚠️ Jebakan yang sering ketemu

++ di template. Template gagal dikompilasi. Tulis count = count + 1, atau panggil method yang menaikkannya. += juga gagal di Angular 18.
Lupa kurung pemanggil. (click)="tambah" gak error, tapi juga gak menjalankan apa pun: method-nya cuma disebut, gak dipanggil. Tulis tambah().
Kurung tertukar. [click] atau [keyup.enter] dianggap property. Event selalu pakai ( ).
Urutan di latihan. Penilai membaca <p> pertama dan menekan <button> pertama di halaman. Taruh tombol +1 dan paragraf Count: ... tanpa tombol atau paragraf lain di atasnya, dan pastikan Count: 0 sudah tampil sebelum diklik.

TL;DR: (event)="statement" menjalankan kode saat event terjadi: (click)="tambah()" memanggil method, dan sesudahnya Angular memperbarui template sendiri. $event membawa objek event-nya, misalnya event.target.value dari (input), dan (keyup.enter) cuma jalan saat Enter. Template statement boleh memanggil method, memakai =, dan memisah langkah dengan titik koma, tapi ++ dan new ditolak compiler (begitu juga += di Angular 18), sehingga seluruh komponen gak tampil. ( ) membawa kejadian dari halaman ke class, kebalikan dari [ ].