Angular pipelar

pipelar | (masalan, sana, valyuta, foiz) shablonlardagi qiymatlarni formatlash.

pipelar uchun zaruriy mahsulotlar

Nima: pipelar | yordamida shablonlardagi qiymatlarni formatlash (masalan, sana, valyuta, foiz).
Asinxron: async pipeline Observables-ga obuna bo‘ladi va avtomatik ravishda obunani bekor qilib, eng so‘nggi qiymatni beradi.
Faqat taqdimot uchun: pipelar asosiy ma’lumotlarni emas, balki qiymatning qanday ko‘rsatilishini o‘zgartiradi.
Sukut bo‘yicha sof: Sof pipelar kirish havolalari o‘zgarganda ishlaydi; massivlar/obyektlarning joyida mutatsiyasidan qoching.

{{ title | uppercase }}
{{ price | currency:'USD' }}
{{ today | date:'short' }}

Eslatmalar:

Aloqador: Qiymatlarni ko‘rsatish uchun Shablonlarga qarang, interpolyatsiya va kiritish uchun Ma’lumotlarni bog‘lash va ___X TAG bilan ma’lumotlar oqimi uchun HTTP ga qarang.
Mustaqil komponentlarda o‘rnatilgan pipelar uchun CommonModule importi.
Maxsus pipelar uchun @Pipe({ standalone: true }) dan foydalaning va pipeni imports komponentiga qo‘shing.

Asosiy pipelar

O‘rnatilgan pipelar yordamida stringlar, raqamlar, sanalar va boshqalarni formatlang.
Many accept options (e.g., currency:'USD', date:'short').
Komponentlarda/xizmatlarda biznes mantiqini saqlang; pipelar taqdimot uchun mo‘ljallangan.

{{ title | uppercase }}
{{ price | currency:'USD' }}
{{ today | date:'mediumDate' }}
{{ percent | percent:'1.0-2' }}

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>Pipes</h3>
    <p>{{ title | uppercase }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ today | date:'mediumDate' }}</p>
    <p>{{ percent | percent:'1.0-2' }}</p>
  `
})
export class App {
  title = 'Angular';
  price = 1234.5;
  today = new Date();
  percent = 0.3495;
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

uppercase / currency / date / percent : O‘rnatilgan pipelar stringlar, raqamlar va sanalarni formatlaydi.
Options: Many pipes accept parameters (e.g., currency:'USD', date:'mediumDate', percent:'1.0-2').
Sukut bo‘yicha sof: Sof pipelar kirish ma’lumotnomasi o‘zgarganda qayta hisoblab chiqadi; joyidagi mutatsiyadan saqlaning.

Eslatmalar:

Unumdorlik: pipe’larda og‘ir hisob-kitoblardan qoching; komponentlar/xizmatlarda oldindan hisoblab qo‘yishdan foydalaning.
Sof pipelar va mutatsiyalar: Sof pipelar kirish ma’lumotnomasi o‘zgarganda ishlaydi. Agar siz massivlarni/obyektlarni joyida o‘zgartirsangiz, pipeline qayta ishga tushmaydi va uning o‘rniga yangi havola yaratmaydi.

Asenkron pipeline

Kuzatiladigandan so‘nggi qiymatni ko‘rsating.
Ko‘rinish o‘chirilganda avtomatik ravishda obunani bekor qiladi.
Bir marta obuna bo‘lish va qayta foydalanish uchun value$ | async as value dan foydalaning.

<ng-container *ngIf="users$ | async as users; else loading">
  <li *ngFor="let u of users">{{ u.name }}</li>
</ng-container>
<ng-template #loading>Loading...</ng-template>

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval, of } from 'rxjs';
import { map, delay } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Async Pipe</h3>
    <p>Time: {{ time$ | async | date:'mediumTime' }}</p>

    <h4>Users (delayed)</h4>
    <ng-container *ngIf="users$ | async as users; else loading">
      <ul>
        <li *ngFor="let u of users">{{ u.name }}</li>
      </ul>
    </ng-container>
    <ng-template #loading>Loading...</ng-template>
  `
})
export class App {
  time$ = interval(1000).pipe(map(() => new Date()));
  users$ = of([{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }]).pipe(delay(1200));
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

time$ | async : Shablonga obuna bo‘ladi va oxirgi vaqt qiymatini ko‘rsatadi.
*ngIf="users$ | async as users; else loading" : Yagona obuna yaratadi, users ga tayinlaydi va yuklash vaqtida zaxira shablonni ko‘rsatadi.
Avtomatik ravishda obunani bekor qilish: async trubkasi ko‘rinish buzilganda tozalanadi.

Eslatmalar:

Yagona obuna: | async ni bir xil shablon hududida bir xil Observableda bir necha marta ishlatishdan saqlaning; | async as value dan bir marta foydalaning va value dan qayta foydalaning.
To‘ldiruvchilarni yuklash: qulay yuklanish holati uchun *ngIf va else shablonlari bilan birlashtiring.
Ro‘yxatlar: Oqimli massivlarni takrorlashda barqaror identifikatsiya va yaxshi ishlash uchun trackBy ni *ngFor ga qo‘shing.

Maxsus pipeline

@Pipe yordamida kichik, qayta foydalanish mumkin formatlash vositalarini yarating.
standalone deb belgilang va komponentlarga import qiling.
Standart holatda sof (pure); zarurat bo‘lmasa, sof bo‘lmagan (impure) pipe’lardan qoching.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'titlecase2', standalone: true })
export class TitleCase2Pipe implements PipeTransform {
  transform(v: string): string { /* ...format... */ return v; }
}

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Pipe, PipeTransform } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Pipe({ name: 'titlecase2', standalone: true })
export class TitleCase2Pipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value
      .split(/\s+/)
      .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
      .join(' ');
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule, TitleCase2Pipe],
  template: `
    <h3>Custom Pipe</h3>
    <label>
      Text: <input [(ngModel)]="text" placeholder="type here" />
    </label>
    <p>Original: {{ text }}</p>
    <p>TitleCase2: {{ text | titlecase2 }}</p>
  `
})
export class App {
  text = 'hello angular pipes';
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

@Pipe({ standalone: true }): Declares a reusable, importable pipe.
transform(value: string) : Formatlash mantiqini amalga oshiradi va stringni qaytaradi.
Foydalanish: Shablonda {{ text | titlecase2 }} bilan amal qiling.

Eslatmalar:

Sof bo‘lmagan (impure) pipe’lar: ular har bir change detection siklida ishga tushadi va unumdorlikka zarar yetkazishi mumkin. Sof (pure) pipe’lardan foydalaning; faqat juda zarur bo‘lgandagina impure deb belgilang.
Nojo‘ya ta’sirlarsiz: pipe’larni deterministik va nojo‘ya ta’sirlardan xoli saqlang (log yozish, xizmatlarni chaqirish bo‘lmasin).
Nol xavfsizlik: Shablon xatolarining oldini olish uchun null / undefined kiritishlarni ehtiyotkorlik bilan ishlating.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish