Built-in Pipes

### async — Observable/Promise template'da
Junior

Nima bu?

async pipe Observable yoki Promise'dan kelgan qiymatni template'da avtomatik subscribe qiladi va ko'rsatadi. Subscribe/unsubscribe avtomatik — xotira sızintisini oldini oladi. OnPush strategiyasi bilan ajoyib ishlaydi, chunki yangi qiymat kelganda change detection trigger bo'ladi.

Kod misoli

import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Observable, interval, map } from 'rxjs';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-async-demo',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if (users$ | async; as users) {
      <ul>
        @for (user of users; track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    } @else {
      <p>Yuklanmoqda...</p>
    }
    <p>Vaqt: {{ clock$ | async | date:'mediumTime' }}</p>
  `,
})
export class AsyncDemoComponent {
  private http = inject(HttpClient);

  users$: Observable<User[]> = this.http.get<User[]>('/api/users');
  clock$ = interval(1000).pipe(map(() => new Date()));
}

Imtihonda

  • async pipe nima uchun subscribe/unsubscribe qiladi?
  • Observable null bo'lsa template'da nima ko'rsatiladi?
  • Bir Observable'ni bir nechta async pipe bilan ishlatish xatosi?

Yodlash uchun

async pipe = avtomatik subscribe; Observable/Promise; OnPush do'sti.

### date — formatlar (dd/MM/yyyy, shortDate, fullDate)
Junior

Nima bu?

date pipe Date, timestamp yoki ISO string'ni locale va timezone bo'yicha formatlaydi. Predefined formatlar: short, medium, long, full, shortDate, mediumDate va custom pattern: dd/MM/yyyy HH:mm.

Kod misoli

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-date-demo',
  standalone: true,
  imports: [DatePipe],
  template: `
    <p>Bugun: {{ today | date:'dd/MM/yyyy' }}</p>
    <p>Short: {{ today | date:'short' }}</p>
    <p>Full date: {{ today | date:'fullDate' }}</p>
    <p>UTC: {{ today | date:'medium':'UTC' }}</p>
    <p>O'zbek: {{ today | date:'d MMMM y, HH:mm':'+0500':'uz' }}</p>
  `,
})
export class DateDemoComponent {
  today = new Date('2026-08-06T12:30:00+05:00');
}

Imtihonda

  • date pipe qabul qiladigan input turlari?
  • Timezone parametri qanday ishlaydi?
  • DatePipe locale qanday sozlanadi?

Yodlash uchun

date pipe: value | date:'format':'timezone':'locale'.

### currency — valyuta formatlash
Junior

Nima bu?

currency pipe raqamni valyuta formatida ko'rsatadi: valyuta kodi (USD, EUR, UZS), display (symbol, code, symbol-narrow), raqam formati. E-commerce va moliyaviy ilovalarda standart.

Kod misoli

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-price-card',
  standalone: true,
  imports: [CurrencyPipe],
  template: `
    <p>Narx: {{ price | currency:'UZS':'symbol-narrow':'1.0-0' }}</p>
    <p>USD: {{ price / 12500 | currency:'USD':'symbol':'1.2-2' }}</p>
    <p>EUR (code): {{ 99.5 | currency:'EUR':'code' }}</p>
    <p>Chegirma: {{ discount | currency:'UZS' }}</p>
    <p>Jami: {{ price - discount | currency:'UZS':'symbol-narrow':'1.0-0' }}</p>
  `,
})
export class PriceCardComponent {
  price = 1_250_000;
  discount = 150_000;
}

Imtihonda

  • '1.2-2' format string nima anglatadi?
  • UZS kabi standart bo'lmagan valyuta qanday ko'rinadi?
  • CurrencyPipe locale'dan qanday foydalanadi?

Yodlash uchun

currency: value | currency:'CODE':'display':'digits'.

### number (decimal), percent
Junior

Nima bu?

number (alias decimal) raqamni ming ajratgich va o'nlik kasr bilan formatlaydi. percent raqamni foizga aylantiradi (0.25 → 25%). Ikkalasi ham locale'ga bog'liq.

Kod misoli

import { Component } from '@angular/core';
import { DecimalPipe, PercentPipe } from '@angular/common';

@Component({
  selector: 'app-stats',
  standalone: true,
  imports: [DecimalPipe, PercentPipe],
  template: `
    <p>Aholi: {{ population | number:'1.0-0' }}</p>
    <p>PI: {{ pi | number:'1.4-4' }}</p>
    <p>O'sish: {{ growthRate | percent:'1.1-1' }}</p>
    <p>Tugallangan: {{ completion | percent }}</p>
  `,
})
export class StatsComponent {
  population = 37_543_210;
  pi = 3.14159265;
  growthRate = 0.0347;
  completion = 0.856;
}

Imtihonda

  • number:'1.2-2' min/max fraction digits?
  • percent 0.5 ni qanday ko'rsatadi?
  • String raqam pipe'ga uzatilsa nima bo'ladi?

Yodlash uchun

number = decimal format; percent = foiz; 'minInt.minFrac-maxFrac'.

### json — ob'ekt debug
Junior

Nima bu?

json pipe JavaScript ob'ektini JSON string'ga aylantiradi — debug va development uchun foydali. Production'da katta ob'ektlar uchun ishlatilmaydi; xavfsizlik nuqtai nazaridan sensitive ma'lumot chiqarmang.

Kod misoli

import { Component } from '@angular/core';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-debug-panel',
  standalone: true,
  imports: [JsonPipe],
  template: `
    <pre>{{ user | json }}</pre>
    <pre>{{ config | json }}</pre>
    <details>
      <summary>API javobi</summary>
      <pre>{{ apiResponse | json }}</pre>
    </details>
  `,
})
export class DebugPanelComponent {
  user = { id: 1, name: 'Kamola', roles: ['admin', 'editor'] };
  config = { theme: 'dark', pageSize: 20 };
  apiResponse = { status: 200, data: [{ id: 1 }, { id: 2 }] };
}

Imtihonda

  • json pipe production'da ishlatish xavflimi?
  • Circular reference bo'lsa nima bo'ladi?
  • JSON.stringify dan farqi?

Yodlash uchun

json pipe = debug uchun; production'da ehtiyotkorlik bilan.

### slice — array va string qirqish
Junior

Nima bu?

slice pipe massiv yoki string'dan qism kesib oladi. start va ixtiyoriy end indekslari (Array.slice ga o'xshash). Pagination preview, matn qisqartirish uchun qulay — asl ma'lumot o'zgarmaydi.

Kod misoli

import { Component } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Component({
  selector: 'app-slice-demo',
  standalone: true,
  imports: [SlicePipe],
  template: `
    <p>{{ longText | slice:0:80 }}...</p>
    <ul>
      @for (item of items | slice:0:3; track item) {
        <li>{{ item }}</li>
      }
    </ul>
    <p>Jami {{ items.length }} ta, ko'rsatilmoqda: 3 ta</p>
  `,
})
export class SliceDemoComponent {
  longText = 'Angular pipe\'lar template\'da ma\'lumotni formatlash uchun ishlatiladi va kod takrorlanishini kamaytiradi.';
  items = ['Birinchi', 'Ikkinchi', 'Uchinchi', 'To\'rtinchi', 'Beshinchi'];
}

Imtihonda

  • slice pipe asl array'ni o'zgartiradimi?
  • Manfiy indeks ishlaydimi?
  • Katta ro'yxat uchun slice vs trackBy?

Yodlash uchun

slice = value | slice:start:end; immutable, asl data saqlanadi.

### uppercase, lowercase, titlecase
Junior

Nima bu?

Matn transform pipe'lari: uppercase — barcha harflarni katta; lowercase — kichik; titlecase — har so'z bosh harfi katta. Locale-aware emas, oddiy transform — murakkab locale uchun Intl API yoki custom pipe kerak.

Kod misoli

import { Component } from '@angular/core';
import { UpperCasePipe, LowerCasePipe, TitleCasePipe } from '@angular/common';

@Component({
  selector: 'app-text-format',
  standalone: true,
  imports: [UpperCasePipe, LowerCasePipe, TitleCasePipe],
  template: `
    <p>Katta: {{ title | uppercase }}</p>
    <p>Kichik: {{ title | lowercase }}</p>
    <p>Title: {{ title | titlecase }}</p>
    <p>Email: {{ email | lowercase }}</p>
    <p>Ism: {{ fullName | titlecase }}</p>
  `,
})
export class TextFormatComponent {
  title = 'angular intervyu tayyorgarligi';
  email = 'User@Example.COM';
  fullName = 'islom karimov';
}

Imtihonda

  • titlecase qaysi so'zlarni o'zgartirmaydi?
  • Pipe zanjiri: {{ x | lowercase | titlecase }}?
  • i18n bilan birga ishlatish?

Yodlash uchun

uppercase / lowercase / titlecase — oddiy matn transform.

### keyvalue — ob'ekt iteratsiya
Middle

Nima bu?

keyvalue pipe ob'ekt yoki Map'ni key-value juftliklar massiviga aylantiradi — template'da @for yoki *ngFor bilan iteratsiya qilish uchun. Default tartib key bo'yicha; custom compare funksiya berish mumkin.

Kod misoli

import { Component } from '@angular/core';
import { KeyValuePipe, KeyValue } from '@angular/common';

@Component({
  selector: 'app-settings',
  standalone: true,
  imports: [KeyValuePipe],
  template: `
    <dl>
      @for (entry of settings | keyvalue: preserveOrder; track entry.key) {
        <dt>{{ entry.key | titlecase }}</dt>
        <dd>{{ entry.value }}</dd>
      }
    </dl>
  `,
})
export class SettingsComponent {
  settings: Record<string, string | number | boolean> = {
    theme: 'dark',
    language: 'uz',
    notifications: true,
    pageSize: 25,
  };

  preserveOrder = (
    a: KeyValue<string, unknown>,
    b: KeyValue<string, unknown>
  ): number => 0; // insertion order saqlash
}

Imtihonda

  • Ob'ekt key tartibi nima uchun "random" ko'rinishi mumkin?
  • Map vs oddiy ob'ekt keyvalue bilan?
  • keyvalue vs Object.keys() template'da?

Yodlash uchun

keyvalue = ob'ekt/Map → [{key, value}]; compare fn tartib uchun.