ngStyle
Çalışma zamanında dinamik olarak stil dosyanıza etki etmenizi sağlar.
Bunun yanı sıra ngStyle attribure içerisinde verdiğmiz değişkenlerde olabilir aynen örnekte olduğu misal verirsek
@Component({
selector: 'app-style-example',
template: `
ıngım.. zıkkım..
`
})
export class ngStyleExample {
border = '1px solid red’;
style = {
'color': 'red',
'font-weight': 'bold',
'borderBottom': this.border
};
Bu şekilde json formatında verdiiğimiz css leri de o şekilde işlemimizi sağlar.
Şöyleki elimizde bir adet div olsun ve içerisinde ki elementin durumuna göre renklensin bu durumda yapmamız gerekenler,
@Component({
selector: 'app-style-example',
template: `
{{serverStatus}}
`
})
şeklinde buradan bir metoda referans verebiliyoruz.
Ve daha sonra metodumda is
export class ngStyleExample {
getColor(){
This.serverStatus===‘online’ ? ‘green’ :’red’
}