Rendering Dynamic Templates

Dinamik shablonlarni yaratish

Angular'ning shablon sintaksisidan foydalanib dinamik HTML yarating.

Hozirgacha o'rganganlaringiz ilovani HTML komponentlariga ajratishga imkon beradi, lekin bu sizni statik shablonlar (ya'ni, o'zgarmaydigan kontent) bilan cheklaydi. Keyingi qadam — Angular'ning shablon sintaksisidan foydalanib, dinamik HTML yaratishni o'rganishdir.

Dinamik ma'lumotlarni chiqarish

Agar siz shabloningizda dinamik kontentni ko'rsatishingiz kerak bo'lsa, Angular statik va dinamik kontentni ajratish uchun ikki qavsli sintaksisdan foydalanadi.

Mana TodoListItem komponentidan soddalashtirilgan misol:

@Component({
  selector: 'todo-list-item',
  template: ` <p>Sarlavha: {{ taskTitle }}</p> `,
})
export class TodoListItem {
  taskTitle = 'Read cup of coffee';
}

Angular komponentni render qilganda, natijada quyidagi HTML ko'rsatiladi:

<p>Sarlavha: Read cup of coffee</p>

Bu sintaksis HTML ichidagi dinamik ma'lumot xususiyati orasida interpolatsiyani e'lon qiladi. Natijada, ma'lumotlar o'zgarganda, Angular DOM'ni avtomatik ravishda yangilab, xususiyatning yangi qiymatini aks ettiradi.

Dinamik xususiyatlar

Agar siz HTML elementidagi standart DOM xususiyatlarining qiymatini dinamik ravishda o'zgartirishingiz kerak bo'lsa, xususiyat kvadrat qavslar ichiga olinadi va Angular'ga belgilangan qiymat JavaScript-ga o'xshash bayonot sifatida talqin qilinishi kerakligini bildiradi (Angular ba'zi yaxshilanishlari bilan) va oddiy satr sifatida emas.

Masalan, HTML'dagi xususiyatlarni dinamik ravishda yangilashning keng tarqalgan misollaridan biri — shakl to'g'ri yoki noto'g'ri bo'lishiga qarab "Submit" tugmasi o'chirilishi kerakmi yoki yo'qmi, aniqlashdir.

Kvadrat qavs ichiga kerakli xususiyatni o'rab, Angular'ga belgilangan qiymat dinamik (ya'ni, statik satr emas) ekanligini bildiring.

@Component({
  selector: 'sign-up-form',
  template: ` <button type="submit" [disabled]="formIsInvalid">Submit</button> `,
})
export class SignUpForm {
  formIsInvalid = true;
}

Ushbu misolda, formIsInvalid true bo'lgani uchun, ko'rsatilgan HTML quyidagicha bo'ladi:

<button type="submit" disabled>Submit</button>

Dinamik atributlar

Agar siz maxsus HTML atributlarini (masalan, aria-, data- va boshqalar) dinamik ravishda bog'lamoqchi bo'lsangiz, maxsus atributlarni ham kvadrat qavslar bilan o'rashni xohlashingiz mumkin.

@Component({
  standalone: true,
  template: ` <button [data-test-id]="testId">Asosiy CTA</button> `,
})
export class AppBanner {
  testId = 'main-cta';
}

Afsuski, bu ishlamaydi, chunki maxsus HTML atributlari standart DOM xususiyatlari emas. Buni kerakli tarzda ishlashi uchun biz maxsus HTML atributiga attr. prefiksini qo'shishimiz kerak.

@Component({
  standalone: true,
  template: ` <button [attr.data-test-id]="testId">Asosiy CTA</button> `,
})
export class AppBanner {
  testId = 'main-cta';
}

Keyingi qadam

Endi ilovada dinamik ma'lumotlar va shablonlar mavjud bo'lsa, ma'lum elementlarni shartli ravishda yashirish yoki ko'rsatish, elementlar ustidan aylanish va boshqa ko'plab imkoniyatlarni o'rganish vaqti keldi.