Advanced Component

### Dynamic component — ViewContainerRef.createComponent()
Senior

Nima bu?

Dynamic component runtime'da ViewContainerRef.createComponent() yordamida yaratiladi va DOM'ga qo'shiladi. Modal, tab, widget loader kabi holatlarda foydali. Angular 13.2+ da ComponentRef orqali instance'ga kirish va destroy() bilan tozalash mumkin.

Kod misoli

import {
  Component,
  ViewChild,
  ViewContainerRef,
  Type,
  inject,
  EnvironmentInjector,
} from '@angular/core';

@Component({
  selector: 'app-alert-banner',
  standalone: true,
  template: `<div class="alert">{{ message }}</div>`,
})
export class AlertBannerComponent {
  message = 'Ogohlantirish!';
}

@Component({
  selector: 'app-dynamic-host',
  standalone: true,
  template: `
    <ng-container #host></ng-container>
    <button type="button" (click)="loadAlert()">Alert yuklash</button>
    <button type="button" (click)="clear()">Tozalash</button>
  `,
})
export class DynamicHostComponent {
  @ViewChild('host', { read: ViewContainerRef }) host!: ViewContainerRef;
  private envInjector = inject(EnvironmentInjector);
  private componentRef?: ReturnType<ViewContainerRef['createComponent']>;

  loadAlert(): void {
    this.host.clear();
    this.componentRef = this.host.createComponent(AlertBannerComponent, {
      environmentInjector: this.envInjector,
    });
    this.componentRef.instance.message = 'Dinamik yuklandi!';
  }

  clear(): void {
    this.host.clear();
    this.componentRef?.destroy();
  }
}

Imtihonda

  • ViewContainerRef va ComponentFactoryResolver (eski API) farqi?
  • Dynamic component'ga @Input qanday beriladi?
  • Memory leak oldini olish uchun nima qilish kerak?

Yodlash uchun

createComponent → instance sozlash → destroy/clear; EnvironmentInjector standalone uchun kerak.

### Ivy compiler — AOT vs JIT
Senior

Nima bu?

Ivy — Angular 9+ default kompilyator. Template va CSS'ni build vaqtida optimallashtiradi, tree-shaking yaxshilaydi. AOT (Ahead-of-Time) — production build'da compile; JIT (Just-in-Time) — dev'da brauzerda compile (hozir kam ishlatiladi). View Engine Ivy dan oldingi engine edi.

Kod misoli

// angular.json — production AOT (default)
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": true,
              "aot": true,
              "buildOptimizer": true
            },
            "development": {
              "optimization": false,
              "aot": false
            }
          }
        }
      }
    }
  }
}

// Ivy compile natijasi (soddalashtirilgan)
// Template: {{ title }} → ɵɵtextInterpolate(ctx.title)

@Component({
  selector: 'app-ivy-demo',
  standalone: true,
  template: `<h1>{{ title }}</h1>`,
})
export class IvyDemoComponent {
  title = 'Ivy AOT compiled';
}

Imtihonda

  • AOT afzalliklari (xavfsizlik, tezlik, bundle)?
  • Ivy nima uchun View Engine'dan yaxshiroq?
  • enableIvy: true hali kerakmi?

Yodlash uchun

Production = AOT + Ivy; JIT faqat dev; Ivy — default, tree-shakeable.

### Angular elements — custom element
Senior

Nima bu?

@angular/elements Angular komponentini brauzer Custom Element (Web Component) ga aylantiradi. Angular'siz loyihada (React, vanilla HTML) Angular komponentini <my-widget> kabi ishlatish mumkin. createCustomElement() va customElements.define() bilan ro'yxatdan o'tkaziladi.

Kod misoli

import { Component, Input, inject, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'app-rating-widget',
  standalone: true,
  template: `
    <div class="stars">
      @for (s of [1,2,3,4,5]; track s) {
        <span [class.active]="s <= rating">{{ s <= rating ? '★' : '☆' }}</span>
      }
    </div>
  `,
  styles: [`.stars .active { color: gold; }`],
})
export class RatingWidgetComponent {
  @Input() rating = 3;
}

// bootstrap yoki alohida entry:
export function registerRatingElement(injector: Injector): void {
  const el = createCustomElement(RatingWidgetComponent, { injector });
  customElements.define('rating-widget', el);
}

<!-- Angular'siz sahifada -->
<rating-widget rating="4"></rating-widget>
<script src="rating-widget.js"></script>

Imtihonda

  • Custom Element va oddiy Angular komponent farqi?
  • Shadow DOM ishlatiladimi?
  • Change detection micro-frontend'da qanday ishlaydi?

Yodlash uchun

createCustomElement + define; Angular'siz integratsiya; Injector muhim.