kyserslick kyserslick - 4 months ago 22
TypeScript Question

Cannot read property 'createComponent' of undefined using ViewContainerRef

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 Source

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

ngAfterViewInit() {
    this.computeAvailableColors();
}