<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x?] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x?] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Previous behavior</strong><br>
Using RC4, the following would work...<br>
<code class="notranslate">*ngIf="(searchResults | async)?.length &gt; 0"</code><br>
or<br>
<code class="notranslate">*ngIf="(searchResults | async)?.length == 0"</code></p>
<p dir="auto"><strong>Current behavior</strong><br>
RC5 throws<br>
<code class="notranslate">TypeError: Cannot read property 'length' of null</code></p>
<p dir="auto">This syntax does work in RC5<br>
<code class="notranslate">*ngIf="((searchResults | async) || []).length &gt; 0"</code><br>
and<br>
<code class="notranslate">*ngIf="((searchResults | async) || {}).length == 0"</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The original RC4 behavior seems more intuitive, especially when checking <code class="notranslate">.length == 0</code> since it did not evaluate until the observable returned.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [Chrome ]</li>
<li><strong>Language:</strong> [TypeScript 1.9]</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Per the component interaction docs [https://angular.io/docs/ts/latest/cookbook/component-communication.html], there are a few different ways to communicate between parent/child. However, there is an issue that arises when trying to use <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/output/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/output">@output</a> event emitters with recursive components (i.e. of the same type) - the <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/output/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/output">@output</a> emitter property is supposed to map to the listener on the parent; however, since the parent is of the same type, it can't do that (you get duplicate declaration errors).</p>
<p dir="auto">A good example is a menu that has collapsible/nestable children - they're all of the same type.</p>
<p dir="auto">Maybe I'm wrong but I'm having trouble of finding a way to do this.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
The ability to set a listener target from the child, or alias/rename the output parameter. Basically, not have them have to map to the same property so that this method could be used with recursive types.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
This isn't a bug as much as it is a design problem. I'm unsure how to use the other methods laid out, because they don't seem to match what I'm looking to do or are overly complex (and therefore frustrating) for something as simple as the equivalent of NG1's $emit.</p>
<p dir="auto"><em>Most options are parent-&gt;child flow, and I need child-&gt;parent</em><br>
-Input bindings<br>
-Input property change interception<br>
-ngOnChanges<br>
-Parent interacts with child via a local variable</p>
<p dir="auto"><em>The remaining child-&gt;parent options seem overly complex or impossible</em><br>
-Parent calls a ViewChild (doesn't seem to work with recursive components since a component can't reference itself?)<br>
-Parent listens for child event - This is the only child-&gt;parent direction communication that I can see (outside of the service option, below) and is outlined as impossible above.<br>
-Parent and children communicate via a service -- Overly complex, and when it comes to referencing a chain of parents (think in the case of a nested menu structure), it becomes very difficult and you have to create an entire tracking system or something else complex to replace a simple event emitter.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
...This is already a section above (you might edit your template)....</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Nesting components into themselves is a common thing in user interfaces. Sometimes you need recursion; it makes sense to have child-parent signals/events/whatever work in an easy/intuitive way. <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/output/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/output">@output</a> bindings are awesome until rendered useless by this quirk :(</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Mac OSX 10.11.3</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.1</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5 | Dart]</li>
</ul>