Angular ma’lumot bog‘lash (data binding)

Ma’lumotlarni ulash komponentingiz holatini shablonga bog‘laydi.

Ma’lumotlarni ulash asoslari

component holati va shablon belgilarini ulang.
Matn uchun interpolyatsiya, DOM xususiyatlari uchun xususiyat bog‘lash va foydalanuvchi harakatlari uchun hodisa bog‘lashdan foydalaning.
Har ikkala holatni ko‘rsatadigan va yangilanadigan shakl kiritishlari uchun ikki tomonlama ulanishdan foydalaning.
Atributlarni [attr.*] bilan, classlarni/uslublarni [class.*]/[style.*] bilan bog‘lang.

{{ value }}
[prop]="value"
(event)="handler($event)"
[(ngModel)]="value"

Eslatmalar:

Aloqador: Interpolatsiya asoslari uchun Shablonlar, Foydalanuvchi kiritishini qayta ishlash uchun hodisalar va holat asosida tarkibni ko‘rsatish/yashirish uchun Shartli ko‘rsatish bo‘limlariga qarang.
ngModel bilan ikki tomonlama bog‘lash uchun FormsModule import qiling.

Asosiy ma’lumotlarni bog‘lash

Interpolation: {{ value }} prints text.
Property binding: [prop]="value" element/DOM xususiyatlarini o‘rnatadi.
Event binding: (event)="handler($event)" listens to user actions.

{{ name }}
[value]="name"
(input)="name = $any($event.target).value"

Misol

Ko‘rinishni component holati bilan sinxronlashtirish uchun qiymatlarni bog‘lang va hodisalarni boshqaring:

Misol

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Data Binding</h3>
    <input [value]="name" (input)="name = $any($event.target).value" placeholder="Type your name">
    <p>Hello {{ name }}!</p>
    <button (click)="count = count + 1">Clicked {{ count }} times</button>
    <button [disabled]="isDisabled">Can't click me</button>
  `
})
export class App {
  name = 'Angular';
  count = 0;
  isDisabled = true;
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

{{ name }}: Interpolatsiya joriy nom qiymatini matn sifatida chop etadi.
[value]="name" : Xususiyatni bog‘lash component holatidan kirish qiymatini o‘rnatadi.
(input)="name = $any($event.target).value": Voqeani bog‘lash joriy matndan nomni yangilaydi.
(click)="count = count + 1": Tugma bosilganda hisoblash maydonini oshiradi.
[disabled]="isDisabled": isDisabled rost bo‘lganda tugmani o‘chiradi.

Eslatmalar:

Keep expressions light: {{ ... }} da og‘ir ishlardan saqlaning; komponentda hisoblang.
No side effects: Mutatsiyaga o‘tkazmang yoki bog‘lanishlar ichidagi holatni o‘zgartiruvchi funksiyalarni chaqirmang.
Accessibility: Agar siz elementlarni o‘chirib qo‘ysangiz, foydalanuvchilarni chalkashtirib yubormasliklari uchun nima sababdan (masalan, yordamchi matn yoki ARIA) xabar bering.

Ikki tomonlama bog‘lash

Shabloni va komponentini sinxronlash: sahifa ↔ komponenti.
Shakl boshqaruvlari uchun [(ngModel)] dan foydalaning.
Conceptually equals [value] + (input).
FormsModule talab qilinadi.

<input [(ngModel)]="name">

Misol

Shakl qiymatlarini o‘qish va yangilash uchun [(ngModel)] dan foydalaning:

Misol

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h3>Two-way Binding (ngModel)</h3>

    <label>
      Name: <input [(ngModel)]="name" placeholder="Type your name" />
    </label>

    <label style="margin-left:12px">
      Favorite:
      <select [(ngModel)]="favorite">
        <option value="Angular">Angular</option>
        <option value="TypeScript">TypeScript</option>
        <option value="JavaScript">JavaScript</option>
      </select>
    </label>

    <p>Hello {{ name || 'friend' }}!</p>
    <p>Favorite: {{ favorite }}</p>
  `
})
export class App {
  name = 'Angular';
  favorite = 'Angular';
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[(ngModel)]="name": Ikki tomonlama kirishni nom maydoniga bog‘laydi (FormsModule talab qilinadi).
[(ngModel)]="favorite" : select va favorite maydonlarini sinxronlashtiradi.
Kontseptsiya: [value] plyus kaput ostidagi (input) simlariga ekvivalent.

Eslatma: FormsModule import qilinmaguncha [(ngModel)] ishlamaydi.

Atributlarni ulash

Ba’zi qiymatlar DOM xususiyatlari emas, balki atributlardir (masalan, colspan ).
Xususiyat mavjud bo‘lmaganda [attr.*] dan foydalaning.
classlar va uslublar uchun [class.*] va [style.*] dan foydalaning.

[attr.colspan]="span"
[class.active]="isActive"
[style.color]="color"

Misol

component holatidan atributlar, classlar va uslublarni bog‘lang:

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],
  styles: [`
    table { border-collapse: collapse; margin-top: 10px; }
    th, td { border:1px solid #ccc; padding:8px 10px; }
    .toolbar { display:flex; gap:10px; align-items:center; }
  `],
  template: `
    <h3>Attribute Binding (attr.*)</h3>

    <div class="toolbar">
      <label>Colspan: <input type="range" min="1" max="3" [value]="span" (input)="span = +$any($event.target).value"> {{ span }}</label>
      <label>Title: <input [value]="title" (input)="title = $any($event.target).value"></label>
    </div>

    <table [attr.title]="title">
      <thead>
        <tr><th>A</th><th>B</th><th>C</th></tr>
      </thead>
      <tbody>
        <tr>
          <td [attr.colspan]="span" style="background:#f9fbff">colspan={{ span }}</td>
          <td *ngIf="span < 2">B</td>
          <td *ngIf="span < 3">C</td>
        </tr>
      </tbody>
    </table>
  `
})
export class App {
  span = 1;
  title = 'Data table';
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[attr.title]="title": Sarlavha maydonidan jadvalning sarlavha atributini o‘rnatadi.
[attr.col span]="span": Hujayraning colspan atributini oraliqdagi raqamga bog‘laydi.
Diapazonni kiritish: span ni $event.target.value o‘qish orqali sozlaydi; shablon o‘zgarishlarni aks ettiradi.
Shartli katakchalar: *ngIf joriy span asosidagi qo‘shimcha ustunlarni ko‘rsatadi/yashiradi.

Eslatma: Mavjud bo‘lganda xususiyatni bog‘lashdan foydalaning; [attr.*] dan faqat hech qanday xususiyat mavjud bo‘lmaganda foydalaning (masalan, colspan).

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish