title: Is it possible to have routerLink and a click event on same anchor tag?
body: <p>I have a bunch of <code>li</code> elements and when the user clicks them, it opens a more detailed view of those elements in a different component. </p>
  
  <p>However, it requres TWO clicks to show the data I want to show.</p>
  
  <p>When the user click <strong>ONCE</strong> the component opens up with the empty view template.</p>
  
  <p>When the user clicks <strong>AGAIN</strong> it then shows the populated data. </p>
  
  <p>Can I not just put this in one anchor tag that routes me to me detailed view <em>and</em> emits the click event in one?</p>
  
  <p>Is there a preferred method or better way to do this?</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let favorite of sortedFavorites; let i= index"&gt;
      &lt;a class= 'clickMe' (click)= "openContact($event, i)" routerLink= "/details"&gt;
      &lt;div *ngIf= "favorite.isFavorite"&gt;
          &lt;img class="smallImage" onerror="this.onerror=null;this.src='User Icon Small.png';"
               src={{favorite.smallImageURL}} /&gt;
          &lt;h3&gt;&lt;img src="Favorite — True.png"&gt;{{ favorite.name }}&lt;/h3&gt;
          &lt;br&gt;
          &lt;p&gt;{{ favorite.companyName }}&lt;/p&gt;
          &lt;hr&gt;
      &lt;/div&gt;
     &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <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. </p>