Jassif Team Institution

Angular Dynamic Components

createComponent() மூலம் ரன்டைமில் கூறுகளை உருவாக்கவும், அல்லது selector இல்லாத standalone கூறுகளை *ngComponentOutlet மூலம் வழங்கவும்.

Dynamic Components Essentials

createComponent(): ரன்டைமில் கூறுகளை உருவாக்கவும் மற்றும் உள்ளீடுகள், வெளியீடுகள் மற்றும் directives-ஐ நேரடியாக அனுப்பவும்.

Selectorless components: Standalone கூறுகளை selector இல்லாமல் *ngComponentOutlet மூலம் பயன்படுத்தலாம்.

Signals: signal() இருந்து மாறும் நிலையை இயக்கவும் மற்றும் டெம்ப்ளேட்டுகளில் signal-ஐ அழைப்பதன் மூலம் படிக்கவும்.

createComponent() with Inputs & Outputs

உள்ளீடுகள்/வெளியீடுகளை வழங்கவும் மற்றும் DOM-இல் இணைக்க ஒரு விருப்பமான hostElement.

கூறு வழங்குநர்களைத் தீர்க்கக்கூடியதாக EnvironmentInjector (அல்லது inject()) பயன்படுத்தவும்.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, EventEmitter, Output, Input, ElementRef, ViewChild, inject, EnvironmentInjector, ComponentRef } from '@angular/core';
import { createComponent } from '@angular/core';

@Component({
  standalone: true,
  template: `
    <div style="padding:8px;border:1px solid #ddd;border-radius:6px;">
      <h4 style="margin:0 0 8px 0;">{{ title }}</h4>
      <button (click)="clicked.emit()">Click</button>
    </div>
  `
})
export class Card {
  @Input() title = 'Card';
  @Output() clicked = new EventEmitter<void>();
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Dynamic createComponent()</h3>
    <div #host style="min-height:60px;border:1px dashed #aaa;padding:8px;border-radius:6px;"></div>
    <div style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;">
      <button (click)="mount()">Mount</button>
      <button (click)="update()">Update input</button>
      <button (click)="unmount()">Unmount</button>
    </div>
  `
})
export class App {
  @ViewChild('host', { read: ElementRef }) host!: ElementRef<HTMLElement>;
  env: EnvironmentInjector = inject(EnvironmentInjector);
  ref: ComponentRef<Card> | null = null;

  mount() {
    if (this.ref) return;
    this.ref = createComponent(Card, {
      environmentInjector: this.env,
      hostElement: this.host.nativeElement
    });
    this.ref.setInput?.('title', 'Hello from Dynamic');
    this.ref.instance.clicked.subscribe(() => alert('Card clicked'));
  }
  update() {
    if (!this.ref) return;
    this.ref.setInput?.('title', 'Updated Title ' + new Date().toLocaleTimeString());
  }
  unmount() {
    this.ref?.destroy();
    this.ref = null;
  }
}

bootstrapApplication(App);

Selectorless via *ngComponentOutlet

*ngComponentOutlet ஐப் பயன்படுத்தி selector இல்லாமல் ஒரு standalone கூறை வழங்கவும்.

உள்ளீடுகள் மற்றும் வெளியீடுகளை outlet micro-syntax-இல் inline-ஆக அனுப்பவும்.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, EventEmitter, Output, Input, signal } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';

@Component({
  standalone: true,
  template: `<button (click)="clicked.emit()">{{ label }}</button>`
})
export class ActionButton {
  @Input() label = 'Do it';
  @Output() clicked = new EventEmitter<void>();
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgComponentOutlet],
  template: `
    <h3>Selectorless via *ngComponentOutlet</h3>
    <p>Clicks: {{ clicks() }}</p>
    <ng-container *ngComponentOutlet="ActionButton; inputs: { label: 'Launch' }; outputs: { clicked: onClick }"></ng-container>
  `
})
export class App {
  ActionButton = ActionButton;
  clicks = signal(0);
  onClick = () => this.clicks.update(n => n + 1);
}

bootstrapApplication(App);

Dynamic Component Approaches Comparison

Dynamic Components Quiz