Strukturaviy direktivalar

Strukturaviy direktivalar uchun * stenografiyasidan foydalaning; Angular uni <ng-template> ga kengaytiradi.

Strukturaviy direktivalar mikrosintaksisi nima?

• * qisqartma bo‘lib, asosiy <ng-template> ga kengaytiriladi.
• Provides context variables (e.g., index as i, else).
• Angular bu sintaksis yordamida *ngIf, *ngFor va hokazolarni qayta yozadi.

Mikrosintaksisdan qachon foydalanish kerak

• Holat asosida DOMni qo‘shish/o‘chirish uchun tizimli ko‘rsatmalar bilan.
• Ro‘yxatlarni *ngFor bilan qisqacha takrorlash uchun.
• O‘qish uchun stenografiyadan foydalaning; kerak bo‘lganda aniq <ng-template> dan foydalaning.

Misol

Strukturaviy ko‘rsatmalarni kengaytirish va kontekst o‘zgaruvchilarini ochish uchun * mikro-sintaksisidan foydalaning:

<div *ngIf="ok; else other">OK</div>
<ng-template #other>Not OK</ng-template>
<li *ngFor="let item of items; index as i">{{ i }} {{ item }}</li>

Kod tushuntirildi

• *ngIf="ok; else other": ok haqiqat bo‘lganda blokni ko‘rsatadi; aks holda #other shablonini ko‘rsatadi.
• *ngFor="...; index as i" : items ustidan aylanib, nolga asoslangan indeksni i sifatida ko‘rsatadi.
• * qisqartmasi: angular *... ni asosiy <ng-template> ga qayta yozadi.

Misol

Shartli ko‘rsatish yoki takrorlash uchun *ngIf va *ngFor bilan mikro-sintaksisdan foydalaning:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)="ok = !ok">Toggle</button>
    <div *ngIf="ok; else other">OK</div>
    <ng-template #other>Not OK</ng-template>
    <ul>
      <li *ngFor="let item of items; index as i">{{ i }} - {{ item }}</li>
    </ul>
  `
})
export class App {
  ok = true;
  items = ['A','B','C'];
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• * qisqacha: *ngIf va *ngFor - bu Angular asosiy <ng-template> ga qayta yozadigan qisqartma.
• *ngIf="ok; else other": ok rost bo‘lganda blokni ko‘rsatadi; aks holda #other tomonidan havola qilingan shablonni ko‘rsatadi.
• *ngFor="let item of items; index as i": Massiv elementlarini takrorlaydi; element joriy element va i nolga asoslangan indeksdir.