Course Progress 37%

Angular Structural Directives

← Built-in Directives Attribute Directives →

Angular में Structural Directives DOM structure को dynamically add, remove या modify करने के लिए use होती हैं। ये directives element की existence पर control देती हैं और template को interactive बनाती हैं।

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

  • Structural Directives क्या हैं
  • Built-in structural directives: *ngIf, *ngFor, *ngSwitch
  • Syntax और examples
  • Custom structural directives

1. Structural Directives क्या हैं

  • DOM structure को change करती हैं
  • Prefix * use होता है, जैसे *ngIf
  • Angular compiler इसे template rewrite में convert करता है

Example: <p *ngIf="isVisible">Hello</p> → compiler internally <ng-template> में convert करता है

2. 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 Visibility</button>

Explanation:

  • Boolean expression evaluate करके element DOM में add/remove होता है
  • *ngIf false → element DOM से remove
  • *ngIf true → element DOM में add

b) *ngFor – Loop / 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 करता है
  • Optional variables: first, last, even, odd

c) *ngSwitch – Multiple Condition Rendering

export class AppComponent {
  color = 'red';
}

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

Explanation:

  • [ngSwitch] evaluates expression
  • Matching *ngSwitchCase element render होता है
  • *ngSwitchDefault fallback element render करता है

3. Custom Structural Directives

Custom structural directives DOM dynamically add/remove कर सकती हैं।

Example – appUnless Directive

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:

  • TemplateRef → template reference
  • ViewContainerRef → container where template render होता है
  • Condition false → template render
  • Condition true → template remove

4. Summary of Structural Directives

DirectiveUse Case
*ngIfConditional rendering (DOM add/remove)
*ngForList / array iterate करना
*ngSwitchMultiple condition based rendering
Custom directiveCustom add/remove behavior

Best Practices

  • Structural directives → DOM element add/remove
  • Keep expressions simple
  • Prefer built-in directives over custom when possible
  • Combine *ngIf और *ngFor carefully to avoid unnecessary DOM rendering

Summary

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

  • Structural directives DOM structure modify करती हैं
  • Built-in directives: *ngIf, *ngFor, *ngSwitch
  • Custom structural directive बनाना (appUnless)
  • Syntax, behavior और best practices
← Built-in Directives Attribute Directives →
  • Home