<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ X ] feature request"><pre class="notranslate"><code class="notranslate">[ X ] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">At the moment when a component wants to communicate with another component to which he is not directly related it has to use a service since only a parent can "subscribe" to an event emitted by its children.</p>
<p dir="auto">This means that if we have a scenario like this where <code class="notranslate">grand-grand-son3</code> wants to talk to <code class="notranslate">grand-son-2</code> we have to use a service (or a dirty combination of  ViewChild):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;parent&gt;
    &lt;child-1&gt;
        &lt;grand-son-1&gt;
             &lt;grand-grand-son3&gt;&lt;/grand-grand-son3&gt;
        &lt;/grand-son1&gt;
    &lt;/child-1&gt;
    &lt;child-2&gt;
        &lt;grand-son-2&gt;
        &lt;/grand-son2&gt;
    &lt;/child-2&gt;
&lt;/parent&gt;"><pre class="notranslate"><code class="notranslate">&lt;parent&gt;
    &lt;child-1&gt;
        &lt;grand-son-1&gt;
             &lt;grand-grand-son3&gt;&lt;/grand-grand-son3&gt;
        &lt;/grand-son1&gt;
    &lt;/child-1&gt;
    &lt;child-2&gt;
        &lt;grand-son-2&gt;
        &lt;/grand-son2&gt;
    &lt;/child-2&gt;
&lt;/parent&gt;
</code></pre></div>
<p dir="auto">Creating a service for a simple click that manages the color of grand-son-2 would be silly. So one creates a service that deals with everything inside the <code class="notranslate">parent</code> and every components subscribe to it as needed. This way parent doesn't have a dozen services related to it. I like this solution but it's a lot of boiler plate just to change a color. It also breaks the principle of least privilege a bit. If there was a grandson-4, maybe I wouldn't want him to be able to subscribe to a specific event.</p>
<p dir="auto">Another option is not to break components in mini components. In other words bigger components to not deal with yet again another service. I don't like this solution but I think the current behavior somewhat encourages that in some instances.</p>
<p dir="auto"><strong>What I'm proposing</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" @Output(null, MyTargetComponent) sonClicked= new EventEmitter&lt;any&gt;();"><pre class="notranslate"><code class="notranslate"> @Output(null, MyTargetComponent) sonClicked= new EventEmitter&lt;any&gt;();
</code></pre></div>
<p dir="auto">It's easy and is in my opinion cleaner than a service.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
</ul>
<p dir="auto">Couldn't get custom event (ping) bubble up to the root component. DOM event (click) works just fine:<br>
<a href="http://plnkr.co/edit/g6RNv5qMreVFKYcwvtOs?p=preview" rel="nofollow">http://plnkr.co/edit/g6RNv5qMreVFKYcwvtOs?p=preview</a></p>
<p dir="auto">Using alpha.25</p>