Angular 13: Dynamically insert a component into a specific DOM node

Question

I need to achieve something like in this question Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef

I got a task to use the plain google maps api within an angular/ionic project. I want to add a button as a custom control to the map, and I want to use ionic-button for this and not create the button completely in plain javascript/typescript.

But as ComponentFactoryResolver got deprecated in Angular 13, what would be the best way to do it.

HdcDst · Accepted Answer · 2022-03-22 19:01:16Z

1

I found myself the following solution. In the component where I include the google map the following template is used

<div class="mapcontainer" #mapContainer>
   <ng-template #btnTemplate>
    <ion-button class="map-button" (click)="onClick()"> 
      {{toggleButtonText}}
    </ion-button>
  </ng-template>
  <div class="loading-indicator">
    <ion-spinner name="crescent" *ngIf="!loaded" color="primary"></ion-spinner>
  </div>
</div>

As can be seen the ionic button is within a template that has a ref, so it is accessible as a view child in the angular component. And then to add the button to the google map I do the following in the typescript component code.

    const btnViewRef = this.btnTemplate.createEmbeddedView();
    this.app.attachView(btnViewRef);

     const btnContainer = document.createElement('div');
     for (const node of btnViewRef.rootNodes) {
       btnContainer.appendChild(node);
     }

     this.map.controls
      [this.googleField.maps.ControlPosition.TOP_LEFT].push(btnContainer);

answered Mar 22, 2022 at 19:01

HdcDst

412 silver badges4 bronze badges

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

2 Comments

HdcDst Over a year ago

@Eliseo This is the solution for my use case. But I still ask myself if there is also a solution to do it with a component class.

Kaminari Over a year ago

Have the same issue, so far I am using ComponentFactoryResolver as there doesn't seem to be a way to do it with new api :(

Collectives™ on Stack Overflow

Angular 13: Dynamically insert a component into a specific DOM node

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related