2022年9月27日 星期二

Angular [ngClass](12)

html部分
<h5 (click)="CountPlus()">ngClass</h5>
<p [ngClass]="{'backsp' : count % 2 == 1}">
  {{count}}
</p>
<p [class.backsp]="count % 2 == 1">
  {{count}}
</p>
ts部分
count = 1;

  CountPlus() {
    this.count++;
 }
css部分
.backsp{
    background-color:aqua;
}
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

Angular [ngStyle](11)

html部分
<h5 (click)="CountPlus()">ngStyle</h5>

<p [ngStyle]="{'font-size': (count * 2) + 'px'}">
  {{count}}
</p>
<p [ngStyle]="getStyle()">
  {{count}}
</p>
<p [style.font-size]="(count * 2) + 'px'" [style.color]="'blue'">
  {{count}}
</p>

ts部分
  count = 0;

  CountPlus() {
    this.count++;
  }

  getStyle() {
   return { 'font-size': ( this.count * 2) + 'px' }
  }
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網