feat(NgComponentOutlet): add NgComponentOutlet directive

Add NgComponentOutlet directive that can be used to dynamically create
host views from a supplied component.

Closes #11168
Takes over PR #11235

modules/@angular/examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngComponentOutlet', () => {
+  const URL = 'common/ngComponentOutlet/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-component-outlet-example', () => {
+    it('should render simple', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-simple-example');
+      expect(element.all(by.css('hello-world')).getText()).toEqual(['Hello World!']);
+    });
+
+    it('should render complete', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-complete-example');
+      expect(element.all(by.css('complete-component')).getText()).toEqual(['Complete: Ahoj Svet!']);
+    });
+  });
+});

modules/@angular/examples/common/ngComponentOutlet/ts/module.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, Injectable, Injector, NgModule, ReflectiveInjector} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+
+
+// #docregion SimpleExample
+@Component({selector: 'hello-world', template: 'Hello World!'})
+class HelloWorld {
+}
+
+@Component({
+  selector: 'ng-component-outlet-simple-example',
+  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
+})
+class NgTemplateOutletSimpleExample {
+  // This field is necessary to expose HelloWorld to the template.
+  HelloWorld = HelloWorld;
+}
+// #enddocregion
+
+// #docregion CompleteExample
+@Injectable()
+class Greeter {
+  suffix = '!'
+}
+
+@Component({
+  selector: 'complete-component',
+  template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
+})
+class CompleteComponent {
+  constructor(public greeter: Greeter) {}
+}
+
+@Component({
+  selector: 'ng-component-outlet-complete-example',
+  template: `
+    <ng-container *ngComponentOutlet="CompleteComponent; 
+                                      injector: myInjector; 
+                                      content: myContent"></ng-container>`
+})
+class NgTemplateOutletCompleteExample {
+  // This field is necessary to expose CompleteComponent to the template.
+  CompleteComponent = CompleteComponent;
+  myInjector: Injector;
+
+  myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
+
+  constructor(injector: Injector) {
+    this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector);
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `<ng-component-outlet-simple-example></ng-component-outlet-simple-example>
+             <hr/>
+             <ng-component-outlet-complete-example></ng-component-outlet-complete-example>`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [
+    ExampleApp, NgTemplateOutletSimpleExample, NgTemplateOutletCompleteExample, HelloWorld,
+    CompleteComponent
+  ],
+  entryComponents: [HelloWorld, CompleteComponent],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}