بایندینگ ویژگی (Attribute Binding)

«بایندینگ ویژگی (Attribute Binding)» یعنی تنظیم مستقیم ویژگی های HTML. وقتی خاصیت DOM نداریم، از الگوی [attr.name] استفاده می کنیم.

Attribute Binding دقیقاً چیست؟

با [attr.name] می توانی ویژگی های HTML را مقداردهی کنی. این روش برای چیزهایی مثل ARIA یا colspan کاربردی است و با «بایندینگ خاصیت (Property Binding)» فرق دارد.

نمونه خیلی کوتاه

<button [attr.aria-label]="label">Click</button>

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

نکته: برای خاصیت های معمول مثل [disabled] از بایندینگ خاصیت استفاده کن؛ نه attr..

کی از Attribute Binding استفاده کنیم؟

• وقتی خاصیت متناظر در DOM وجود ندارد.
• برای ARIA و جدول ها؛ مانند colspan.
• برای بهبود دسترس پذیری و معنا.

نمونه کامل

در این مثال، برچسب ARIA و مقدار colspan را با حالت تغییر می دهیم.

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Attribute binding (attr.)</h3>
    <button [attr.aria-label]="label" (click)="toggle()">Toggle label</button>
    <table border="1" style="margin-top:8px">
      <tr><th>A</th><th>B</th><th>C</th></tr>
      <tr>
        <td [attr.colspan]="wide ? 2 : 1">Row 1</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </table>
  `
})
export class App {
  wide: boolean = true;
  get label(): string {
    return this.wide ? 'Table is wide' : 'Table is narrow';
  }
  toggle(): void {
    this.wide = !this.wide;
  }
}

bootstrapApplication(App);

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

گام های عملی سریع

1. ویژگی هدف را پیدا کن؛ مثل aria-label.
2. [attr.ویژگی] را روی عنصر بگذار.
3. عبارت یا مقدار دلخواه را بایند کن.

تفاوت Attribute و Property

نکته: برای خاصیت های DOM مثل disabled، از [disabled] استفاده کن. برای ویژگی های HTML بدون خاصیت متناظر، از [attr.*] کمک بگیر.

پیوندهای مرتبط

ببین: پایپ ها · trackBy در فهرست ها · بایندینگ ویژگی

جمع بندی سریع

• [attr.name] برای ویژگی های غیر DOM است.
• ARIA و colspan نمونه های رایج اند.
• برای خاصیت ها از بایندینگ خاصیت استفاده کن.
• تغییر حالت، ویژگی ها را فوری به روز می کند.