CODEWITHSUNDEEP
angularangular8
POV
POV

Reputation: 12025

How to get access to properties in child component in Angular?

I create dynamically a child component this.data.component using resolveComponentFactory:

export class MyDialogComponent implements OnInit, OnDestroy {
  @ViewChild("target", { static: true , read: ViewContainerRef}) viewContainerRef: ViewContainerRef;

  componentRef: ComponentRef<any>;

  constructor(
    private resolver: ComponentFactoryResolver,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(this.data.component);
    this.componentRef = this.viewContainerRef.createComponent(factory);
  }

  ngOnDestroy() {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

Child component looks:

@Component({
  selector: "simple-dict-word-dialog",
  templateUrl: "./dictionarySimpleWord-dialog.component.html"
})
export class DictionarySimpleDialogComponent {

}

How to get access in child component to object this.data?

I tried this:

const factory = this.resolver.resolveComponentFactory(this.data.component);
this.componentRef = this.viewContainerRef.createComponent(factory);
this.componentRef.instance.type = "ok";
this.componentRef.instance.mode = {id: 1};

And my child component is:

export class DictionarySimpleDialogComponent implements OnInit {
  @Input() model: ClassificatorOrganizations;
  @Input() type: string;

  ngOnInit() {
    console.log(this.type);
    console.log(this.model);
  }
}

So, I can not get:

console.log(this.type);
console.log(this.model);

They are empty

Upvotes: 0

Views: 117

Answers (1)

Gosha_Fighten
Gosha_Fighten

Reputation: 3868

ComponentRef has the instance property that is your child component instance. You can pass your data to it as provided in Angular 2 dynamically add component instance into container.

Upvotes: 1

Related Questions