title: Handle @Input and @Output for dynamically created Component in Angular 2
body: <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>