رویدادها (Events)

رویداد (Event) یعنی اتفاقی در رابط، مثل کلیک. بنابراین با بایندینگ رویداد، قالب به عمل کاربر واکنش نشان می دهد؛ درست مثل زنگ کلاس که شروع درس را اعلام می کند.

اصول بایندینگ رویداد

با (event) متد کامپوننت را صدا بزن. متغیر $event همان رویداد بومی مرورگر است. همچنین می توانی فیلتر کلیدها مثل (keyup.enter) را استفاده کنی.

<button (click)=\"onClick()\">Click</button>
<input (input)=\"onInput($event)\" (keyup.enter)=\"submit()\">
<div (click)=\"onParentClick()\">
  <button (click)=\"onChildClick($event)\">Child</button>
</div>

مشاهده در ادیتور

رویدادهای پایه

با (click) وضعیت را تغییر بده. سپس مقدار ورودی را از $event.target بخوان. در پایان، آخرین کلید را با (keyup) نگه دار.

<button (click)=\"increment()\">Click me</button>
<input (input)=\"onInput($event)\" (keyup)=\"lastKey = $any($event).key\">

مشاهده در ادیتور

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Events</h3>
    <p>Count: {{ count }}</p>
    <button (click)=\"increment()\">Click me</button>
    <div style=\"margin-top:12px\">
      <input placeholder=\"Type...\" (input)=\"onInput($event)\" (keyup)=\"lastKey = $any($event).key\">
      <p>Value: {{ value }}</p>
      <p>Last key: {{ lastKey }}</p>
    </div>
  `
})
export class App {
  count: number = 0;
  value: string = '';
  lastKey: string = '';
  increment(): void {
    this.count++;
  }
  onInput(e: Event): void {
    this.value = (e.target as HTMLInputElement).value;
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

فیلتر رویداد کلیدی (keyup.enter)

با نام های میان بر کلید، فقط هنگام «Enter» عمل کن؛ مثل ثبت پاسخ وقتی زنگ پایان امتحان می خورد.

<input (keyup.enter)=\"add()\" (keyup)=\"lastKey = $any($event).key\">

مشاهده در ادیتور

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    ul { margin-top: 10px; }
    li { line-height: 1.8; }
    input[type=\"text\"] { padding: 6px 8px; }
  `],
  template: `
    <h3>Event Filtering (keyup.enter)</h3>
    <div class=\"toolbar\">
      <input type=\"text\" placeholder=\"Add item and press Enter\"
             [value]=\"draft\"
             (input)=\"draft = $any($event.target).value\"
             (keyup)=\"lastKey = $any($event).key\"
             (keyup.enter)=\"add()\">
      <button (click)=\"add()\">Add</button>
      <button (click)=\"clear()\" [disabled]=\"items.length === 0\">Clear</button>
      <span style=\"margin-left:8px;color:#666\">Last key: {{ lastKey }}</span>
    </div>
    <ul>
      <li *ngFor=\"let it of items; let i = index\">{{ i + 1 }}. {{ it }}</li>
    </ul>
  `
})
export class App {
  draft: string = '';
  lastKey: string = '';
  items: string[] = ['Buy milk', 'Learn Angular'];
  add(): void {
    const v: string = (this.draft || '').trim();
    if (!v) {
      return;
    }
    this.items = [...this.items, v];
    this.draft = '';
  }
  clear(): void {
    this.items = [];
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

دی بونس ورودی

دی بونس (Debounce) یعنی تا مکث کاربر صبر کن. بنابراین کارِ سنگین را کمتر اجرا می کنی؛ مثل صبر کردن تا هم کلاسی حرفش تمام شود.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Debounced Input</h3>
    <input type=\"text\" placeholder=\"Type here\" (input)=\"onInput($event)\">
    <p>Immediate: {{ immediate }}</p>
    <p>Debounced (400ms): {{ debounced }}</p>
  `
})
export class App {
  immediate: string = '';
  debounced: string = '';
  private handle: any;
  onInput(e: Event): void {
    const v: string = (e.target as HTMLInputElement)?.value ?? '';
    this.immediate = v;
    clearTimeout(this.handle);
    this.handle = setTimeout((): void => this.debounced = v, 400);
  }
}

bootstrapApplication(App);

مشاهده در ادیتور