title: Not able to bind json data to dynamically loaded child component
body: <p>I am trying to dynamically load a child component from the parent component. From the parent component I need to pass some parameter to the child which would be used in the child component to make a service call and retrieve some data from WebAPI Service. the returned data should be bound to some input controls in the child component.</p>
  
  <p>for testing purpose I have created a plunker wherein I am loading a child component from the parent and I am trying to bind the input controls data from the JSON object which i have initialized locally. I am facing some issues here, the data is not getting bound here properly. </p>
  
  <p><a href="https://plnkr.co/edit/xROfBv?p=preview" rel="nofollow">Plunker</a> URL</p>
  
  <p>my child component code</p>
  
  <pre><code>import {Component, Input} from '@angular/core'
  import { FORM_DIRECTIVES } from '@angular/common';
  
  const SAMPLE: Sample[] = [
      { queueId: 11, name: 'Mr. Nice' },
      { queueId: 12, name: 'Narco' },
      { queueId: 19, name: 'Magma' },
      { queueId: 20, name: 'Tornado' }
  ];
  
  @Component({
    selector: 'load',
    directives: [FORM_DIRECTIVES],
    template:`&lt;h1&gt;This is from loader&lt;/h1&gt;
    &lt;input type="text" [(ngModel)]="resultData.queueId" /&gt;
  
    `
  })
  export class Loader{
      @Input() ParentID : any; 
     // resultData : any;
      resultData = SAMPLE;
      constructor()
      {
  
  
      }
  }
  
  
  export class Sample {
      queueId: number;
      name: string;
  }
  </code></pre>