title: Child Component to Parent Component Communication without a Children Nested in a Template in Angular (Angular 2+)
body: <p>Every answered post, and every tutorial shows that the <code>EventEmitter()</code> can be used for a child component to talk to it's parent if the parent is listening; however, <em>that only works if the child component is part of the parent's template</em>; otherwise, the emit can only be picked up by the app's root component.</p>
  
  <p>Here's a simple structure (using <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code> on the <code>radio-group</code> to transclude the children):</p>
  
  <pre><code>&lt;radio-group&gt;
    &lt;radio&gt;&lt;/radio&gt;
    &lt;radio&gt;&lt;/radio&gt;
    &lt;radio&gt;&lt;/radio&gt;
  &lt;/radio-group&gt;
  </code></pre>
  
  <p>When a custom radio component gets checked, it should emit an event--that works great.  But the custom radio group won't hear the event even if it's listening because it's children are not part of it's template in this implementation.</p>
  
  <p>I don't understand how <a href="https://github.com/angular/material2/tree/master/src/lib/radio" rel="nofollow noreferrer">Angular Material 2 Radios</a> pull this off; but they'd be a good reference for someone who understands Angular 2 well.</p>
  
  <p>Click on the "Examples" tab of <a href="https://material.angular.io/components/component/radio" rel="nofollow noreferrer">Angular's Material 2 Radio Demo</a> to see what I'm trying to accomplish, and the source button to see the same structure I'm trying to duplicate.</p>
  
  <p>Again, I'm not trying to copy and paste their implementation, I'm trying to get the child components to communicate events to a parent component when the child components are not part of the parent's template.</p>