ngStyle

Çalışma zamanında dinamik olarak stil dosyanıza etki etmenizi sağlar.

1
2
3
4
5
6
7
<p [ngStyle]="{
        'color': 'red',
        'font-weight': 'bold',
        'borderBottom': borderStyle // bu kısım ts dosyası içerisinden. Referans aldığı değişkeni okur
      }">
      <ng-content></ng-content>
    </p>

Bunun yanı sıra ngStyle attribure içerisinde verdiğmiz değişkenlerde olabilir aynen örnekte olduğu misal verirsek

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Component({
  selector: 'app-style-example',
  template: `
    <p [ngStyle]=“style”>
      <ng-content>ıngım.. zıkkım.. </ng-content>
    </p>
  `
})
 
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,

1
2
3
4
5
6
 @Component({
  selector: 'app-style-example',
  template: `
	<div [ngstyle]={backgroundColor: getColor()}> {{serverStatus}}</div>
  `
})

şeklinde buradan bir metoda referans verebiliyoruz.

Ve daha sonra metodumda is

1
2
3
4
5
export class ngStyleExample {
 
getColor(){
This.serverStatus===‘online’ ? ‘green’ :’red’
}