Property Binding

Angular'da özellik bağlama, HTML öğelerinin, Angular bileşenlerinin ve daha fazlasının özellikleri için değer belirlemenizi sağlar.

Özellikler ve nitelikler için dinamik olarak değer ayarlamak üzere özellik bağlamayı kullanın. Buton özelliklerini değiştirme, resim yollarını programatik olarak ayarlama ve bileşenler arasında değer paylaşma gibi işlemler yapabilirsiniz.

NOTE: Temel bilgiler kılavuzundaki dinamik özellik ve nitelik ayarlama hakkında daha fazla bilgi edinin.

Bu aktivitede, şablonlarda özellik bağlamayı nasıl kullanacağınızı öğreneceksiniz.

Bir öğenin niteliğine bağlanmak için nitelik adını köşeli parantez içine alın. İşte bir örnek:

<img alt="photo" [src]="imageURL" />

Bu örnekte, src niteliğinin değeri imageURL sınıf özelliğine bağlanacaktır. imageURL'nin değeri ne olursa olsun, img etiketinin src niteliği olarak ayarlanacaktır.

  1. isEditable adlı bir özellik ekleyin

    app.ts dosyasındaki kodu, App sınıfına isEditable adında ve başlangıç değeri true olan bir özellik ekleyerek güncelleyin.

    export class App {
  isEditable = true;
}

  2. contentEditable'a bağlayın

    Sonra, div'in contentEditable niteliğini isEditable özelliğine [] sözdizimini kullanarak bağlayın.

    @Component({
  ...
  template: `<div [contentEditable]="isEditable"></div>`,
})

Div artık düzenlenebilir durumda. Harika is!

Özellik bağlama, Angular'ın birçok güçlü özelliğinden biridir. Daha fazla bilgi edinmek isterseniz Angular belgelerine göz atın.