Is it possible to have routerLink and a click event on same anchor tag?


I have a bunch of li elements and when the user clicks them, it opens a more detailed view of those elements in a different component.

However, it requres TWO clicks to show the data I want to show.

When the user click ONCE the component opens up with the empty view template.

When the user clicks AGAIN it then shows the populated data.

Can I not just put this in one anchor tag that routes me to me detailed view and emits the click event in one?

Is there a preferred method or better way to do this?

  <li *ngFor="let favorite of sortedFavorites; let i= index">
    <a class= 'clickMe' (click)= "openContact($event, i)" routerLink= "/details">
    <div *ngIf= "favorite.isFavorite">
        <img class="smallImage" onerror="this.onerror=null;this.src='User Icon Small.png';"
             src={{favorite.smallImageURL}} />
        <h3><img src="Favorite — True.png">{{ }}</h3>
        <p>{{ favorite.companyName }}</p>

EDIT: Some people are suggesting that I use reslove guards to fetch the data before it is populated, but I am only pulling this from a local JSON file and passing it between my components.


you use click event for both. navigate to details page via programmatically using the router


whatever process do in openContact() and then redirect on the details page.

add into constructor private router: Router

Answered By – Shailesh Ladumor

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.