How to attach click event to multiple controls using classname in angular

Question

I can attach click event in angular like this

<span (click)="showInfo()" class="info-span"><span>

But I have 20 spans like this, so is there any centralized way to attach the click event with the class name info-span in angular like we can do with jquery like this?

$('.info-span').click(function(){});

Or I have to repeat this (click)="showInfo()" in all the spans?

Write span with click and loop over it. Try to use angular way instead of going with jquery way. — Kaustubh Khare
– Kaustubh Khare, Commented Mar 1, 2021 at 11:59

Kaustubh Khare · Accepted Answer · 2021-03-01 12:12:00Z

1

Use ngFor to loop 20 times on span. Here you don't need to write it 20 times.

I am not sure if you need any specific data for each span or click function, i am assuming everything is the same.

 <span (click)="showInfo($event)" class="info-span" *ngFor="let i of [].constructor(20)">A<span>

edited Mar 1, 2021 at 12:12

answered Mar 1, 2021 at 12:06

Kaustubh Khare

3,5203 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pawan Nogariya Over a year ago

You assumed I have 20 spans under same parent and with all following same settings. But they are independent spans in different areas of page and so cannot be created by ngFor

Kaustubh Khare Over a year ago

ok, I got it. Then there might be one option by creating a directive(if DOM manipulation is there in click function) or component with a span and click functionality and use that everywhere you want. It will reduce code duplication.

Bob · Accepted Answer · 2021-03-01 11:50:50Z

0

This is very similar to what was asked here

You global event handler to some container of these spans and then you check the source element in the event object.

This is not particular from angular, It can run here here in a code snippet

document.body.addEventListener('click', ($event) => {
  if($event.srcElement.classList.contains('red')){
    alert('red');
  }
})

.green {
  background-color: #008000;
  color: white;
}
.red {
  background-color: #800000;
  color: white;
  cursor: pointer;
}

<span class="green">A</span>
<span class="red">B</span>
<span class="green">C</span>
<span class="red">D</span>
<span class="green">E</span>
<span class="red">F</span>
<span class="red">G</span>

answered Mar 1, 2021 at 11:50

Bob

14.8k1 gold badge11 silver badges39 bronze badges

Comments

jsdev2023 · Accepted Answer · 2021-03-01 11:59:56Z

-1

The best way to solve this method is to pass the id or event as a parameter to the function being called on the click event.

<span (click)="showInfo($event)" class="info-span" id="1">btn1<span>
<span (click)="showInfo($event)" class="info-span" id="2">btn2<span>

showInfo(event){
    const selectedButtonId = event.target.id;
    alert('you just clicked the btn-', selectedButtonId);
}

answered Mar 1, 2021 at 11:59

jsdev2023

5681 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to attach click event to multiple controls using classname in angular

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related