Template

### Template reference variable (#ref)

Junior

Nima bu?

Template reference variable (#name yoki ref-name) template ichidagi DOM element, komponent yoki directive'ga havola beradi. U orqali input qiymatini o'qish, form validatsiyasini tekshirish yoki child komponent metodini chaqirish mumkin.

Kod misoli

<input #searchInput type="text" placeholder="Qidirish..." />
<button type="button" (click)="search(searchInput.value)">Qidir</button>
<p>Qiymat: {{ searchInput.value }}</p>

<form #loginForm="ngForm">
  <input name="email" ngModel required #emailCtrl="ngModel" />
  @if (emailCtrl.invalid && emailCtrl.touched) {
    <span class="error">Email majburiy</span>
  }
  <button type="submit" [disabled]="loginForm.invalid">Kirish</button>
</form>

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

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './search.component.html',
})
export class SearchComponent {
  search(query: string): void {
    console.log('Qidiruv:', query.trim());
  }
}

Imtihonda

#ref va #ref="ngModel" farqi nima?
Template ref komponent klassida qanday ishlatiladi (@ViewChild)?
Bir elementda bir nechta ref bo'ladimi?

Yodlash uchun

#ref — template ichida elementga nom; exportAs bilan directive ref beriladi.

### Safe navigation (?.) va Non-null assertion (!)

JuniorMiddle

Nima bu?

Safe navigation (?.) — null yoki undefined bo'lsa xato o'rniga undefined qaytaradi. Non-null assertion (!) — TypeScript/template'da "bu qiymat null emas" deb aytish; runtime'da xavfli bo'lishi mumkin. Angular template'da ikkalasi ham qo'llab-quvvatlanadi.

Kod misoli

interface User {
  profile?: { address?: { city?: string } };
}

@Component({
  selector: 'app-user-info',
  standalone: true,
  template: `
    <!-- Safe navigation -->
    <p>Shahar: {{ user?.profile?.address?.city ?? 'Noma\'lum' }}</p>

    <!-- Non-null assertion (faqat ishonch bo'lsa) -->
    @if (user) {
      <p>Email: {{ user!.profile!.email }}</p>
    }

    <!-- Template'da $any() cast -->
    <p>{{ $any(user).legacyField }}</p>
  `,
})
export class UserInfoComponent {
  user: User | null = { profile: { address: { city: 'Toshkent' } } };
}

Imtihonda

user?.name va user && user.name farqi?
! operatori qachon ishlatish xavfli?
Strict null checks bilan template xatolari qanday aniqlanadi?

Yodlash uchun

?. — xavfsiz zanjir; ! — "null emas" deb taxmin; imkon qadar ?. va @if afzal.

### ng-template, ng-container, ng-content

Middle

Nima bu?

ng-template — DOM'da render bo'lmaydigan shablon (structural directive uchun); ng-container — qo'shimcha DOM element qo'shmasdan guruhlash; ng-content — content projection (parent template'dan child slot'ga kontent uzatish).

Kod misoli

@Component({
  selector: 'app-card',
  standalone: true,
  template: `
    <article class="card">
      <header><ng-content select="[card-header]" /></header>
      <div class="body"><ng-content /></div>
      <footer><ng-content select="[card-footer]" /></footer>
    </article>
  `,
})
export class CardComponent {}

<app-card>
  <h2 card-header>Sarlavha</h2>
  <p>Asosiy kontent</p>
  <button card-footer type="button">Saqlash</button>
</app-card>

<!-- ng-container: DOM'siz wrapper -->
<ng-container *ngIf="isLoggedIn; else guestBlock">
  <app-dashboard />
</ng-container>
<ng-template #guestBlock>
  <app-login />
</ng-template>

Imtihonda

ng-template va oddiy div farqi?
ng-container nima uchun kerak (*ngIf bilan)?
ng-content va @Input template farqi?

Yodlash uchun

template — shablon; container — DOM'siz; content — projection slot.

### ng-content select — named slots

Middle

Nima bu?

ng-content select CSS selector bilan aniq slot belgilaydi. Parent bir nechta turli kontent qismlarini child komponentning turli joylariga yuboradi — Vue/React slot pattern'iga o'xshash.

Kod misoli

@Component({
  selector: 'app-page-layout',
  standalone: true,
  template: `
    <aside class="sidebar">
      <ng-content select="app-sidebar-menu" />
    </aside>
    <main>
      <ng-content select="[page-title]" />
      <ng-content />
    </main>
    <ng-content select=".floating-action" />
  `,
  styles: [`main { flex: 1; padding: 1rem; }`],
})
export class PageLayoutComponent {}

<app-page-layout>
  <app-sidebar-menu />
  <h1 page-title>Boshqaruv paneli</h1>
  <section>Asosiy ma'lumotlar</section>
  <button class="floating-action" type="button">+ Yangi</button>
</app-page-layout>

Imtihonda

select="*" va select'siz default slot farqi?
Bir element bir nechta slot'ga tushadimi?
Named slot vs multi-projection best practice?

Yodlash uchun

select — CSS selector; select'siz qism — default slot.

### @ViewChild, @ContentChild, @ViewChildren

Middle

Nima bu?

@ViewChild — komponentning o'z template'idagi element/child; @ContentChild — projected content ichidagi element; @ViewChildren — bir nechta child'lar (QueryList). static: true — ngOnInit'dan oldin; default — ngAfterViewInit'da mavjud.

Kod misoli

import {
  Component,
  ViewChild,
  ContentChild,
  ViewChildren,
  QueryList,
  ElementRef,
  AfterViewInit,
} from '@angular/core';
import { FormsModule, NgModel } from '@angular/forms';

@Component({
  selector: 'app-form-wrapper',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input #focusTarget type="text" [(ngModel)]="value" />
    <ng-content />
  `,
})
export class FormWrapperComponent implements AfterViewInit {
  value = '';

  @ViewChild('focusTarget') focusInput!: ElementRef<HTMLInputElement>;
  @ViewChild(NgModel) modelRef!: NgModel;
  @ContentChild('projectedBtn') projectedBtn?: ElementRef;
  @ViewChildren('item') items!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    this.focusInput.nativeElement.focus();
    console.log('Items count:', this.items.length);
  }
}

Imtihonda

ViewChild vs ContentChild — qayerdan qidiradi?
{ static: true } qachon kerak?
Signal-based viewChild() (v17+) farqi?

Yodlash uchun

View = o'z template; Content = projected; ko'pincha AfterViewInit'da ishlat.