دوره‌ها / Angular / Data Binding (Data Binding)

Data Binding (Data Binding)

15 دقیقه Article

Data Binding: ارتباط بین کد و قالب 🔄

Data Binding مکانیزمی است که بخش‌های مختلف برنامه (کد و قالب) را به هم متصل می‌کند.

انواع Data Binding:

  • Output Data (TS ➡️ HTML): داده‌ها از کد به قالب می‌روند.
    مثال: Interpolation { data } و Property Binding [property]="data"
  • React to Events (HTML ➡️ TS): واکنش به رویدادهای کاربر.
    مثال: Event Binding (event)="handler()"
  • Two-Way Binding (TS ⇆ HTML): ارتباط دوطرفه، تغییر در یکی دیگری را تغییر می‌دهد.
    مثال: [(ngModel)]="data"

ما قبلاً دو مورد اول از گروه Output Data را دیدیم. حالا نوبت بقیه است!

💡 نکته: درک Data Binding کلید اصلی درک نحوه کار Angular است. این مفهوم باعث می‌شود برنامه‌های شما پویا و تعاملی باشند.
✅ یاد گرفتید: Data Binding پل ارتباطی بین منطق برنامه (TypeScript) و ظاهر برنامه (HTML) است.

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

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

تمرین: Data Binding Easy
سوال تمرین

🎯 تمرین: نمایش داده در Template

یک component بسازید که name و age رو با interpolation نمایش بده.

پاسخ تمرین
TYPESCRIPT 
// component.ts
export class UserComponent {
  name = 'Ali';
  age = 25;
}

<!-- template.html -->
<h1>{{ name }}</h1>
<p>Age: {{ age }}</p>

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

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

درس قبلی درس بعدی