title: Angular 2: Load component dynamically with parameters @Input and @Output
body: <p>Currently I'm loading some of my components dynamically with this piece of code.</p>
  
  <pre><code>export class ComponentOutlet {
  
      constructor(
          private vcRef: ViewContainerRef,
          private compiler: Compiler,
          private dataService: DataService
      ) { }
  
      private _createDynamicComponent() {
  
          // Some logic to decide which component should be loaded
          return MyComponent;
      }
  
  
      ngOnChanges() {
  
          this.compiler.compileComponentAsync(this._createDynamicComponent())
              .then(factory =&gt; {
                  const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
                  this.vcRef.clear();
                  this.vcRef.createComponent(factory, 0, injector);
              });
      }
  </code></pre>
  
  <p>The problem is that <code>MyComponent</code> has some <code>@Input</code> and <code>Output</code> bindings. Is it possible to set this bindings here? How can I achieve that?</p>