title: Cannot read property 'createComponent' of undefined using ViewContainerRef
body: <p>I'm trying to inject dynamicaly a componant to a parent location using @ViewChild but I'm getting error:</p>
  
  <blockquote>
    <p>Cannot read property 'createComponent' of undefined</p>
  </blockquote>
  
  <p>on the ReferenceTableComponent componant where I'm trying to inject I have</p>
  
  <pre><code>@Component({
  selector: 'app-reference-table',
  templateUrl: './refTable.component.html',
  styleUrls: ['./refTable.component.scss']
  })
  export class ReferenceTableComponent implements OnInit {
  
  observable: Observable&lt;any&gt;;
  
  @ViewChild('selectorTarget', {read: ViewContainerRef}) selectorTarget;
  
  // colors
  @Input() public datas: Array&lt;string&gt;;
  
  public availableColors: Array&lt;string&gt;;
  
  @Input() public nextRow: Array&lt;string&gt;;
  
  //tailles
  @Input() public headList: Array&lt;string&gt;;
  
  public rows: Array&lt;any&gt; = [{}];
  
  public rowIDs: Array&lt;any&gt; = [];
  
  constructor(private _cr: ComponentFactoryResolver, private _viewContainerRef: ViewContainerRef) {
  
  }
  ngOnInit() {
      this.computeAvailableColors();
  }
  
  addRow() {
      console.log('this.availableColors 2: ', this.availableColors)
      this.rows.push({});
  }
  
      computeAvailableColors() {
      this.availableColors = _.concat([''], this.datas);
      this.rowIDs  = _.map(this.rows, 'color')
      this.availableColors = _.difference(this.availableColors, this.rowIDs);
      const select: ComponentRef&lt;SelectOptionsComponent&gt; =
          this.selectorTarget.createComponent(
              this._cr.resolveComponentFactory(SelectOptionsComponent)
          );
  
      select.instance.availableColors = this.availableColors;
      select.instance.row = this.rows[0];
  }
  </code></pre>
  
  <p>on the componant html I have </p>
  
  <pre><code>&lt;td onSelectColor($event) #selectorTarget&gt;
              &lt;/td&gt;
  </code></pre>
  
  <p>the component I'm trying to inject</p>
  
  <pre><code>@Component({
  selector: 'kia-select-options',
  template: `&lt;div&gt;&lt;select [(ngModel)]="row.color" (ngModelChange)="sendColorEvent(row, $event)"&gt; 
                  // value is a string or number
                  &lt;option *ngFor="let obj of availableColors"&gt;{{obj}}&lt;/option&gt;
             &lt;/select&gt;&lt;/div&gt;`
  })
  export class SelectOptionsComponent {
  
  // couleurs
  @Input() public availableColors: Array&lt;string&gt;;
  
  @Input() public row: {};
  
  public color: string;
  
  @Output()
  public changed = new EventEmitter();
  
  constructor(private injector: Injector) {
  }
  
  sendColorEvent(row, color) {
      console.log(event)
      this.changed.emit({ color: color, row: row });
  }
  }
  </code></pre>
  
  <p>Knowing that ReferenceTableComponent is it self lodaded dynamicaly from a parent componant using, and it's working fine</p>
  
  <pre><code>  @ViewChild('target', {read: ViewContainerRef}) target;
    const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent);
    const ref = this.target.createComponent(factory);
  </code></pre>