Angular8.1.0基础---组件样式绑定

1，绑定一个class名

    <p [class.isActive]="boolean">
        p element works!
    </p>

也可 <p [class.isActive]="fn()">

           p element works!

        </p>

       fn(){

         return boolean

      }

2，绑定多个class名 （ngClass）

     <span [ngClass]="classObj">

        this is span

     </span>

     classObj:Object={

       className1:boolean,

       className2:boolean

     }

 

3,通过style绑定
   <div [style.color]="boolean"  ?  'red'  :  'yellow' ">

       this is div

    </div>

 

4,绑定多个style（ngStyle）

   <div [ngStyle]="styleObj ">

       this is div

    </div>

 

styleObj :Object={

   'font-style': boolean ? 'italic' : 'normal',

   'font-weight': boolean  ? 'bold' : 'normal',

   'font-size':boolean ? '24px' : '12px'

}