title: Attaching click to anchor tag in angular
body: <p>I am trying to attach click event to anchor tags (coming from ajax) and block the default redirection. How can I do it in angular ? </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="/abc"&gt;&lt;p&gt;abc&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/abc1"&gt;&lt;p&gt;abc1&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/abc2"&gt;&lt;p&gt;abc2&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/abc3"&gt;&lt;p&gt;abc3&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>In ts file:</strong> </p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(elementRef: ElementRef, renderer: Renderer) { 
      this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) =&gt; {
          event.preventDefault();
          let target = event.target || event.srcElement || event.currentTarget;
          console.log(target);
      });  
  }
  </code></pre>
  
  <p>This will attach event to all elements, how can I limit this to anchor tag only ?</p>
  
  <p>All helps appreciated.</p>