Atribut bog‘lash

Hech qanday DOM xususiyati mavjud bo‘lmaganda [attr.name] bilan HTML atributlariga bog‘lang.

Atribut bilan bog‘lanish nima?

• HTML atributlarini o‘rnatish uchun [attr.name] dan foydalaning.
• DOM xususiyatlariga mos kelmaydigan atributlar uchun (masalan, ARIA, colspan ).
• Xususiyatni bog‘lashdan farq qiladi.

Atributlarni bog‘lashdan qachon foydalanish kerak

• Tegishli DOM xususiyati mavjud bo‘lmaganda.
• Oddiy element xususiyatlari uchun xususiyatni bog‘lashdan foydalaning.
• ARIA atributlari va colspan kabi jadval attrlari bilan umumiy.

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

Kod tushuntirildi

• [attr.aria-label]: component qiymatidan foydalanib HTML aria-label atributini o‘rnatadi.
• attr.: afzal attr. mos keladigan DOM xususiyati bo‘lmasa (masalan, ARIA, colspan).
• Xususiyat va atribut: Oddiy element xossalari uchun attr. emas, xususiyatni bog‘lashdan foydalaning (masalan, [disabled] ).

Misol

attr. yordamida atributlarga bog‘lang:

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 = true;
  get label() { return this.wide ? 'Table is wide' : 'Table is narrow'; }
  toggle() { this.wide = !this.wide; }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• [attr.aria-label]="label": aria-label HTML atributini komponentning teg oluvchisi tomonidan qaytarilgan stringga bog‘laydi.
• [attr.colspan]="wide ? 2 : 1" : Jadval yacheykasining colspan atributini holat asosida o‘rnatadi. attr. dan foydalaning, chunki colspan oddiy DOM xususiyati emas, balki atributdir.
• get label() : Joriy wide qiymatidan tavsiflovchi stringni hisoblaydi.
• toggle() : Yorliq va hujayra oralig‘ini yangilash uchun wide ni aylantiradi.