I have the following html tag in my app.component.html page
<a (click)='clicked=0' style='border-style: solid; padding: 5px 50px 5px 50px;' routerLink='/route/show'>Show Details</a>
but when I load this page in my chrome and look at the html in chrome development tools then it is showing below
<a routerlink="/route/show" style="border-style: solid; padding: 5px 50px 5px 50px;" ng-reflect-router-link="/route/show" href="#/route/show">Show Details</a>
Why it is not showing my (click)=='clicked=0' in chrome developer tools. Is there anything that I miss to see it, I am using angular 4. Thanks.
At compile time, the (click)
event binding gets transmuted into an event listener and is no longer visible as an attribute like in:
<a (click)='clicked=0' ...
The exact same as your routerLink
gets transmuted to ng-reflect-router-link
If you open dev tools, inspect the element and then open the Event Listeners tab, you will see the event has been bound and you can trace it through to the (most likely) anonymous function which has been generated to handle clicked = 0
.