Angular direktivalari

Direktivlar mavjud elementlar va komponentlarga xatti-harakatlarni qo‘shadi.

Direktiv asoslar

@Directive va selektor yordamida elementlarga xatti-harakatlar qo‘shing.
Structural directives (*ngIf, *ngFor) add/remove DOM.
Atribut direktivalari ( [ngClass] , moslashtirilgan [w3X] ) tugunlarni yaratmasdan/o‘chirmasdan ko‘rinishni/xulq-atvorni o‘zgartiradi.
Yulduzcha sintaksisi ( * ) <ng-template>gacha kengayadigan shakardir.
Direktiv kirishlarni @Input() bilan oching; [alias] orqali ulash uchun @Input('alias') bilan taxallus.

*ngIf="condition"
*ngFor="let item of items"
@Directive({ selector: '[w3Highlight]' })
<div w3Highlight></div>

Eslatmalar:

Aloqador: Shablonlar, Ma’lumotlarni bog‘lash, Shartli ko‘rsatish va Ro‘yxatlarga qarang.

Asosiy direktivalar

*ngIf shart asosida tarkibni ko‘rsatadi/yashiradi.
*ngFor har bir massiv elementi uchun blokni takrorlaydi.
Ro‘yxatni qo‘shish/o‘chirish uchun bayroqchani almashtiring; *ngFor bilan elementlarni ko‘rsatish.

<p *ngIf="items.length > 0">We have {{ items.length }} items</p>
<li *ngFor="let item of items">{{ item }}</li>

