Course Progress 39%

Angular Attribute Directives

← Structural Directives Custom Directives →

Angular में Attribute Directives DOM elements के appearance या behavior को modify करती हैं। ये element की style, class या property को dynamically change करने के लिए use होती हैं।

इस chapter में आप सीखेंगे:

  • Attribute Directives क्या हैं
  • Built-in Attribute Directives: ngClass, ngStyle, ngModel, ngForTrackBy
  • Custom Attribute Directives
  • Syntax और examples

1. Attribute Directives क्या हैं

  • DOM elements के attributes या behavior modify करती हैं
  • Element को replace नहीं करती (structure same रहता है)
  • Prefix [] से bind किया जाता है

Structural directives DOM structure change करती हैं, Attribute directives सिर्फ element behavior/style change करती हैं

2. Built-in Attribute Directives

a) ngClass – Dynamic Classes

export class AppComponent {
  isHighlighted = true;
}

<p [ngClass]="{'highlight': isHighlighted}">
  This text may be highlighted
</p>
<button (click)="isHighlighted = !isHighlighted">Toggle Highlight</button>

Explanation:

  • Object syntax: key → class name, value → boolean
  • True → class apply
  • False → class remove
  • Dynamic styling और conditional classes के लिए best

b) ngStyle – Dynamic Styles

export class AppComponent {
  fontColor = 'blue';
  fontSize = 18;
}

<p [ngStyle]="{'color': fontColor, 'font-size.px': fontSize}">
  Styled text
</p>

Explanation:

  • Object syntax: property → value
  • Inline styling dynamically update होती है
  • Useful for dynamic CSS changes

c) ngModel – Two-Way Binding

export class AppComponent {
  userName = 'Alice';
}

<input [(ngModel)]="userName">
<p>Hello, {{ userName }}</p>

Explanation:

  • Two-way binding create करता है
  • Input field और component property synchronized रहती हैं
  • FormsModule import करना जरूरी है

d) ngForTrackBy – Optimize ngFor Rendering

users = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Alice'},
];

trackById(index: number, user: any) {
  return user.id;
}

<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

Explanation:

  • TrackBy function performance improve करता है
  • DOM unnecessarily recreate होने से बचाता है

3. Custom Attribute Directives

Custom attribute directives element behavior या style modify करने के लिए create की जा सकती हैं।

Example – appHighlight Directive

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = null;
  }
}

<p appHighlight>Hover over me!</p>

Explanation:

  • ElementRef element access करने के लिए
  • HostListener DOM events listen करता है
  • Mouse enter/leave पर style change होती है

4. Summary of Attribute Directives

DirectiveUse Case
ngClassDynamic CSS classes
ngStyleDynamic inline styles
ngModelTwo-way binding for forms
ngForTrackByOptimize ngFor rendering
Custom directiveModify element behavior or style

Best Practices

  • Use built-in directives before creating custom
  • Keep directive logic small and reusable
  • Avoid heavy DOM manipulation in directive
  • For dynamic styles, prefer ngClass/ngStyle over direct ElementRef manipulation

Summary

इस chapter में आपने सीखा:

  • Attribute directives DOM element appearance/behavior modify करती हैं
  • Built-in directives: ngClass, ngStyle, ngModel, ngForTrackBy
  • Custom directive बनाना (appHighlight)
  • Syntax और best practices
← Structural Directives Custom Directives →
  • Home