Angular 16

Daraja:

Angular 16 — Signals preview, required input, takeUntilDestroyed va SSR hydration yaxshilanishi. Reaktiv state boshqaruvi va subscription tozalash soddalashdi.

Signals — signal(), computed(), effect() (preview)

Middle

Nima bu?

Signals (Angular 16 preview, 17 stable) — reaktiv primitive: signal() writable state, computed() derived state, effect() side effect. Zone.js'siz granular change detection yo'li. BehaviorSubject o'rniga sodda state, template'da to'g'ridan-to'g'ri count() chaqirish.

Kod misoli

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ doubleCount() }}</p>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    effect(() => {
      console.log('Count o\'zgardi:', this.count());
    });
  }

  increment() {
    this.count.update((v) => v + 1);
  }
}

Imtihonda

  • signal va BehaviorSubject farqi?
  • computed() qachon qayta hisoblanadi?

Yodlash uchun

signal() = qiymat; computed() = derived; effect() = side effect. Template: count().

Angular 16 da developer preview; production uchun 17+ stable deb belgilangan.

@Input({ required: true })

Middle

Nima bu?

Angular 16 required input — @Input({ required: true }) bilan parent component majburiy prop uzatishi compile vaqtida tekshiriladi. ! (definite assignment) o'rniga aniq API kontrakt. strictTemplates bilan birga component interfeysi xavfsizroq.

Kod misoli

@Component({
  selector: 'app-product-card',
  standalone: true,
  template: `
    <h3>{{ product.name }}</h3>
    <p>{{ product.price | currency }}</p>
  `,
})
export class ProductCardComponent {
  @Input({ required: true }) product!: Product;
  @Input() showBadge = false; // optional, default bor
}

// Parent — product uzatmasa compile xato
@Component({
  template: `
    <app-product-card [product]="item" />
    <!-- <app-product-card /> — XATO: required input 'product' missing -->
  `,
})
export class ProductListComponent {
  item: Product = { id: 1, name: 'Kitob', price: 50000 };
}

Imtihonda

  • required: true qachon ishlatiladi?
  • Angular 17 input.required() bilan farqi?

Yodlash uchun

@Input({ required: true }) = parent majburiy prop. Compile vaqtida xato.

takeUntilDestroyed() — DestroyRef

Middle

Nima bu?

takeUntilDestroyed() — Angular 16 da @angular/core/rxjs-interop dan. DestroyRef bilan component destroy'da avtomatik unsubscribe. ngOnDestroy + destroy$ Subject pattern o'rniga zamonaviy yechim.

Root service'da ehtiyot bo'ling: argumentsiz takeUntilDestroyed() joriy injection context'dagi DestroyRefni oladi. providedIn: 'root' service konstruktorida chaqirilsa, u ilova umri davomida yashaydigan root DestroyRefga bog'lanadi — subscription amalda hech qachon tozalanmaydi, chunki root injector ilova to'xtaguncha destroy bo'lmaydi. Component-scoped tozalash kerak bo'lsa, component'dan inject(DestroyRef) orqali olingan aniq referensni parametr sifatida uzatish kerak: takeUntilDestroyed(this.destroyRef).

Kod misoli

import { Component, DestroyRef, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Component({ /* ... */ })
export class TimerComponent {
  count = 0;

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe((n) => (this.count = n));
  }
}

// Service emas — faqat component/directive lifecycle
@Component({ /* ... */ })
export class DataComponent {
  private destroyRef = inject(DestroyRef);

  load() {
    this.api.getData()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((data) => (this.data = data));
  }
}

Imtihonda

  • takeUntilDestroyed va takeUntil(destroy$) farqi?
  • Root service'da argumentsiz takeUntilDestroyed() nega deyarli hech narsa qilmaydi?

Yodlash uchun

takeUntilDestroyed = avtomatik lifecycle cleanup. Component/directive uchun.

SSR hydration yaxshilandi

Senior

Nima bu?

Angular 16 SSR hydration yaxshilandi — server render qilingan HTML client'da "tiriltiriladi" (event listener, component state). Ilgari to'liq re-render bo'lardi (FOUC, layout shift). 16 da incremental hydration, DOM mismatch kamaydi, provideClientHydration() API soddalashtirildi. SEO va First Contentful Paint uchun muhim.

Kod misoli

// main.server.ts / app.config.server.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideClientHydration(), // Angular 16+
  ],
};

// SSR xavfsiz kod — document/window to'g'ridan-to'g'ri emas
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, inject } from '@angular/core';

@Component({ /* ... */ })
export class ChartComponent {
  private platformId = inject(PLATFORM_ID);

  ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.initChart(); // faqat browser'da
    }
  }
}

Imtihonda

  • Hydration nima?
  • SSR'da DOM manipulation xavfi qanday oldini olinadi?

Yodlash uchun

Hydration = server HTML + client interaktivlik. isPlatformBrowser = SSR-safe.