Динамическое изменение стилей в Angular

С помощью директив ngClass и ngStyle можно привязать выражения к элементам, благодаря чему наши стили будут изменяться динамически.

Давайте сделаем так, чтобы текст срывался или показывался с помощью свойства active класса компонента:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Для этого напишем функцию toggle, которая попеременно будет включать или выключать данное свойство:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

В CSS файле компонента задаем следующий стиль классу:

app/app.component.css.hidden {
  display: none;
}

В темплейте компонента сделаем див, и добавим ему CSS класс hidden, который будет включаться или выключаться в зависимости от свойства active из класса компонента:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

Сделаем также кнопку, по нажатию на которую будет вызываться метод toggle, показывая или скрывая наш компонент:

app/app.component.html<button (click)="toggle()">
  toggle
</button>