دیتا بایندینگ (Data Binding)

دیتا بایندینگ (Data Binding) یعنی وصل کردن وضعیت کامپوننت به قالب. بنابراین نمایش همیشه با داده واقعی هماهنگ می ماند؛ مثل نمره ات که روی کارنامه به روز می شود.

مرور سریع انواع بایندینگ

چهار الگو داریم: اینترپولیشن برای متن، بایندینگ ویژگی برای پراپرتی های DOM، بایندینگ رویداد برای کلیک و ورودی ها، و بایندینگ دوسویه برای فرم ها.

{{ value }}
[prop]="value"
(event)="handler($event)"
[(ngModel)]="value"

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

بایندینگ های پایه

با اینترپولیشن متن را نشان بده. سپس با بایندینگ ویژگی مقدار ورودی را ست کن. در نهایت با بایندینگ رویداد، تغییرات کاربر را دریافت کن.

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Data Binding</h3>
    <input [value]=\"name\" (input)=\"name = $any($event.target).value\" placeholder=\"Type your name\">
    <p>Hello {{ name }}!</p>
    <button (click)=\"count = count + 1\">Clicked {{ count }} times</button>
    <button [disabled]=\"isDisabled\">Can't click me</button>
  `
})
export class App {
  name: string = 'Angular';
  count: number = 0;
  isDisabled: boolean = true;
}

bootstrapApplication(App);

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

بایندینگ دوسویه با ngModel

بایندینگ دوسویه (Two-way) یعنی قالب و کامپوننت باهم همگام باشند. مثل چت که هم می بینی هم می نویسی. برای فرم ها از [(ngModel)] استفاده کن.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h3>Two-way Binding (ngModel)</h3>
    <label>
      Name: <input [(ngModel)]=\"name\" placeholder=\"Type your name\" />
    </label>
    <label style=\"margin-left:12px\">
      Favorite:
      <select [(ngModel)]=\"favorite\">
        <option value=\"Angular\">Angular</option>
        <option value=\"TypeScript\">TypeScript</option>
        <option value=\"JavaScript\">JavaScript</option>
      </select>
    </label>
    <p>Hello {{ name || 'friend' }}!</p>
    <p>Favorite: {{ favorite }}</p>
  `
})
export class App {
  name: string = 'Angular';
  favorite: string = 'Angular';
}

bootstrapApplication(App);

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

Attribute، کلاس و استایل بایندینگ

وقتی پراپرتی DOM نداریم، از [attr.*] استفاده کن. برای کلاس و استایل هم از [class.*] و [style.*] کمک بگیر.

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: [`
    table { border-collapse: collapse; margin-top: 10px; }
    th, td { border: 1px solid #ccc; padding: 8px 10px; }
    .toolbar { display: flex; gap: 10px; align-items: center; }
  `],
  template: `
    <h3>Attribute Binding (attr.*)</h3>
    <div class=\"toolbar\">
      <label>Colspan: <input type=\"range\" min=\"1\" max=\"3\" [value]=\"span\" (input)=\"span = +$any($event.target).value\"> {{ span }}</label>
      <label>Title: <input [value]=\"title\" (input)=\"title = $any($event.target).value\"></label>
    </div>
    <table [attr.title]=\"title\">
      <thead>
        <tr><th>A</th><th>B</th><th>C</th></tr>
      </thead>
      <tbody>
        <tr>
          <td [attr.colspan]=\"span\" style=\"background:#f9fbff\">colspan={{ span }}</td>
          <td *ngIf=\"span < 2\">B</td>
          <td *ngIf=\"span < 3\">C</td>
        </tr>
      </tbody>
    </table>
  `
})
export class App {
  span: number = 1;
  title: string = 'Data table';
}

bootstrapApplication(App);

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

گام های تمرینی

1. یک فیلد متنی بساز و با اینترپولیشن نمایش بده.
2. با بایندینگ رویداد، مقدار را به روز نگه دار.
3. برای فرم ها از [(ngModel)] استفاده کن.

نکته های مهم

نکته: داخل {{'{{ ... }}'}} محاسبات سنگین نگذار. در کلاس حساب کن.

نکته: اگر ویژگی DOM وجود دارد، از بایندینگ ویژگی استفاده کن؛ وگرنه [attr.*].

بیشتر بخوان: کامپوننت ها · بایندینگ ویژگی · قالب ها

جمع بندی سریع

• متن را با {{'{{ ... }}'}} نشان بده.
• پراپرتی را با [prop] ست کن.
• رویداد را با (event) گوش بده.
• فرم ها را با [(ngModel)] همگام کن.
• [attr.*] وقتی پراپرتی نیست.