NgStyle,NgClass. Динамическая стилизация компонентов

ngClass — позволяет определить набор классов которые применяются к элементу

<div [ngClass]="{class1: true}"> (1)
    <h1>Hello World!!!</h1>
    <p [ngClass]="{class2: true}">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam cupiditate
        voluptates sed voluptate a dolores
        ipsa dignissimos in nam cumque consequuntur, iste dolore? Voluptatum reiciendis doloremque eligendi
        dignissimos, iusto deleniti.</p>
</div> 

.class1{
    color: red;
}

.class2{
    color: yellow;
} 

Применение стилей для элемента осуществляется при помощи директивы ngClass, которой присваивается объект в виде строки «{class1:true}». Где class1 — имя класса, а параметр true — нужно применять класс или нет.

ngStyle — применяется для указания стилей для компонента.

<div [ngStyle]="{'color':'red', 'font-size':'10px'}"> (2)
    <h1>Hello World!!!</h1>
...

Синтаксис здесь очень простой, значение указывается в виде свойств css-стиля (2)

Пример динамического применения стилей:

<div [ngClass]="{invisible:visiblity}">
    <h1>Hello World!!!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<button (click)="toggle()">click me</button> 

export class DateComponent implements OnInit {
  visiblity: boolean = true;
  constructor() {

  }

  toggle() {
    this.visiblity = !this.visiblity;
  }
...

.invisible{
    display: none;
}