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

Angular after click add active class and remove from siblings

SAMER SAEID answered on May 11, 2022 Popularity 3/10 Helpfulness 1/10

answer Angular after click add active class and remove from siblings

related angular click add class active and remove from others

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: add angular class click javascript siblings

Link to this answer
Share Copy Link

Contributed on May 11 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Closely Related Answers

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: class javascript add

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

Le Nhan Phung

0 Answers Avg Quality 2/10

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: class javascript 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

Contents

More Related Answers

Angular after click add active class and remove from siblings

Closely Related Answers

angular click add class active and remove from others

angular click add class active and remove from others

Grepper

Documentation

Social

Legal

Contact

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