Course Progress 33%

Angular Directives

← Angular ViewChild & ContentChild Built-in Directives →

Angular में Directives special classes होती हैं जो DOM elements के behavior या appearance को modify करती हैं। Directives template को dynamic और interactive बनाने के लिए use होती हैं।

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

  • Angular directives क्या हैं
  • Types of directives: Component, Attribute, Structural
  • Built-in directives: ngIf, ngFor, ngClass, ngStyle
  • Custom directives बनाना
  • Best practices

1. Directives क्या हैं

  • Directives HTML elements पर behavior और DOM manipulation add करती हैं
  • Angular directives class-based होती हैं
  • Components technically directives का extended form होते हैं

2. Types of Directives

a) Component Directives

  • Components भी directives ही हैं जो template और styles के साथ आती हैं
  • Example: <app-root></app-root>

b) Attribute Directives

  • Element का appearance या behavior modify करती हैं
  • Syntax: <element [directive]="value">
  • Examples: ngClass, ngStyle

c) Structural Directives

  • DOM elements को add/remove करती हैं
  • Syntax: <element *directive="condition">
  • Examples: ngIf, ngFor, ngSwitch

3. Built-in Structural Directives

a) *ngIf – Conditional Rendering

export class AppComponent {
  isVisible = true;
}

<p *ngIf="isVisible">This paragraph is visible!</p>
<button (click)="isVisible = !isVisible">Toggle</button>

Explanation:

  • *ngIf element को DOM में add/remove करता है
  • Boolean expression evaluate करके render decide होती है

b) *ngFor – List Rendering

export class AppComponent {
  users = ['John', 'Alice', 'Bob'];
}

<ul>
  <li *ngFor="let user of users; index as i">
    {{ i + 1 }}. {{ user }}
  </li>
</ul>

Explanation:

  • *ngFor array iterate करता है
  • index as i current iteration index provide करता है

c) *ngSwitch – Multiple Condition Rendering

export class AppComponent {
  color = 'red';
}

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">Red Color Selected</p>
  <p *ngSwitchCase="'green'">Green Color Selected</p>
  <p *ngSwitchDefault>Other Color</p>
</div>

Explanation:

  • [ngSwitch] expression evaluate करता है
  • *ngSwitchCase match होने पर element render होता है
  • *ngSwitchDefault fallback element render करता है

4. Built-in Attribute Directives

a) ngClass – Dynamic Classes

export class AppComponent {
  isHighlighted = true;
}

<p [ngClass]="{'highlight': isHighlighted}">This is highlighted text</p>

Explanation:

  • Object syntax: key → class name, value → boolean
  • Class dynamically apply/remove होती है

b) ngStyle – Dynamic Styles

export class AppComponent {
  color = 'blue';
  fontSize = 20;
}

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

Explanation:

  • Object syntax: property → value
  • Dynamic inline styling Angular handle करता है

5. Custom Directives

a) Attribute Directive Example

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 पर background change होती है

b) Structural Directive Example

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.vcRef.createEmbeddedView(this.templateRef);
    } else {
      this.vcRef.clear();
    }
  }
}

<p *appUnless="isVisible">This shows only when isVisible is false</p>

Explanation:

  • Custom structural directive DOM add/remove करता है
  • TemplateRef और ViewContainerRef template manage करने के लिए use होते हैं

Best Practices

  • Built-in directives prefer करें
  • Custom directives small और reusable बनाएं
  • Attribute directives → behavior/style
  • Structural directives → DOM structure
  • Directive logic simple रखें, templates clean रहें

Summary

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

  • Angular directives types: Component, Attribute, Structural
  • Built-in directives: ngIf, ngFor, ngSwitch, ngClass, ngStyle
  • Custom attribute और structural directives बनाना
  • DOM और template behavior modify करना.
← Angular ViewChild & ContentChild Built-in Directives →
  • Home