title: How to bind click event to random li elements inside ul element in angular 2+
body: <pre><code>     &lt;ul&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
         &lt;li&gt;Random li without daily class on it &lt;/li&gt;
         &lt;li&gt;Random li without daily class on it &lt;/li&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
         &lt;li&gt; Random li without daily class on it &lt;/li&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
         &lt;li&gt;Random li without daily class on it &lt;/li&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
         &lt;li&gt;Random li without daily class on it &lt;/li&gt;
         &lt;li class="daily"&gt;some text &lt;/li&gt;
       &lt;/ul&gt;
  </code></pre>
  
  <p>I have a component, whose template has several <code>ul</code> elements (the above is just one of them) and each has multiple <code>li</code> elements with <code>class="daily"</code> on random <code>&lt;li&gt;s</code>. I want to call a method <code>daily()</code> defined inside my component if any <code>li</code> is clicked (having "daily" class on it). How can I acheive this without attaching <code>(click)="daily()"</code> on each <code>li</code> element. 
  Note: Here using *ngFor is a tedious way to bind click event to such a random series of <code>&lt;li&gt;s</code>.</p>