title: event binding between nested components
body: <p>Supposing that I have two components compA and cmpB
  and cmpB used as child of cmpA (like select and option)</p>
  <pre><code>&lt;div&gt;
     &lt;cmpA&gt;
        &lt;cmpB&gt;&lt;/cmpB&gt;
        &lt;cmpB&gt;&lt;/cmpB&gt;
        &lt;cmpB&gt;&lt;/cmpB&gt;
     &lt;/cmpA&gt;
  &lt;/div&gt;
  </code></pre>
  <p>how I can pass click event from cmpB to its parent by using ( ng-template and let-attr directive and ngTemplateOutlet ) I trid it but it didnt works
  <a href="https://stackoverflow.com/questions/63511926/reusable-component-in-angular">reusable component in angular</a></p>
  <p>because I have another solution but I wont use it bcs its not practical</p>
  <p>I will mention it just to understand what I mean</p>
  <pre><code>&lt;div&gt;
     &lt;cmpA #cmpA1&gt;
        &lt;cmpB (click)=&quot;cmp1.fn()&quot;&gt;&lt;/cmpB&gt;
        &lt;cmpB (click)=&quot;cmp1.fn()&quot;&gt;&lt;/cmpB&gt;
        &lt;cmpB (click)=&quot;cmp1.fn()&quot;&gt;&lt;/cmpB&gt;
     &lt;/cmpA&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;cmpA #cmpA2&gt;
        &lt;cmpB (click)=&quot;cmp2.fn()&quot;&gt;&lt;/cmpB&gt;
        &lt;cmpB (click)=&quot;cmp2.fn()&quot;&gt;&lt;/cmpB&gt;
        &lt;cmpB (click)=&quot;cmp2.fn()&quot;&gt;&lt;/cmpB&gt;
     &lt;/cmpA&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want all of that to be &quot;under the hood&quot;</p>