{"flag":true,"single":true,"pageTitle":"custom html attribute angular","post":{"id":148,"user_id":"1","slug":"custom-html-attribute-angular-1l1q","title":"custom html attribute angular","body":"<p>1. html<\/p>\r\n<pre class=\"language-markup\"><code>&lt;button class=\"btn btn-sm float-end btn-red btn-icon rounded px-3\" data-id=\"{{coupon.id}}\" (click)=\"checkFav($event)\"&gt;\r\n     &lt;i class=\"uil uil-heart\" style=\"pointer-events: none;\"&gt;&lt;\/i&gt;\r\n&lt;\/button&gt;<\/code><\/pre>\r\n<p>data-id will be =&gt; id , for custom use [attr.YOURCUSTOM]=\"value\"<\/p>\r\n<p>2. in component.ts<\/p>\r\n<pre class=\"language-markup\"><code>export class CouponsComponent {\r\n \r\n  checkFav(event: any){\r\n    const clickedElement = event.target as HTMLImageElement;\r\n    const id_attribute = clickedElement.id;\r\n    console.log(\"custom attr:\",clickedElement.getAttribute(\"data-id\"));\r\n  }\r\n}<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-05-17T02:00:14.000000Z","updated_at":"2023-05-17T02:00:14.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"1. html &lt;button class=\"btn btn-sm float-end btn-red btn-icon rounded px-3\" data-id=\"{{coupon.id}}\" (click)=\"checkFav($event)\"&gt;      &l - custom html attribute angular (Updated: May 17, 2023) - Read more about custom html attribute angular at my programming site [SITE]","categories":[]}