Interpolyatsiya

component qiymatlarini {{ ... }} bilan ko‘rsatish.

Interpolatsiya nima?

• DOM-dagi component qiymatlarini juft jingalak qavslar bilan ko‘rsatadi.
• Uni quyidagicha o‘qing: "bu qiymatni oling va uni matn sifatida chop eting".
• Faqat bir tomonlama: ma’lumotlar → ko‘rish.

Interpolatsiyadan qachon foydalanish kerak

• Matn qiymatlari va oddiy, tezkor ifodalarni ko‘rsatish (nojo‘ya ta’sirlar yo‘q).
• Dinamik atributlar uchun xususiyat/atribut bog‘lashdan foydalaning.
• HTML kontenti uchun [innerHTML] ni diqqat bilan ko‘rib chiqing.

{{ expression }}

{{ expression }} : Komponentga nisbatan baholaydi va natijani matn sifatida kiritadi (HTML-escaped).

Misol

DOMda component qiymatlarini ko‘rsatish uchun interpolyatsiyadan foydalaning:

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>{{ title }}</h3>
    <p>Hello {{ name }}!</p>
    <p>2 + 3 = {{ 2 + 3 }}</p>
    <p>Upper: {{ name.toUpperCase() }}</p>
  `
})
export class App {
  title = 'Templates & Interpolation';
  name = 'Angular';
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• Interpolyatsiya {{ expression }} : Angular komponentga nisbatan ifodani baholaydi va natijani matn sifatida kiritadi (HTML-dan qochish).
• Xususiyat qiymatlari: {{ title }} va {{ name }} component maydonlarini o‘qish.
• Ifodalar: {{ 2 + 3 }} arifmetikani baholaydi; {{ name.toUpperCase() }} string qiymatidagi usulni chaqiradi.
• Matn va HTML: Interpolatsiya HTMLdan qochadi. HTMLni ko‘rsatish uchun [innerHTML] bilan ehtiyotkorlik bilan bog‘lang.