در این جلسه از دوره آموزش Angular، با یکی از مهم‌ترین مفاهیم ارتباط کاربر با برنامه آشنا می‌شویم: مدیریت رویدادها (Events). در اپلیکیشن‌های مدرن وب، کاربران دائماً با رابط کاربری تعامل دارند؛ روی دکمه‌ها کلیک می‌کنند، در فرم‌ها تایپ می‌کنند، گزینه‌ای را انتخاب می‌کنند و انتظار دارند برنامه فوراً واکنش نشان دهد.

در Angular این تعامل از طریق Event Binding انجام می‌شود. همچنین با استفاده از Two‑Way Binding می‌توان داده را به صورت همزمان بین View و Component همگام‌سازی کرد. در این جلسه یاد می‌گیریم چگونه این مکانیزم‌ها را در Angular 17 پیاده‌سازی کنیم.

Event Binding در Angular چیست؟

Event Binding روشی است که به ما اجازه می‌دهد رویدادهای کاربر در HTML را به متدهای داخل Component متصل کنیم.

برای مثال زمانی که کاربر روی یک دکمه کلیک می‌کند، می‌توانیم یک تابع در فایل TypeScript اجرا کنیم.

سینتکس Event Binding در Angular به شکل زیر است:

(event)="method()"

برای مثال رویداد کلیک:

<button (click)="showMessage()">Click Me</button>

در فایل TypeScript:

showMessage() {
  console.log('Button clicked');
}

وقتی کاربر روی دکمه کلیک کند، متد showMessage اجرا می‌شود.

مثال عملی: مدیریت کلیک دکمه

در این مثال یک دکمه داریم که با کلیک روی آن مقدار یک متغیر تغییر می‌کند.

HTML

<button (click)="increaseCounter()">Increase</button>

<p>Counter: {{ counter }}</p>

TypeScript

counter = 0;

increaseCounter() {
  this.counter++;
}

با هر کلیک روی دکمه مقدار Counter افزایش پیدا می‌کند.

دریافت مقدار از Input با Event Binding

گاهی لازم است مقدار وارد شده توسط کاربر را دریافت کنیم.

HTML

<input (input)="onInputChange($event)" placeholder="Enter your name">

<p>Your name: {{ name }}</p>

TypeScript

name = '';

onInputChange(event: any) {
  this.name = event.target.value;
}

در این مثال هر بار که کاربر چیزی تایپ کند، مقدار آن در متغیر name ذخیره می‌شود.

Two‑Way Binding در Angular چیست؟

در حالت عادی داده فقط از Component به View یا از View به Component منتقل می‌شود. اما گاهی لازم است این ارتباط دوطرفه باشد.

Two‑Way Binding یعنی:

  • اگر داده در Component تغییر کند → در View نیز تغییر کند
  • اگر کاربر در View چیزی تغییر دهد → در Component نیز تغییر کند

Angular این کار را با دستور ngModel انجام می‌دهد.

فعال‌سازی Two‑Way Binding با ngModel

برای استفاده از ngModel باید ابتدا FormsModule را import کنیم.

در Standalone Component

import { FormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [FormsModule],
})

مثال Two‑Way Binding

HTML

<input [(ngModel)]="username" placeholder="Enter your name">

<p>Hello {{ username }}</p>

TypeScript

username = '';

در این مثال:

  • اگر کاربر در input تایپ کند → مقدار username تغییر می‌کند
  • اگر مقدار username در TypeScript تغییر کند → مقدار input نیز تغییر می‌کند

به همین دلیل به آن Two‑Way Binding گفته می‌شود.

ترکیب Event Binding و Two‑Way Binding

می‌توان این دو مفهوم را با هم استفاده کرد.

HTML

<input [(ngModel)]="email" placeholder="Enter email">

<button (click)="submitForm()">Submit</button>

TypeScript

email = '';

submitForm() {
  console.log('Email:', this.email);
}

در این مثال کاربر ایمیل خود را وارد می‌کند و با کلیک روی دکمه مقدار آن در کنسول نمایش داده می‌شود.

رویدادهای رایج در Angular

Angular از بسیاری از رویدادهای DOM پشتیبانی می‌کند. برخی از پرکاربردترین آن‌ها:

  • click
  • input
  • change
  • keyup
  • keydown
  • submit
  • mouseover

مثال:

<input (keyup)="onKeyUp()">

جمع‌بندی

در این جلسه با مفاهیم بسیار مهم تعامل کاربر با برنامه در Angular آشنا شدیم.

نکات اصلی این جلسه:

  • Event Binding برای اتصال رویدادهای HTML به متدهای Component استفاده می‌شود.
  • با استفاده از () می‌توان رویدادها را مدیریت کرد.
  • برای دریافت مقدار ورودی کاربر می‌توان از $event استفاده کرد.
  • Two‑Way Binding با استفاده از [(ngModel)] انجام می‌شود.
  • Two‑Way Binding داده را به صورت همزمان بین View و Component همگام‌سازی می‌کند.

این مفاهیم پایه‌ی ساخت فرم‌ها، تعاملات کاربری و اپلیکیشن‌های داینامیک Angular هستند.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

آموزش جامع Angular 17 تا 21 | از مبتدی تا پیشرفته + پروژه‌محور