Issue 1:
I'm submitting a ... (check one with "x")

[x] feature request

Current behavior

Currently we have two ways to work with forms:

Declarative with ngModel:

//user.component.html:
<form>
<input name="name" type="text" [ngModel]="user?.name" (ngModelChange)="user==null || user.name=$event" required/>
</form>

//user.component.ts:
this.user = user;

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:

<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"></div>

Reactive, manually building FormGroup:

//user.component.html:
<form [formGroup]="group">
<input formControlName="name" type="text" />
</form>

//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);

It is even more verbose - name has to be specified twice, most of time in two separate files, FormGroup is created manually. This is particularly annoying when form has many inputs.

Expected behavior

Can't we take best from both? We already have all necessary information to create FormGroup from markup.

//user.component.html:
<form>
<input formControlName="name" type="text" required/>
</form>

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

group.updateValue(user);

This is much cleaner, shorter, less error prone.

Issue 2:
I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

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.

https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_component_outlet.ts#L25-L26

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).

Expected behavior

Documentation matches current functionality

Minimal reproduction of the problem with instructions

import { MyDynamicComponent } from './my-dynamic.component';

@Component({
selector: 'parent-of-dynamic-component',
template: '<ng-container *ngComponentOutlet="myDynamicComponent; providers: myProvider;"></ng-conatiner>'
})
export class ParentOfDynamicComponent {
myDynamicComponent = MyDynamicComponent;
myProvider = [ { provide: 'THING', useValue: { thing: 'thing' } ];
}

What is the motivation / use case for changing the behavior?

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.

Please tell us about your environment:

N/A

Angular version: 2.0.X

4.0.2

Browser: [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 ]

All

Language: [all | TypeScript X.X | ES6/7 | ES5]

All

Node (for AoT issues): node --version =