Misol

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: `
    <h3>Directives</h3>
    <p *ngIf="items.length > 0">We have {{ items.length }} items</p>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="toggle()">Toggle Items</button>
  `
})
export class App {
  show = true;
  get items() { return this.show ? ['Angular', 'Components', 'Directives'] : []; }
  toggle() { this.show = !this.show; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

*ngIf: shart rost/noto‘g‘ri bo‘lsa, paragrafni DOMdan qo‘shadi/o‘chiradi.
*ngFor: items dagi har bir element uchun <li> blokini takrorlaydi.
Almashtirish: tugma show ni aylantiradi, bu hisoblangan items oluvchini o‘zgartiradi.

Eslatmalar:

CommonModule talab qilinadi: Mustaqil komponentlarda o‘rnatilgan direktivalardan foydalanganda CommonModule importi.
Yulduzcha sintaksisi shakar: *ngIf / *ngFor <ng-template> gacha kengaytiring; DOM tugunlari haqiqatan ham paydo bo‘ladi/yo‘qoladi.
Shablonlarda og‘ir ishlardan saqlaning: *ngFor da qimmat funksiyalarni chaqirmang. Buning o‘rniga komponentda hisoblang. Uzoq ro‘yxatlar uchun Ro‘yxatlar bo‘limiga qarang va trackBy dan foydalaning.
Har bir xost uchun bitta strukturaviy: Bitta elementga ikkita * ko‘rsatma qo‘ymang. Agar kerak bo‘lsa, birini <ng-container> ichiga o‘rang.

ngIf boshqa bilan

*ngIf ni else bilan zaxira shablonga yo‘naltiring.
Ikkala filialni ham aniq qilish uchun then/else sintaksisidan foydalaning.
Angular DOM bloklarini to‘liq qo‘shadi/o‘chiradi.

<ng-container *ngIf="loggedIn; else loggedOut"></ng-container>
<ng-template #loggedOut>...</ng-template>

<ng-container *ngIf="hasAccess; then accessTpl; else noAccessTpl"></ng-container>

Misol

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: `
    <h3>ngIf with else</h3>

    <button (click)="loggedIn = !loggedIn">
      {{ loggedIn ? 'Log out' : 'Log in' }}
    </button>

    <ng-container *ngIf="loggedIn; else loggedOut">
      <p>Welcome back, {{ user }}!</p>
    </ng-container>

    <ng-template #loggedOut>
      <p>Please log in to continue.</p>
    </ng-template>

    <hr>

    <h4>ngIf then/else syntax</h4>
    <button (click)="hasAccess = !hasAccess">
      Toggle Access ({{ hasAccess ? 'granted' : 'denied' }})
    </button>

    <ng-container *ngIf="hasAccess; then accessTpl; else noAccessTpl"></ng-container>

    <ng-template #accessTpl>
      <p style="color: seagreen">Access granted.</p>
    </ng-template>
    <ng-template #noAccessTpl>
      <p style="color: crimson">Access denied.</p>
    </ng-template>
  `
})
export class App {
  loggedIn = false;
  user = 'Angular User';
  hasAccess = true;
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

*ngIf ... else: shart rost bo‘lganda asosiy blokni ko‘rsatadi; aks holda #loggedOut tomonidan havola qilingan shablonni ko‘rsatadi.
then/else: then/else shakli ikkala filialni ham nomlangan shablonlar orqali aniq qiladi.
Holat: tugmalar ikkala filialni ko‘rsatish uchun loggedIn va hasAccess ni almashtiradi.

Eslatmalar:

Shablon ko‘rsatkichlari: else / then manziliga o‘tkazgan #ref <ng-template> ga ishora qiladi. Esda tutingki, ushbu kod ko‘rsatilmaguncha DOMda mavjud bo‘lmaydi.
Qo‘shimcha DOMdan saqlaning: Qo‘shimcha elementlar qo‘shmasdan tuzilmani guruhlash uchun <ng-container> dan foydalaning.

Atribut direktivasi (hover’da ajratib ko‘rsatish)

Mavjud elementda ishlaydi (hech qanday DOM yaratilmagan/yo‘q qilingan).
Tashqi ko‘rinishi yoki xatti-harakatini o‘zgartiradi (masalan, uslublar, classlar, atributlar qo‘shing).
Misol uchun, hoverda fonni o‘rnatish uchun @HostBinding va @HostListener dan foydalanadi.

@Directive({ selector: '[w3Highlight]' })
<div [w3Highlight]="'lightyellow'">Hover me</div>

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Directive, Input, HostBinding, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';

@Directive({
  selector: '[w3Highlight]',
  standalone: true
})
export class HighlightDirective {
  @Input('w3Highlight') highlightColor = 'lightyellow';
  @HostBinding('style.transition') transition = 'background-color 150ms ease-in-out';
  @HostBinding('style.backgroundColor') bg = '';

  @HostListener('mouseenter') onEnter() { this.bg = this.highlightColor; }
  @HostListener('mouseleave') onLeave() { this.bg = ''; }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, HighlightDirective],
  styles: [`
    .box { padding: 10px; border: 1px dashed #bbb; border-radius: 6px; }
  `],
  template: `
    <h3>Attribute Directive (highlight)</h3>
    <p>Hover the first box to see the effect:</p>
    <div class="box" [w3Highlight]="'lightyellow'">I get highlighted on hover</div>
    <div class="box" style="margin-top:8px">I do not</div>
  `
})
export class App {}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[w3Highlight]="'lightyellow'": Kiritilgan taxallus orqali direktivaga rangni o‘tkazadi.
@HostBinding: Elementning style.backgroundColor va direktiv maydonlardan o‘tish xususiyatlarini bog‘laydi.
@HostListener: Fon rangini o‘rnatish/tozalash uchun mouseenter/mouseleave-ga javob beradi.

Eslatmalar:

Selektor to‘qnashuvi: Boshqa kutubxonalar bilan to‘qnashuvning oldini olish uchun maxsus direktivalar uchun maxsus selektorlardan foydalaning (masalan, [w3Highlight]).
Ishlash: mezbon tinglovchilarni yengil tuting; @HostListener ishlov beruvchilarida og‘ir sinxron ishdan qoching.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish