Динамическое изменение стилей в 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>
Даны три блока. Сделайте три кнопки, каждая из которых будет тогглить свой блок.