Event Binding (Event Binding)

15 دقیقه Article

Event Binding: واکنش به کاربر 🖱️

چطور بفهمیم کاربر روی دکمه کلیک کرده یا چیزی تایپ کرده؟ با Event Binding!

سینتکس:

برای گوش دادن به یک رویداد، نام رویداد را درون پرانتز ( ) قرار می‌دهیم.


<button (click)="onServerCreation()">Create Server</button>

در اینجا، وقتی رویداد click رخ دهد، متد onServerCreation() در کلاس TypeScript اجرا می‌شود.

پیاده‌سازی در TypeScript:

// در TS
serverCreationStatus = 'No server was created!';

onServerCreation() {
  this.serverCreationStatus = 'Server was created!';
}

دریافت داده‌های رویداد (Event Data):

گاهی اوقات نیاز داریم اطلاعاتی درباره رویداد داشته باشیم (مثلاً متنی که در input تایپ شده). برای این کار از $event استفاده می‌کنیم.


<input type="text" (input)="onUpdateServerName($event)">
{{ serverName }}

// در TS
serverName = '';

onUpdateServerName(event: Event) {
  // کست کردن (Casting) برای اینکه TypeScript بفهمد این یک Input Element است
  this.serverName = (<HTMLInputElement>event.target).value;
}

💡 نکته: $event یک متغیر رزرو شده در تمپلت‌های Angular است که داده‌های مربوط به رویداد را حمل می‌کند.

✅ یاد گرفتید: با Event Binding می‌توانید به تعاملات کاربر پاسخ دهید و برنامه خود را زنده کنید!

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تمرین: Event Binding Easy

سوال تمرین

🎯 تمرین: دکمه با Event Handler

یک دکمه بسازید که با کلیک، یک counter رو افزایش بده.

پاسخ تمرین

TYPESCRIPT

// component.ts
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

<!-- template.html -->
<button (click)="increment()">Click Me</button>
<p>Count: {{ count }}</p>

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo