custom html attribute angular

1. html

<button class="btn btn-sm float-end btn-red btn-icon rounded px-3" data-id="{{coupon.id}}" (click)="checkFav($event)">
     <i class="uil uil-heart" style="pointer-events: none;"></i>
</button>

data-id will be => id , for custom use [attr.YOURCUSTOM]="value"

2. in component.ts

export class CouponsComponent {
 
  checkFav(event: any){
    const clickedElement = event.target as HTMLImageElement;
    const id_attribute = clickedElement.id;
    console.log("custom attr:",clickedElement.getAttribute("data-id"));
  }
}