title: Passing Input while creating Angular 2 Component dynamically using ComponentResolver
body: <p>I am able to load a dynamic Angular 2 component using ComponentResolver and ViewContainerRef.</p>
  
  <p>However I am not able to figure out how to pass any input variable of child component into this.</p>
  
  <p><strong>parent.ts</strong></p>
  
  <pre><code>    @Component({
       selector: "parent",
       template: "&lt;div #childContainer &gt;&lt;/div&gt;"
      })
      export class ParentComponent {
        @ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef;
  
        constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}
  
        loadChild = (): void =&gt; {
             this._cr.resolveComponent(Child1Component).then(cmpFactory =&gt; {               
                this.childContainer.createComponent(cmpFactory);
             });
        }
      }
  </code></pre>
  
  <p><strong>child1</strong></p>
  
  <pre><code> @Component({
     selector: "child1",
     template: "&lt;div&gt;{{var1}}&lt;/div&gt;&lt;button (click)='closeMenu()'&gt;Close&lt;/button&gt;"
   })
   export class Child1Component {
      @Input() var1: string;
      @Output() close: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
  
      constructor() {}
  
      closeMenu = (): void =&gt; {
        this.close.emit("");
      }
   }
  </code></pre>
  
  <p>so in above example say <code>loadChild</code> is being called on a button click, I am able to load Child1Component, but how to pass <code>var1</code> Input of child?
  Also How to subscribe to <code>close</code> EventEmitter decorated with <code>@Output</code></p>