Angular, get ViewChild / ViewContainerRef from dynamic created Component

Question

is there a way to get the ViewContainerRef from a dynamic created component? My dynamic created component has an ngContent element inside, which i want to fill after the dynamic creation.

export class Example {

  @ViewChild('content', { read: ViewContainerRef }) //normal way
  content: ViewContainerRef;

...

  ngAfterViewInit(){
    let box1=this.content.createComponent(this.boxFactory);
    box1.instance.title="Dynamic (1)";
    // HERE: the box1 has a ng-content area which i want to fill.
  }

}

I think about some manual way to resolve the ViewChild instead of using the decorators. Some Ideas?

Thanks a lot.

jay · Accepted Answer · 2017-12-11 10:33:41Z

2

I am not sure as well how to add viewchild dynamically. however, if dynamic ViewContainerRef is what you want, you can try using this solution:

in the html file create:

  <div id="test"></div>

in your component create:

 let nodeElement = document.getElementById("test");
      let compFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
      let component = compFactory.create(this.viewContainerRef.injector, null, nodeElement);

answered Dec 11, 2017 at 10:33

jay

1,1955 gold badges18 silver badges42 bronze badges

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

Comments

Sachin Chillal · Accepted Answer · 2022-03-22 12:16:35Z

0

Dynamically Created Component

export class DashPanelComponent implements OnInit {

  @ViewChild('dashpanelpos', { read: ViewContainerRef }) dashPanelPosition?: ElementRef;

  constructor() { }
  ngOnInit() {  }

}

To access ViewContainerRef

this.dashPanel = this.renderComp({}, this.contentMappings["dash_panel"], container);
this.viewContainerRef = this.dashPanel.instance["dashPanelPosition"]);

dashPanelPosition is instance of DashPanelComponent.

answered Mar 22, 2022 at 12:16

Sachin Chillal

5695 silver badges12 bronze badges

Comments

Jan Clemens Stoffregen · Accepted Answer · 2018-02-21 09:12:39Z

-1

Your question can be answered if you read those two articles, it solved it for me:

https://blog.angularindepth.com/here-is-how-to-get-viewcontainerref-before-viewchild-query-is-evaluated-f649e51315fb

https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

The second article contains working angular examples on Github where you can check out working examples of dynamically created Components in 4 different ways.

answered Feb 21, 2018 at 9:12

Jan Clemens Stoffregen

89710 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular, get ViewChild / ViewContainerRef from dynamic created Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related