Динамическое изменение стилей в Angular
С помощью директив ngClass и ngStyle
можно привязать выражения к элементам, благодаря чему
наши стили будут изменяться динамически.
Давайте сделаем так, чтобы текст
срывался или показывался с помощью свойства
active класса компонента:
export class AppComponent {
active: boolean = true;
toggle() {
this.active = !this.active;
}
}
Для этого напишем функцию toggle,
которая попеременно будет включать
или выключать данное свойство:
export class AppComponent {
active: boolean = true;
toggle() {
this.active = !this.active;
}
}
В CSS файле компонента задаем следующий стиль классу:
.hidden {
display: none;
}
В темплейте компонента сделаем див,
и добавим ему CSS класс hidden,
который будет включаться или выключаться
в зависимости от свойства active
из класса компонента:
<div [ngClass]="{hidden: active}">
text
</div>
Сделаем также кнопку, по нажатию
на которую будет вызываться метод
toggle, показывая или скрывая
наш компонент:
<button (click)="toggle()">
toggle
</button>
Даны три блока. Сделайте три кнопки, каждая из которых будет тогглить свой блок.