Handle @Input and @Output for dynamically created Component in Angular 2
<p>How to handle/provide <code>@Input</code> and <code>@Output</code> properties for dynamically created Components in Angular 2?</p>

<p>The idea is to dynamically create (in this case) the <em>SubComponent</em> when the <em>createSub</em> method is called. Forks fine, but how do I provide data for the <code>@Input</code> properties in the <em>SubComponent</em>. Also, how to handle/subscribe to the <code>@Output</code> events the SubComponent provides?</p>

<p><strong>Example:</strong>
(<em>Both components are in the same NgModule</em>)</p>

<p><em>AppComponent</em></p>

<pre><code>@Component({
  selector: 'app-root'
})  
export class AppComponent {

  someData: 'asdfasf'

  constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }

  createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.changeDetectorRef.detectChanges();
    return ref;
  }

  onClick() {
    // do something
  }
}
</code></pre>

<p><em>SubComponent</em></p>

<pre><code>@Component({
  selector: 'app-sub'
})
export class SubComponent {
  @Input('data') someData: string;
  @Output('onClick') onClick = new EventEmitter();
}
</code></pre>