Angular’da öznitelik bağlama, öznitelikler için değerleri doğrudan ayarlamanıza yardımcı olur. Öznitelik bağlama ile erişilebilirliği artırabilir, uygulamanızı dinamik olarak şekillendirebilir ve aynı anda birden fazla CSS sınıfını veya stilini yönetebilirsiniz.
Sözdizimi #
Öznitelik bağlama sözdizimi property binding‘e benzer, ancak parantezler arasında bir öğe özelliği yerine, özniteliğin adından önce attr önekini ve ardından bir nokta koyarsınız. Ardından, öznitelik değerini bir dizeye çözümlenen bir ifadeyle ayarlarsınız.
<p [attr.attribute-you-are-targeting]="expression"></p>YARARLI: İfade null veya undefined olarak çözümlendiğinde, Angular özniteliği tamamen kaldırır.
ARIA özniteliklerini bağlama #
Öznitelik bağlama için birincil kullanım durumlarından biri ARIA özniteliklerini ayarlamaktır.
Bir ARIA özniteliğine bağlanmak için aşağıdakileri yazın:
<!-- create and set an aria attribute for assistive technology -->
<button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button>colspan’a bağlama #
Öznitelik bağlama için bir başka yaygın kullanım durumu da tablolardaki colspan özniteliğidir. colspan özniteliğine bağlama, tablolarınızı programatik olarak dinamik tutmanıza yardımcı olur. Uygulamanızın bir tabloyu doldurduğu veri miktarına bağlı olarak, bir satırın yayıldığı sütun sayısı değişebilir.
<td> özniteliği colspan ile öznitelik bağlamayı kullanmak için:
- Aşağıdaki sözdizimini kullanarak colspan özniteliğini belirtin: [attr.colspan].
- [attr.colspan] öğesini bir ifadeye eşit olarak ayarlayın.
Aşağıdaki örnekte, colspan niteliğini 1 + 1 ifadesine bağlarsınız.
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>Bu bağlama <tr>’nin iki sütuna yayılmasına neden olur.
YARARLI: Bazen bir özelliğin adı ile bir nitelik arasında farklılıklar olabilir.
colspan <td> öğesinin bir niteliğiyken, büyük “S” ile yazılan colSpan bir özelliktir. Öznitelik bağlama kullanırken, colspan öğesini küçük “s” harfiyle kullanın.
colSpan özelliğine nasıl bağlanılacağı hakkında daha fazla bilgi için Property Binding‘in colspan and colSpan bölümüne bakın.
