Angular2 - переключить родительский и детский стиль на клик

Я полный noob с Angular2, поэтому заранее извиняюсь, если вопрос очень прост. Поэтому у меня есть боковой бар с меню аккордеона. Мне нужно, чтобы родитель и дети меняли цвет фона при щелчке (так что в основном расширяя раздел). Я понимаю, что я могу установить вывод на клик на каждом родительском div так:

(click)="toggleClass()"

Мне не очень понятно, что я вставляю в конструктор в toggleClass (). Я считаю, что мне нужно как-то работать с ngClass здесь, но я немного потерян. Смотрите здесь плункер .

Благодаря!

javascript,html,css,angular,onclick,

0

Ответов: 1


1 принят

Вы можете использовать директиву NgClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

export class NameComponent {
    booleanVariable: boolean;
    
    constructor() {
    }
    
    toggleClass(){
      if(!this.booleanVariable) {
        this.booleanVariable = true;
      else {
        this.booleanVariable = false;
      }
    }
}
.className {
  background: red;
}
<button type="button" (click)="toggleClass()" class="btn btn-transparent" [ngClass]="{'className': booleanVariable}"data-toggle="collapse" data-target="#project-details">Projects</button>

JavaScript, HTML, CSS, угловые, OnClick,
Похожие вопросы