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

Issue

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?

<ul>
  <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">{{ favorite.name }}</h3>
        <br>
        <p>{{ favorite.companyName }}</p>
        <hr>
    </div>
   </a>
  </li>
</ul>

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.

Solution

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

 this.router.navigate(['path']);

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)