CSS sınıf adlarını bir öğenin sınıf niteliğine eklemek ve kaldırmak ve stilleri dinamik olarak ayarlamak için sınıf ve stil bağlamalarını kullanın.
Tek bir CSS sınıfına bağlama #
Tek bir sınıf bağlayıcısı oluşturmak için aşağıdakileri yazın:
[class.sale]=”onSale”
Angular, bağlı ifade olan onSale doğru olduğunda sınıfı ekler ve ifade hatalı olduğunda –undefined olması dışında- sınıfı kaldırır.
Birden fazla CSS sınıfına bağlama #
Birden fazla sınıfa bağlanmak için aşağıdakileri yazın:
[class]=”classExpression”
İfade aşağıdakilerden biri olabilir:
- Sınıf adlarının boşlukla sınırlandırılmış bir dizesi.
- Anahtar olarak sınıf adları ve değer olarak doğru veya yanlış ifadeler içeren bir nesne.
- Sınıf adlarından oluşan bir dizi.
Nesne biçimi ile Angular, yalnızca ilişkili değeri doğruysa bir sınıf ekler.
ÖNEMLİ: Object, Array, Map veya Set gibi herhangi bir nesne benzeri ifadede, Angular’ın sınıf listesini güncellemesi için nesnenin kimliğinin değişmesi gerekir. Nesne kimliğini değiştirmeden özelliği güncellemenin hiçbir etkisi yoktur.
Aynı sınıf adına birden fazla bağlama varsa, Angular hangi bağlamanın kullanılacağını belirlemek için stil önceliğini kullanır.
Aşağıdaki tablo sınıf bağlama sözdizimini özetlemektedir.
| Bağlama Tipi | Sözdizimi | Input Tipi | Örnek Giriş Değerleri |
| Single class binding | [class.sale]=”onSale” | boolean | undefined | null | true, false |
| Multi-class binding | [class]=”classExpression” | string | “my-class-1 my-class-2 my-class-3” |
| Multi-class binding | [class]=”classExpression” | Record<string, boolean | undefined | null> | {foo: true, bar: false} |
| Multi-class binding | [class]=”classExpression” | Array<string> | [‘foo’, ‘bar’] |
Tek bir stile bağlama #
Tek bir stil bağlaması oluşturmak için, style ön ekini ve ardından bir nokta ve CSS stilinin adını kullanın.
Örneğin, width stilini ayarlamak için aşağıdakileri yazın: [style.width]=”width”
Angular özelliği, genellikle bir dize olan bağlı ifadenin değerine ayarlar. İsteğe bağlı olarak, bir sayı türü gerektiren em or % gibi bir birim uzantısı ekleyebilirsiniz.
1-Kısa çizgi kullanarak bir stili yazmak için aşağıdakileri yazın:
<nav [style.background-color]="expression"></nav>2-CamelCase ile bir stil yazmak için aşağıdakileri yazın:
<nav [style.backgroundColor]="expression"></nav>Birden fazla stile bağlanma #
Birden fazla stil arasında geçiş yapmak için [style] niteliğine bağlanın-örneğin, [style]=”styleExpression”. styleExpression aşağıdakilerden biri olabilir:
- Aşağıdaki gibi stillerin bir dize listesi
“width: 100px; height: 100px; background-color: cornflowerblue;”.
- Anahtarları stil adları ve değerleri stil değerleri olan bir nesne, örneğin
{width: ‘100px’, height: ‘100px’, backgroundColor: ‘cornflowerblue’}.
Bir diziyi [style]‘a bağlamanın desteklenmediğini unutmayın.
ÖNEMLİ: [style] özelliğini bir nesne ifadesine bağlarken, Angular’ın sınıf listesini güncellemesi için nesnenin kimliğinin değişmesi gerekir. Nesne kimliğini değiştirmeden özelliği güncellemenin hiçbir etkisi yoktur.
Tekli ve çoklu stil bağlama örneği #
import {Component} from '@angular/core';
@Component({
standalone: true,
selector: 'app-nav-bar',
template: ` <nav [style]="navStyle">
<a [style.text-decoration]="activeLinkStyle">Home Page</a>
<a [style.text-decoration]="linkStyle">Login</a>
</nav>`,
})
export class NavBarComponent {
navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
linkStyle = 'underline';
activeLinkStyle = 'overline';
/* . . . */
}Aynı stil niteliği için birden fazla bağlama varsa, Angular hangi bağlamanın kullanılacağını belirlemek için stil önceliğini kullanır.
Aşağıdaki tablo stil bağlama sözdizimini özetlemektedir.
| Bağlama Tipi | Sözdizimi | Input Tipi | Örnek Giriş Değerleri |
| Single style binding | [style.width]=”width” | string | undefined | null | “100px” |
| Single style binding with units | [style.width.px]=”width” | number | undefined | null | 100 |
| Multi-style binding | [style]=”styleExpression” | string | “width: 100px; height: 100px” |
| Multi-style binding | [style]=”styleExpression” | Record<string, string | undefined | null> | {width: ‘100px’, height: ‘100px’} |
Şekillendirme önceliği #
Tek bir HTML öğesinin CSS sınıf listesi ve stil değerleri birden fazla kaynağa bağlı olabilir (örneğin, birden fazla yönergeden gelen ana bilgisayar bağları).
