<p dir="auto">As of today interacting with input and outputs of dynamically loaded components requires access to potentially "private" fields of a component. To illustrate it with a concrete example let's say that I want to load, using <code class="notranslate">DynamicComponentLoader</code>, a following component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'my-modal-content'
    template: `...`
})
export class MyModalContent {
    @Output() close = new EventEmitter();    
    ..    
}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'my-modal-content'</span>
    <span class="pl-s1">template</span>: <span class="pl-s">`...`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">MyModalContent</span> <span class="pl-kos">{</span>
    @<span class="pl-v">Output</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">close</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">EventEmitter</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>    
    <span class="pl-kos">.</span><span class="pl-kos">.</span>    
<span class="pl-kos">}</span></pre></div>
<p dir="auto">After loading, I would like to subscribe to the <strong>close</strong> event which sounds like an easy task:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="dcl.loadIntoLocation(content, this._elRef, 'content').then((componentRef) =&gt; {
    componentRef.instance.close.subscribe((closeEvent) =&gt; {
        ...
    });
});"><pre class="notranslate"><span class="pl-s1">dcl</span><span class="pl-kos">.</span><span class="pl-en">loadIntoLocation</span><span class="pl-kos">(</span><span class="pl-s1">content</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_elRef</span><span class="pl-kos">,</span> <span class="pl-s">'content'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">componentRef</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">componentRef</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-c1">close</span><span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">closeEvent</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        ...
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Unfortunately <strong>this method requires me to use <code class="notranslate">EventEmmiter</code>’s instance name instead of event name</strong>. Why this could be a problem? Well, nothing stops people from implementing <code class="notranslate">MyModalContent</code> like so:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'my-modal-content'
    template: `...`
})
export class MyModalContent {
    @Output('close') _close = new EventEmitter();    
    ..    
}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'my-modal-content'</span>
    <span class="pl-s1">template</span>: <span class="pl-s">`...`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">MyModalContent</span> <span class="pl-kos">{</span>
    @<span class="pl-v">Output</span><span class="pl-kos">(</span><span class="pl-s">'close'</span><span class="pl-kos">)</span> <span class="pl-c1">_close</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">EventEmitter</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>    
    <span class="pl-kos">.</span><span class="pl-kos">.</span>    
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>In this case the contract is broken as the only thing I should be knowing of is event name.</strong>. Instead I need to subscribe using a private field name (<code class="notranslate">_close</code>).</p>
<p dir="auto">cc: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/adamdbradley/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/adamdbradley">@adamdbradley</a> as discussed yesterday</p>
<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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>
There is no way to set <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/inputs/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/inputs">@inputs</a> or subscribe to <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> events of the Component created by <code class="notranslate">NgComponentOutlet</code>.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I expect some to set values and to subscribe events.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
At least, we should have the same level of functionality as <code class="notranslate">ViewContainerRef.createComponent()</code> which is roughly the programatic equivalent of <code class="notranslate">NgComponentOutlet</code>. That function returns a <code class="notranslate">ComponentRef&lt;any&gt;</code> which provides an instance property that allows direct access to the class instance of the Component. The original feature request for <code class="notranslate">NgComponentOutlet</code> defined an event on the directive that would fire and pass this <code class="notranslate">ComponentRef</code> object after creation. This did not make it into the current implementation and I see no other alternatives to access inputs/outputs.</p>
<p dir="auto">Supporting only Components with no inputs or outputs severely limits the usefulness of <code class="notranslate">NgComponentOutlet</code>.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.0-rc.1</li>
</ul>