Course Progress 70%

Angular Conditional Rendering

← Custom Directives Angular Lists →

Angular में Conditional Rendering का मतलब है कि किसी condition के आधार पर DOM elements को show या hide करना। Modern Angular में यह काम mainly *ngIf, ng-template, else blocks, और नए versions में control flow syntax के ज़रिए किया जाता है।

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

  • Conditional rendering क्या है
  • *ngIf का basic और advanced use
  • else और then blocks
  • ng-template का role
  • Multiple conditions handle करने के तरीके

Conditional Rendering क्या है

जब UI में कोई element तभी दिखाना हो जब कोई condition true हो, और false होने पर hide या remove हो जाए, उसे conditional rendering कहते हैं।

Angular में यह सिर्फ CSS display: none नहीं करता, बल्कि DOM से element को add/remove करता है, जिससे performance बेहतर रहती है।

*ngIf – Basic Conditional Rendering

Example

export class AppComponent {
  isLoggedIn = false;
}

<p *ngIf="isLoggedIn">Welcome, User!</p>
<button (click)="isLoggedIn = !isLoggedIn">Toggle Login</button>

Explanation

  • *ngIf="isLoggedIn" condition check करता है
  • true होने पर <p> DOM में add होता है
  • false होने पर <p> DOM से completely remove हो जाता है
  • Button click से condition toggle होती है

*ngIf with else Block

Single condition के साथ alternative UI दिखाने के लिए else block use किया जाता है।

Example

export class AppComponent {
  isLoggedIn = false;
}

<p *ngIf="isLoggedIn; else loggedOut">
  Welcome back!
</p>

<ng-template #loggedOut>
  <p>Please login to continue.</p>
</ng-template>

Explanation

  • *ngIf true होने पर पहला <p> render होता है
  • False होने पर ng-template वाला content render होता है
  • ng-template directly DOM में नहीं दिखता, जब तक Angular उसे use न करे

then और else दोनों का use

Angular में then और else दोनों blocks explicitly define किए जा सकते हैं।

Example

<div *ngIf="isLoggedIn; then loggedInBlock; else loggedOutBlock"></div>

<ng-template #loggedInBlock>
  <p>You are logged in</p>
</ng-template>

<ng-template #loggedOutBlock>
  <p>You are logged out</p>
</ng-template>

Explanation

  • then block → condition true होने पर render
  • else block → condition false होने पर render
  • Complex UI conditions में code ज्यादा readable बनता है

Multiple Conditions Handling

Angular में multiple conditions handle करने के लिए logical operators use किए जाते हैं।

Example

export class AppComponent {
  isAdmin = true;
  isLoggedIn = true;
}

<p *ngIf="isLoggedIn && isAdmin">
  Admin Dashboard
</p>

Explanation

  • && operator multiple conditions check करता है
  • दोनों conditions true होने पर ही element render होता है

Conditional Rendering vs CSS Hide

<p *ngIf="isVisible">Using ngIf</p>
<p [hidden]="!isVisible">Using hidden</p>

Explanation

  • *ngIf → element DOM से add/remove करता है
  • [hidden] → element DOM में रहता है, सिर्फ CSS से hide होता है
  • Heavy components के लिए *ngIf better performance देता है

Best Practices

  • Heavy components के लिए *ngIf prefer करें
  • Complex conditions को component class में method या variable में रखें
  • Nested *ngIf से बचें, readability कम होती है
  • Reusable conditional UI के लिए ng-template use करें

Summary

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

  • Angular में conditional rendering का concept
  • *ngIf का basic और advanced use
  • else और then blocks
  • ng-template का role
  • Multiple conditions handle करना
  • Performance और best practices
← Custom Directives Angular Lists →
  • Home