Course Progress 85%

Angular Dynamic Components

← Signals & Reactive Rendering Angular Styling →

Angular Dynamic Components का मतलब है runtime पर component को create करना, load करना और destroy करना। यानी component पहले से template में hard-coded नहीं होता, बल्कि condition, user action या data के आधार पर dynamically render होता है। यह feature Angular में dashboards, plugins, modal systems, CMS-type layouts और highly configurable UI बनाने के लिए बहुत important है।

इस chapter में हम Angular (not AngularJS) के modern और recommended तरीकों पर focus करेंगे, खासकर Standalone Components और नए APIs के साथ।

Dynamic Components की जरूरत क्यों पड़ती है

कई real-world scenarios में static components sufficient नहीं होते। उदाहरण:

  • User role के आधार पर अलग-अलग UI blocks load करना
  • CMS में admin द्वारा चुने गए components render करना
  • Tabs, widgets, या dashboard cards dynamically add/remove करना
  • Modal, popup, toast systems
  • Plugin-based architecture

इन सभी cases में component का type runtime पर decide होता है।

Angular में Dynamic Component Loading का evolution

Angular में dynamic components load करने के तरीके समय के साथ change हुए हैं:

  • पुराने Angular versions में ComponentFactoryResolver और ViewContainerRef use होता था
  • Modern Angular (v14+) में simplified APIs available हैं
  • Standalone Components के साथ dynamic loading और भी clean हो गया है

इस tutorial में हम modern approach ही use करेंगे।

Core concepts जो समझना जरूरी है

Dynamic Components समझने के लिए ये concepts clear होने चाहिए:

  • Component Type
  • ViewContainerRef
  • createComponent()
  • ComponentRef
  • Input values dynamically pass करना
  • Component destroy करना

ViewContainerRef क्या है

ViewContainerRef एक Angular service है जो किसी location पर views या components को dynamically insert करने की capability देता है।

Simple language में:
यह Angular को बताता है कि component को DOM में कहां render करना है।

Basic Dynamic Component Example

सबसे पहले एक simple dynamic component बनाते हैं।

Step 1: Dynamic Component बनाना

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-box',
  standalone: true,
  template: `
    <div style="padding:10px; border:1px solid #333;">
      <h3>Dynamic Component</h3>
      <p>This component is loaded dynamically.</p>
    </div>
  `
})
export class DynamicBoxComponent {}

यह एक standalone component है जिसे हम runtime पर load करेंगे।

Step 2: Host Component बनाना

अब एक component बनाएंगे जहां dynamic component load होगा।

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicBoxComponent } from './dynamic-box.component';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="loadComponent()">Load Component</button>
    <ng-container #container></ng-container>
  `
})
export class AppComponent {

  @ViewChild('container', { read: ViewContainerRef })
  container!: ViewContainerRef;

  loadComponent() {
    this.container.createComponent(DynamicBoxComponent);
  }
}

यहां क्या हो रहा है

  • ng-container एक placeholder है DOM में
  • ViewChild से हमें उसका ViewContainerRef मिला
  • createComponent() method से component runtime पर create हुआ

Button click पर component dynamically render हो जाता है।

Dynamic Component को Clear / Remove करना

अगर हर click पर नया component add नहीं करना, बल्कि पहले वाले को remove करना है, तो container clear करना होगा।

loadComponent() {
  this.container.clear();
  this.container.createComponent(DynamicBoxComponent);
}

clear() container के अंदर मौजूद सभी dynamic views को destroy कर देता है।

Multiple Dynamic Components Load करना

आप multiple components भी dynamically add कर सकते हैं।

loadMultiple() {
  this.container.createComponent(DynamicBoxComponent);
  this.container.createComponent(DynamicBoxComponent);
}

Angular automatically DOM में उन्हें append करता है।

Dynamic Component को Data Pass करना

Dynamic component में @Input() properties भी use की जा सकती हैं।

Dynamic Component में Input define करना

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dynamic-box',
  standalone: true,
  template: `
    <div>
      <h3>{{ title }}</h3>
      <p>{{ message }}</p>
    </div>
  `
})
export class DynamicBoxComponent {
  @Input() title!: string;
  @Input() message!: string;
}

Host Component से Data Pass करना

loadComponent() {
  this.container.clear();

  const componentRef = this.container.createComponent(DynamicBoxComponent);

  componentRef.instance.title = 'Hello Angular';
  componentRef.instance.message = 'This data is passed dynamically';
}

Important Point

  • createComponent() एक ComponentRef return करता है
  • instance से component class access होती है
  • Inputs को manually assign करना पड़ता है

ComponentRef क्या है

ComponentRef dynamically created component का reference होता है।

इससे आप:

  • Component instance access कर सकते हैं
  • Change detection trigger कर सकते हैं
  • Component destroy कर सकते हैं

Example:

const ref = this.container.createComponent(DynamicBoxComponent);
ref.destroy();

Dynamic Component को Destroy करना

Memory leaks avoid करने के लिए dynamically created components को सही समय पर destroy करना जरूरी है।

let componentRef: ComponentRef<DynamicBoxComponent>;

load() {
  this.componentRef = this.container.createComponent(DynamicBoxComponent);
}

remove() {
  this.componentRef.destroy();
}

अगर आप container.clear() use करते हैं, तो Angular automatically destroy कर देता है।

Dynamic Components with Conditions

Real projects में component type runtime पर decide होता है।

load(type: 'box' | 'card') {
  this.container.clear();

  if (type === 'box') {
    this.container.createComponent(DynamicBoxComponent);
  }
}

इस pattern का use CMS और dashboard systems में बहुत common है।

Dynamic Components vs Control Flow

Angular के नए control flow syntax (@if, @for) compile-time rendering के लिए हैं।
Dynamic components runtime पर completely new component instances create करते हैं।

Difference:

  • Control Flow → template level rendering
  • Dynamic Components → runtime component creation

दोनों का use-case अलग है।

Common Use Cases Summary

Angular Dynamic Components का practical use होता है:

  • Modal / Dialog systems
  • Dynamic dashboards
  • Plugin-based UI
  • CMS page builders
  • Role-based layouts
  • Runtime configurable UI blocks

Best Practices

  • Dynamic components का overuse न करें
  • जहां simple condition या loop काम कर जाए, वहां control flow prefer करें
  • Always clear or destroy components to avoid memory leaks
  • Standalone components use करें for cleaner architecture
  • Dynamic inputs carefully manage करें

Angular में Dynamic Components आपको powerful flexibility देते हैं, लेकिन सही जगह और सही तरीके से use करना जरूरी है। अगले chapters में हम styling और animations के साथ इन dynamic UIs को और polish करना सीखेंगे।

← Signals & Reactive Rendering Angular Styling →
  • Home