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

[ ] bug report
[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

As discussed in #8817, there is currently no convenient way to render a dynamic component. viewContainerRef.createComponent is too low-level for most use cases and requires to implement the update and destroy hook manually. This likely leads to bugs as well as suboptimal performance.

Expected/desired behavior

I suspect that createComponent will mostly be used to render a dynamic component at a certain position of a template. If this assumption holds true, then the same behaviour could be achieved with html code like the following:

<template [ngComponent]="componentClass"
    [prop1]="propValue1"
    [ngProperties]="propertyValues">

When the code above is rendered, it would first resolve the component for the componentClass and instantiate the component. Then it would set all the regular properties. Since some properties may not be known at compile time, it would also be possible to provide an object with additional properties. At the end, the component is added directly to the DOM (without a wrapper element).

This could then also be used to render a list of dynamic components like this:

<template
    *ngFor="let c of components"
    [ngComponent]="c.componentClass"
    [prop1]="c.propValue1"
    [ngProperties]="c.propertyValues">

Whenever the component class changes, the current component would replaced with a component instance of the new type.

I have chosen <template> for the placeholder because the placeholder itself must not be added to the DOM. I am not sure if this is the ideal element for the placeholder though.

This proposal could also be used as a replacement for ngInclude (#7596 and #2753).