html this.id to function not working angular

Issue

I'm trying to send the id of a element from html to the function, this because it changes in the ts, so I have a click function but function(this.id) doesnt work here is my code

the html

<button id="btnNext" class="btn" (click)="nextGeneral(this.id)">next</button>

the ts

nextGeneral(id:number){
alert(id)
}

Solution

If I understand correctly, you want the id attribute from the <button> (i.e. btnNext) to be passed into the nextGeneral() function (although this function is currently expecting a number not a string, so correct me if I'm wrong).

This is how you could achieve that dynamically:

.html

<button id="btnNext" class="btn" (click)="nextGeneral($event)">next</button>

.ts

nextGeneral(event: PointerEvent){
  const id: string = (event.target as HTMLElement).id
  alert(id)
}

Answered By - nate-kumar