АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗jsagPmStDSC 50 of 97 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Динамическое изменение стилей в 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>

Даны три блока. Сделайте три кнопки, каждая из которых будет тогглить свой блок.

enru