Angular Cannot read property 'create' of undefined

Question

I'm using Angular 6 and I want to implement the dynamic addition of components according to the instructions, but I get an error: "Cannot read property 'create' of undefined."

component.html

<mat-card>
  <mat-card-header>
    <mat-card-title>...</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <ng-template answerHost></ng-template>
  </mat-card-content>
</mat-card>

component.ts

@ViewChild(AnswerHostDirective) answerHost: AnswerHostDirective;
private stepAnswerType1: ComponentFactory<StepAnswerType1Component>;
private stepAnswerType2: ComponentFactory<StepAnswerType2Component>;
private stepAnswerType3: ComponentFactory<StepAnswerType3Component>;

/* ... */

changeStep(id: number) {
    let viewContainerRef = this.answerHost.viewContainerRef;

    let componentRef;
    if (this.step.type == 1) {
      componentRef = viewContainerRef.createComponent(this.stepAnswerType1);
    }
    if (this.step.type == 2) {
      componentRef = viewContainerRef.createComponent(this.stepAnswerType2);
    }
    if (this.step.type == 3) {
      componentRef = viewContainerRef.createComponent(this.stepAnswerType3);
    }
}

directive

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[answerHost]'
})
export class AnswerHostDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

I tried to replace the directive with a reference to the component's id, but I get the same error. component.html

<mat-card>
  <mat-card-header>
    <mat-card-title>...</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <ng-template #answerContainer></ng-template>
  </mat-card-content>
</mat-card>

component.ts

@ViewChild('answerContainer', { read: ViewContainerRef }) answerContainer: ViewContainerRef;
private stepAnswerType1: ComponentFactory<StepAnswerType1Component>;
private stepAnswerType2: ComponentFactory<StepAnswerType2Component>;
private stepAnswerType3: ComponentFactory<StepAnswerType3Component>;

/* ... */

changeStep(id: number) {
    if (this.step.type == 1) {
      componentRef = this.answerContainer.createComponent(this.stepAnswerType1);
    }
    if (this.step.type == 2) {
      componentRef = this.answerContainer.createComponent(this.stepAnswerType2);
    }
    if (this.step.type == 3) {
      componentRef = this.answerContainer.createComponent(this.stepAnswerType3);
    }
}

What could be the problem?

Fixed I updated part of the code. component.ts

import { StepAnswerType1Component } from './step-answer-type1/step-answer-type1.component';
import { StepAnswerType2Component } from './step-answer-type2/step-answer-type2.component';
import { StepAnswerType3Component } from './step-answer-type3/step-answer-type3.component';

/* some code */

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

/* some code */

changeStep(id: number) {
    let componentRef, componentFactory;
    if (this.step.type == 1) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(StepAnswerType1Component);
    }
    if (this.step.type == 2) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(StepAnswerType2Component);
    }
    if (this.step.type == 3) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(StepAnswerType3Component);
    }
    componentRef = viewContainerRef.createComponent(componentFactory);
 }

Try changing ng-template with ng-container

Sandeep Kumar
– Sandeep Kumar

2018-09-28 07:45:05 +00:00
Commented Sep 28, 2018 at 7:45 — Sandeep Kumar
– Sandeep Kumar, Commented Sep 28, 2018 at 7:45
The same mistake.

al.koval
– al.koval

2018-09-28 09:15:11 +00:00
Commented Sep 28, 2018 at 9:15 — al.koval
– al.koval, Commented Sep 28, 2018 at 9:15

Suresh Kumar Ariya · Accepted Answer · 2018-09-28 07:40:46Z

1

Make sure you are calling this method 'changeStep' inside 'ngAfterViewInit()'.

answered Sep 28, 2018 at 7:40

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

al.koval Over a year ago

I tried to call the method changeStep from ngOninit and ngAfterViewInit. The result is the same.

Suresh Kumar Ariya Over a year ago

created a stack overflow and its working fine. stackblitz.com/edit/angular-material-with-angular-v5-eefxju

al.koval Over a year ago

Notice I'm using createComponent and Angular 6. Your example is CreativeEmbededViev and Angular 2.

Suresh Kumar Ariya Over a year ago

I am able to access all the public Method available for ViewContainerRef Instance Class. i.e clear(), createEmbeddedView(). Also createComponent() will also work.

Suresh Kumar Ariya Over a year ago

I have updated stackblitz with createComponent method

|

Collectives™ on Stack Overflow

Angular Cannot read property 'create' of undefined

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related