Angular dinamik komponentlar

createComponent() bilan ishlash vaqtida componentlar yarating yoki *ngComponentOutlet bilan selektorsiz mustaqil komponentlarni ko‘rsating.

Dinamik componentlar asoslari

• createComponent(): Ishlash vaqtida komponentlarni yarating va to‘g‘ridan-to‘g‘ri inputs , outputs va directives o‘tkazing.
• Selektorsiz componentlar: Mustaqil componentlar *ngComponentOutlet orqali selektorsiz ishlatilishi mumkin.
• Signallar: signal() dan dinamik holatni boshqaring va signalni chaqirish orqali shablonlarni o‘qing.

createComponent() kirish va chiqishlar bilan

• DOMga biriktirish uchun inputs / outputs va ixtiyoriy hostElement taqdim eting.
• Component provayderlarni hal qilishi uchun EnvironmentInjector (yoki inject() ) dan foydalaning.

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);

<app-root></app-root>

Misol tushuntirildi

• createComponent(Card, ...): Ishlash vaqtida Karta komponentini yaratadi va component refini qaytaradi.
• environmentInjector: Dinamik component provayderlarni hal qilishi uchun DI ta’minlaydi.
• hostElement: Komponentning xostini berilgan DOM elementiga (#host) biriktiradi.
• kirishlar/chiqishlar: Boshlang‘ich kirish qiymatlarini (inputs) o‘rnatadi va chiqishlarga (outputs) callback-larni ulaydi (masalan, clicked ).
• setInput / destroy: Kirishlarni keyinroq ref.setInput(...) bilan yangilang va ref.destroy() orqali tozalang.

*ngComponentOutlet orqali selektorsiz

• *ngComponentOutlet yordamida mustaqil komponentni selektorsiz ko‘rsating.
• Chiqish mikrosintaksisida inputs va outputs qatorlarini kiriting.

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);

<app-root></app-root>

Misol tushuntirildi

• *ngComponentOutlet="ActionButton": ActionButton tomonidan havola qilingan mustaqil componentlar classini ko‘rsatadi.
• kirishlar / chiqishlar: Qiymatlarni va natija voqealarini to‘g‘ridan-to‘g‘ri natija mikrosintaksisida o‘tkazing.
• Holat uchun signallar: clicks signali holatni saqlaydi va onClick uni oshirganda UIni yangilaydi.