Angular click event not firing

Question

I have a piece of code generated inside of an *ngFor, and a span with a (click) event that I can't figure why it does not fire when I click it. It does not print anything in the console.

Can this be because of the ngFor or ngIf ? I've tried everything I can think of...

My template looks like this (the relevant part):

<tbody>
  <ng-container *ngIf="matches">
    <tr *ngFor="let meci of matches">
      <td>{{ meci.id }}</td>
      <td>{{ meci.echipa1 }}</td>
      <td>{{ meci.echipa2 }}</td>
      <td>{{ meci.tip }}</td>
      <td>{{ meci.pretBilet }}</td>
      <td>{{ meci.nrLocuri }}</td>
      <td>{{ meci.data }}</td>
      <td class="ui center aligned">
        <span class="fas fa-trash red icon"></span>
        <span class="fas fa-edit teal icon" (click)="edit(meci)"></span>
      </td>
    </tr>
  </ng-container>
</tbody>

And the component like this:

export class MatchesComponent implements OnInit {
  matches: Meci[];

  constructor(private service: MatchesService, private modalService: SuiModalService) { }

  ngOnInit() {
    this.service.getAll().subscribe(matches => this.matches = matches);
  }

  edit(meci: Meci) {
    console.log('edit');
  }

}

did it work for you

Sajeetharan
– Sajeetharan

2018-05-24 19:26:04 +00:00
Commented May 24, 2018 at 19:26 — Sajeetharan
– Sajeetharan, Commented May 24, 2018 at 19:26

rares_dude · Accepted Answer · 2018-05-25 04:31:59Z

5

Ok, so after some more inspecting on the code, it seems that the problem was because of font awesome that it just commented the span and inserted a svg at runtime, so the (click) pointer was not available anymore. The solution was to wrap the span in a div and put the click event on the div like this:

<div class="icon-wrapper" (click)="edit(meci)">
   <span class="fas fa-edit teal icon"></span>
</div>

edited May 25, 2018 at 4:31

answered May 24, 2018 at 21:36

rares_dude

1051 gold badge2 silver badges9 bronze badges

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

2 Comments

Sankofa Over a year ago

This wasn't my problem but it forced me to look closer at my code. I forgot to invoke the function in the HTML. :) smh. Taking a break and coming back to the code helps when start getting tired. Thanks for posting.

Leroy Meijer Over a year ago

Same, this wasn't my problem either, but (Click) is something different the (click).... Thanks for making me look at my code again ;)

Pran R.V · Accepted Answer · 2021-04-13 10:46:33Z

4

Change the postion to relative and give some z-idex, issue can be because some other classes overlaping your span

edited Apr 13, 2021 at 10:46

answered Nov 25, 2020 at 11:16

Pran R.V

1,15612 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular click event not firing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related