onclick add active class in angular

Solutions on MaxInterview for onclick add active class in angular by the best coders in the world

Search
showing results for - "onclick add active class in angular"
Louisa
08 Feb 2016
1You can do something like:
2
3<ul class="sub_modules">
4  <li (click)="activateClass(subModule)"
5      *ngFor="let subModule of subModules"
6      [ngClass]="{'active': subModule.active}">
7    <a>{{ subModule.name }}</a>
8  </li>
9</ul>
10On The component
11
12activateClass(subModule){
13  subModule.active = !subModule.active;    
14}
15On the Ng class the first property is the class you wanna add and the second is the condition;
Stefania
20 May 2018
1// if needed add a boolean to the array and use it
2for(let i = 0; i < this.subModules.length; i++){
3	this.subModules[i].active = false;
4}
5
6<ul class="sub_modules">
7  <li (click)="activateClass(subModule)"
8      *ngFor="let subModule of subModules"
9      [ngClass]="{'active': subModule.active}">
10    <a>{{ subModule.name }}</a>
11  </li>
12</ul>
13On The component
14
15activateClass(subModule){
16  subModule.active = !subModule.active;    
17}
similar questions
add active class onclick javascriptclick binding angular 8toggle buttons angular stylescolor element in a list onclick angularadd active class to button onclick jqueryangular ng click toggle classactive class router linkangular button onclickset active element javascriptonclick event in angularadd active class on open page using javascript
queries leading to this page
in angular click item add class activengclass set active on clickangular active class on clickclick button add active class angularset active class on click angularangular 10 active class on clickadd active class onclick angularadd class active on click angularhow to add active class to current element in angularhow to apply active class on button click angularactive class on click angularon click add active class angularhow to apply active class on button click angular materilaonclick active button in angularadd active class name to li onclick angular 6onclick class active in angularangularjs onclick active classadd active class onclick typescripthow to set button active in html angular 8angular onclick add class activeangularjs ng click add class activeadd active class onclick in angularhow to add active class on click in angularset active item on click angularli click add class active angularonclick add active class in angularhow to add active class on click in angular 6click on active ng class in angularangular click add class activeon click on element add active class angularadd active class on button click angularclick particular button add active class in angular 7how to add active class on click in angular 7how to apply active class on button click angular materialadd active class on click of an element angularactive class on button in angularonclick add active class in angular