<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>
Currently when you use <code class="notranslate">NgComponentOutlet</code> you cant access created component for "binding". So it can be used only for displaying dynamic components, but not for interaction with them.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
It would be nice to have option how to retrieve created component instance from this directive.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Be able to use dynamic declarative component creation with full access to created component for "binding".</p>
<p dir="auto"><strong>Suggested solution</strong><br>
There are two possible ways as far as i see it :).<br>
I. Use of <code class="notranslate">Output</code><br>
first change directive to generic</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class NgComponentOutlet&lt;TComponent&gt; implements OnChanges, OnDestroy "><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">NgComponentOutlet</span><span class="pl-c1">&lt;</span><span class="pl-smi">TComponent</span><span class="pl-c1">&gt;</span> <span class="pl-k">implements</span> <span class="pl-smi">OnChanges</span><span class="pl-kos">,</span> <span class="pl-smi">OnDestroy</span> </pre></div>
<p dir="auto">then add</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Output()
public ngComponentOutletCreated: EventEmitter&lt;TComponent&gt; = new EventEmitter&lt;TComponent&gt;();"><pre class="notranslate">@<span class="pl-smi">Output</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">public</span> <span class="pl-s1">ngComponentOutletCreated</span>: <span class="pl-smi">EventEmitter</span><span class="pl-kos">&lt;</span><span class="pl-smi">TComponent</span><span class="pl-kos">&gt;</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">EventEmitter</span><span class="pl-kos">&lt;</span><span class="pl-smi">TComponent</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and after component has been created by <code class="notranslate">_viewContainerRef.createComponent</code> <code class="notranslate">emit</code> new component.</p>
<p dir="auto">II. Add exportAs and public getter for instance of <code class="notranslate">Component</code><br>
first change directive to generic and add exportAs</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Directive({selector: '[ngComponentOutlet]', exporAs: 'ngComponentOutlet'})
export class NgComponentOutlet&lt;TComponent&gt; implements OnChanges, OnDestroy "><pre class="notranslate">@<span class="pl-smi">Directive</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">selector</span>: <span class="pl-s">'[ngComponentOutlet]'</span><span class="pl-kos">,</span> <span class="pl-c1">exporAs</span>: <span class="pl-s">'ngComponentOutlet'</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-smi">NgComponentOutlet</span><span class="pl-c1">&lt;</span><span class="pl-smi">TComponent</span><span class="pl-c1">&gt;</span> <span class="pl-k">implements</span> <span class="pl-smi">OnChanges</span><span class="pl-kos">,</span> <span class="pl-smi">OnDestroy</span> </pre></div>
<p dir="auto">then add public getter</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    public get component(): TComponent
    {
        if(!this._componentRef)
        {
            return null;
        }

        return this._componentRef.instance;
    }"><pre class="notranslate">    <span class="pl-k">public</span> <span class="pl-s1">get</span> <span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">TComponent</span>
    <span class="pl-kos">{</span>
        <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_componentRef</span><span class="pl-kos">)</span>
        <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>

        <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_componentRef</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<p dir="auto">Or implement both solutions, because they can work together well.</p>
<p dir="auto">Both of these solutions are working, but you cant use <code class="notranslate">&lt;ng-container *ngComponentOutlet="comp"&gt;</code> syntax, since i havent figured out how to use "output" binding for <code class="notranslate">*ngComponentOutlet</code> or how to use <code class="notranslate">#myComponent="ngComponentOutlet"</code> with this syntax.</p>
<p dir="auto">I had to change it to <code class="notranslate">&lt;ng-template [ngComponentOutlet]="comp"&gt;</code> and you can then use "output" binding and also reference with "exportAs" for obtaining directive using <code class="notranslate">ViewChild</code>.</p>
<p dir="auto">Thank you</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, VSCode 1.11.1</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.0.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.2.1]</p>
</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="[ ] 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>