Breaking News: Grepper is joining You.com. Read the official announcement!

angular click add class active and remove from others

Add Answer

Le Nhan Phung answered on May 11, 2022 Popularity 5/10 Helpfulness 3/10

answer angular click add class active and remove from others

related angular click add class active and remove from others

related Angular after click add active class and remove from siblings

angular click add class active and remove from others

Comment

<ul id="grouplist" class="list-group">
     <li class="list-group-item" [ngClass]="{'active': selectedItem == item}" (click)="listClick($event, item)" *ngFor="let item of groups">
        {{ item.name }}
     </li>
</ul>

Popularity 5/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: add class javascript

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

Le Nhan Phung

0 Answers Avg Quality 2/10

Closely Related Answers

angular click add class active and remove from others

Comment

listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = newValue;  // don't forget to update the model here
    // ... do other stuff here ...
}

Popularity 5/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript class add

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

Le Nhan Phung

0 Answers Avg Quality 2/10

Angular after click add active class and remove from siblings

Comment

import { Output, EventEmitter } from '@angular/core';
@Output() itemSelectEvent= new EventEmitter<string>();

select(array_item){
itemSelectEvent.emit(array_item.id);
}

<app-item-desc *ngFor="let itemDesc of addedItem; let i = index" [itemlistDesc]="itemDesc" (itemSelectEvent)="selectEventHandler($event)"></app-item-desc>

selectEventHandler(event){
 // event, you will get selected id here
 for(let i=0;i < addedItem.length;i++){
   if(addedItem[i].id == event){
    addedItem[i]['is_active'] = true;
   }else{
    addedItem[i]['is_active'] = false;
   }
 }
}

<div class="order" (click)="select($event)" [ngClass]="{'active': itemlistDesc.is_active}">

</div>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: click class javascript siblings angular add

Link to this answer
Share Copy Link

Contributed on May 11 2022

SAMER SAEID

0 Answers Avg Quality 2/10

angular click add class active and remove from others

Contents

More Related Answers

angular click add class active and remove from others

Closely Related Answers

angular click add class active and remove from others

Angular after click add active class and remove from siblings

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.