Angular2-在点击时切换父级和子级样式

Question

I am a complete noob with Angular2, so I apologize in advance if the question is very basic. So I have a side bar with an accordion menu. I need the parent and the children to change their background color on click (so basically on expanding the section). I understand that I can set an output on click on each div parent like so:

(click)="toggleClass()"

What is not very clear to me is what do I put in the constructor, in toggleClass(). I believe I need to somehow work with ngClass here, but I am a bit lost. See plunker here .

Thanks!

Answer 1

You can use NgClass Directive : 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>