Cannot read property 'createComponent' of undefined using ViewContainerRef

Question

I'm trying to inject dynamicaly a componant to a parent location using @ViewChild but I'm getting error:

Cannot read property 'createComponent' of undefined

on the ReferenceTableComponent componant where I'm trying to inject I have

@Component({
selector: 'app-reference-table',
templateUrl: './refTable.component.html',
styleUrls: ['./refTable.component.scss']
})
export class ReferenceTableComponent implements OnInit {

observable: Observable<any>;

@ViewChild('selectorTarget', {read: ViewContainerRef}) selectorTarget;

// colors
@Input() public datas: Array<string>;

public availableColors: Array<string>;

@Input() public nextRow: Array<string>;

//tailles
@Input() public headList: Array<string>;

public rows: Array<any> = [{}];

public rowIDs: Array<any> = [];

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<SelectOptionsComponent> =
        this.selectorTarget.createComponent(
            this._cr.resolveComponentFactory(SelectOptionsComponent)
        );

    select.instance.availableColors = this.availableColors;
    select.instance.row = this.rows[0];
}

on the componant html I have

<td onSelectColor($event) #selectorTarget>
            </td>

the component I'm trying to inject

@Component({
selector: 'kia-select-options',
template: `<div><select [(ngModel)]="row.color" (ngModelChange)="sendColorEvent(row, $event)"> 
                // value is a string or number
                <option *ngFor="let obj of availableColors">{{obj}}</option>
           </select></div>`
})
export class SelectOptionsComponent {

// couleurs
@Input() public availableColors: Array<string>;

@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 });
}
}

Knowing that ReferenceTableComponent is it self lodaded dynamicaly from a parent componant using, and it's working fine

  @ViewChild('target', {read: ViewContainerRef}) target;
  const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent);
  const ref = this.target.createComponent(factory);

Answer 1

@ViewChild() queries aren't available in ngOnInit() yet. Only when ngAfterViewInit() is called:

ngAfterViewInit() {
    this.computeAvailableColors();
}