<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] feature request"><pre class="notranslate"><code class="notranslate">[x] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently we have two ways to work with forms:</p>
<ol dir="auto">
<li>Declarative with <code class="notranslate">ngModel</code>:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//user.component.html:
&lt;form&gt;
   &lt;input name=&quot;name&quot; type=&quot;text&quot; [ngModel]=&quot;user?.name&quot; (ngModelChange)=&quot;user==null || user.name=$event&quot; required/&gt;
&lt;/form&gt;

//user.component.ts:
this.user = user;"><pre class="notranslate"><code class="notranslate">//user.component.html:
&lt;form&gt;
   &lt;input name="name" type="text" [ngModel]="user?.name" (ngModelChange)="user==null || user.name=$event" required/&gt;
&lt;/form&gt;

//user.component.ts:
this.user = user;
</code></pre></div>
<p dir="auto">You can clearly see that it can be quite verbose. Name has to be specified two or three times, elvis operator does not work with assignments. This example is simplified, see how ugly it could be:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;input&quot; label=&quot;La Carte Attorney Confirmed Claim Task Set: &quot; name=&quot;laCarteAttorneyConfirmedClaimTaskSet&quot; type=&quot;search&quot; [ngModel]=&quot;department?.laCarteAttorneyConfirmedClaimTaskSet&quot; (ngModelChange)=&quot;department==null || department.laCarteAttorneyConfirmedClaimTaskSet=$event&quot; [dataProvider]=&quot;claim&quot; labelField=&quot;name&quot; trackBy=&quot;id&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="input" label="La Carte Attorney Confirmed Claim Task Set: " name="laCarteAttorneyConfirmedClaimTaskSet" type="search" [ngModel]="department?.laCarteAttorneyConfirmedClaimTaskSet" (ngModelChange)="department==null || department.laCarteAttorneyConfirmedClaimTaskSet=$event" [dataProvider]="claim" labelField="name" trackBy="id"&gt;&lt;/div&gt;
</code></pre></div>
<ol start="2" dir="auto">
<li>Reactive, manually building <code class="notranslate">FormGroup</code>:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//user.component.html:
&lt;form [formGroup]=&quot;group&quot;&gt;
   &lt;input formControlName=&quot;name&quot; type=&quot;text&quot; /&gt;
&lt;/form&gt;

//user.component.ts:
public group:FormGroup;

this.group = this.createFormGroup();

createFormGroup() {
    let group: any = {};
    group['name'] = new FormControl('', Validators.required);
    return new FormGroup(group);
}

group.updateValue(user);"><pre class="notranslate"><code class="notranslate">//user.component.html:
&lt;form [formGroup]="group"&gt;
   &lt;input formControlName="name" type="text" /&gt;
&lt;/form&gt;

//user.component.ts:
public group:FormGroup;

this.group = this.createFormGroup();

createFormGroup() {
    let group: any = {};
    group['name'] = new FormControl('', Validators.required);
    return new FormGroup(group);
}

group.updateValue(user);
</code></pre></div>
<p dir="auto">It is even more verbose - name has to be specified twice, most of time in two separate files, <code class="notranslate">FormGroup</code> is created manually. This is particularly annoying  when form has many inputs.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Can't we take best from both? We already have all necessary information to create <code class="notranslate">FormGroup</code> from markup.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//user.component.html:
&lt;form&gt;
   &lt;input formControlName=&quot;name&quot; type=&quot;text&quot; required/&gt;
&lt;/form&gt;

//user.component.ts:
ViewChild(FormGroupDirective)
private group:FormGroupDirective;

group.updateValue(user);"><pre class="notranslate"><code class="notranslate">//user.component.html:
&lt;form&gt;
   &lt;input formControlName="name" type="text" required/&gt;
&lt;/form&gt;

//user.component.ts:
ViewChild(FormGroupDirective)
private group:FormGroupDirective;

group.updateValue(user);
</code></pre></div>
<p dir="auto">This is much cleaner, shorter, less error prone.</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>
The documentation for ngComponentOutlet as well as the comments at the top of the source code seem to indicate that one of the properties is ngComponentOutletProviders where it is possible to specify individual providers.</p>
<p dir="auto"><a href="url">https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_component_outlet.ts#L25-L26</a></p>
<p dir="auto">It appears from looking at the source code that this feature has not been implemented (I was banging my head against my desk trying to figure out why it didn't work until I read the angular source code).</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Documentation matches current functionality</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { MyDynamicComponent } from './my-dynamic.component';

@Component({
    selector: 'parent-of-dynamic-component',
    template: '&lt;ng-container *ngComponentOutlet=&quot;myDynamicComponent; providers: myProvider;&quot;&gt;&lt;/ng-conatiner&gt;'
})
export class ParentOfDynamicComponent {
    myDynamicComponent = MyDynamicComponent;
    myProvider = [ { provide: 'THING', useValue: { thing: 'thing' } ];
}"><pre class="notranslate"><code class="notranslate">import { MyDynamicComponent } from './my-dynamic.component';

@Component({
    selector: 'parent-of-dynamic-component',
    template: '&lt;ng-container *ngComponentOutlet="myDynamicComponent; providers: myProvider;"&gt;&lt;/ng-conatiner&gt;'
})
export class ParentOfDynamicComponent {
    myDynamicComponent = MyDynamicComponent;
    myProvider = [ { provide: 'THING', useValue: { thing: 'thing' } ];
}
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
It causes a lot of confusion when the documentation states certain functionality that doesn't exist.  It would be a convenient feature to have, but it's easy to work around by creating an injector with your provider.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
N/A</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
4.0.2</p>
</li>
<li>
<p dir="auto"><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 ]</p>
</li>
</ul>

<p dir="auto">All</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
All</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</li>
</ul>