Angular Built-in Directives

Angular में Built-in Directives वो ready-made directives हैं जो commonly DOM elements के behavior, structure और styling को manipulate करने के लिए use होते हैं। ये directives आपके Angular apps को dynamic और interactive बनाने में बहुत helpful हैं।

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

• Built-in Structural Directives (*ngIf, *ngFor, *ngSwitch)
• Built-in Attribute Directives (ngClass, ngStyle, ngModel, ngTemplateOutlet)
• Syntax और examples

1. Structural Directives

Structural directives DOM structure को change करती हैं यानी elements add/remove करती हैं।

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:

• *ngIf evaluates boolean expression
• True → element DOM में add
• False → element DOM से remove

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 करता है
• Multiple variables: first, last, even, odd भी available हैं

c) *ngSwitch – Multi-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
• *ngSwitchCase match होने पर element render होता है
• *ngSwitchDefault fallback element render करता है

2. Attribute Directives

Attribute directives existing DOM elements के behavior या appearance को modify करती हैं।

a) ngClass – Dynamic Classes

export class AppComponent {
  isHighlighted = true;
}

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

Explanation:

• Object syntax: key → class name, value → boolean
• True → class apply
• False → class remove

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 होती है

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 synchronize रहती हैं

Note: FormsModule import करना जरूरी है

d) ngTemplateOutlet – Dynamic Template Rendering

<ng-template #greeting>
  <p>Hello Angular!</p>
</ng-template>

<div [ngTemplateOutlet]="greeting"></div>

Explanation:

• Template reference variable (#greeting) define किया
• [ngTemplateOutlet] dynamically render करता है

3. Summary of Common Built-in Directives

Directive	Type	Use Case
*ngIf	Structural	Conditional DOM rendering
*ngFor	Structural	Looping / List rendering
*ngSwitch	Structural	Multi-condition rendering
ngClass	Attribute	Apply/remove CSS classes dynamically
ngStyle	Attribute	Apply dynamic styles
ngModel	Attribute	Two-way binding
ngTemplateOutlet	Attribute	Render templates dynamically

Best Practices

• Structural directives → DOM structure change
• Attribute directives → Element style/behavior change
• Use built-in directives before creating custom ones
• Keep expressions simple and readable

Summary

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

• Angular built-in directives के types और examples
• Structural directives: *ngIf, *ngFor, *ngSwitch
• Attribute directives: ngClass, ngStyle, ngModel, ngTemplateOutlet
• Syntax और dynamic behavior