அடுத்தது

Angular Templates: Attribute Binding with attr.

DOM பண்புகள் இல்லாதபோது HTML பண்புக்கூறுகளை பைண்டு செய்ய [attr.name] பயன்படுத்தவும்

Attribute Binding with attr. என்றால் என்ன?

HTML பண்புக்கூறுகளை அமைக்க [attr.name] பயன்படுத்தவும்.

DOM பண்புகளுக்கு மேப்பிங் செய்யாத பண்புக்கூறுகளுக்கு (எ.கா., ARIA, colspan).

பண்பு பைண்டிங்கிலிருந்து வேறுபட்டது.

Attribute Binding எப்போது பயன்படுத்த வேண்டும்

தொடர்புடைய DOM பண்பு இல்லாதபோது.

சாதாரண உறுப்பு பண்புகளுக்கு பண்பு பைண்டிங் பயன்படுத்தவும்.

ARIA பண்புக்கூறுகள் மற்றும் colspan போன்ற அட்டவணை attr. ஆகியவற்றுடன் பொதுவாக பயன்படுத்தப்படுகிறது.

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

Code Explained

[attr.aria-label]: கூறு மதிப்பைப் பயன்படுத்தி HTML aria-label பண்புக்கூறை அமைக்கிறது.

attr.: பொருந்தக்கூடிய DOM பண்பு இல்லாதபோது (எ.கா., ARIA, colspan) attr. விரும்பப்படுகிறது.

Property vs attribute: சாதாரண உறுப்பு பண்புகளுக்கு, பண்பு பைண்டிங் பயன்படுத்தவும் (எ.கா., [disabled]), attr. அல்ல.

Property Binding vs Attribute Binding

Type Syntax When to Use Example
Property Binding [property]="value" DOM properties exist [disabled]="isDisabled"
Attribute Binding [attr.attribute]="value" No DOM property exists [attr.colspan]="colSpanValue"

Property Binding

பயன்படுத்தவும்: உறுப்பு பண்புகளுக்கு (id, class, value)

உதாரணம்: <input [value]="userName">

DOM ஆல் புதுப்பிக்கப்படுகிறது

Attribute Binding

பயன்படுத்தவும்: HTML பண்புக்கூறுகளுக்கு (colspan, aria-*)

உதாரணம்: <td [attr.colspan]="colSpan">

HTML ஆல் புதுப்பிக்கப்படுகிறது

Example

attr. ஐப் பயன்படுத்தி பண்புக்கூறுகளை பைண்டு செய்யவும்:

Angular Component Example

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);

Example Explained

[attr.aria-label]="label": கூறின் லேபிள் பெறுநர் மூலம் திரும்பப் பெறப்பட்ட சரத்துடன் aria-label HTML பண்புக்கூறை பைண்டு செய்கிறது.

[attr.colspan]="wide ? 2 : 1": நிலையின் அடிப்படையில் அட்டவணை கலத்தின் colspan பண்புக்கூறை அமைக்கிறது. colspan ஒரு பண்புக்கூறு என்பதால், attr. பயன்படுத்தவும், எளிய DOM பண்பு அல்ல.

get label(): தற்போதைய பரந்த மதிப்பிலிருந்து விளக்கமான சரத்தைக் கணக்கிடுகிறது.

toggle(): லேபிள் மற்றும் கலம் span இரண்டையும் புதுப்பிக்க பரந்ததை மாற்றுகிறது.

Common Use Cases for Attribute Binding

ARIA Attributes

அணுகல் சிறப்பியல்புகளுக்கு

[attr.aria-label]="description"
[attr.aria-hidden]="isHidden"

Table Attributes

அட்டவணை பண்புக்கூறுகளுக்கு

[attr.colspan]="columnSpan"
[attr.rowspan]="rowSpan"

Custom Data Attributes

தனிப்பயன் தரவு பண்புக்கூறுகள்

[attr.data-testid]="testId"
[attr.data-cy]="cypressId"

Exercise

Which syntax binds to an HTML attribute (not a DOM property)?

❓HTML பண்புக்கூறுக்கு பைண்டு செய்யும் தொடரியல் எது? (DOM பண்பு அல்ல)

[attr.role]
✓ சரி! [attr.] தொடரியல் HTML பண்புக்கூறுகளை பைண்டு செய்ய பயன்படுகிறது
[role]
✗ தவறு! இது role DOM பண்புக்கு பைண்டு செய்கிறது, HTML பண்புக்கூறுக்கு அல்ல
(role)
✗ தவறு! இது role நிகழ்வுக்கான நிகழ்வு பைண்டிங்கைக் குறிக்கிறது

Important Note

பண்பு பைண்டிங்கிற்கும் பண்புக்கூறு பைண்டிங்கிற்கும் இடையே உள்ள வேறுபாட்டை எப்போதும் புரிந்துகொள்ளுங்கள்:

  • Property binding: [property]="value" (DOM properties)
  • Attribute binding: [attr.attribute]="value" (HTML attributes)

Best Practices

Use [attr.] for Accessibility

அணுகல் சிறப்பியல்புகளுக்கு எப்போதும் [attr.] பயன்படுத்தவும்: [attr.aria-label], [attr.aria-describedby]

Check DOM Properties First

DOM பண்பு இருக்கும் வரை பண்பு பைண்டிங் பயன்படுத்தவும். பண்புக்கூறு பைண்டிங் கடைசி விருப்பமாக பயன்படுத்தவும்

Avoid attr. for Standard Properties

id, class, value போன்ற நிலையான பண்புகளுக்கு [attr.id] போன்றவற்றைப் பயன்படுத்த வேண்டாம்

அடுத்தது