adding angular component dynamically to new html element

Question

I have read about ViewContainerRef, ComponentFactoryResolver.

Basically:

put tag in your html
declare the following in your ts: @ViewChild('parent', { read: ViewContainerRef }) parent: ViewContainerRef;
instantiate your component using: const childComponent = this.componentFactoryResolver.resolveComponentFactory(ChildComponent ); this.parent.createComponent(childComponent);

However, it does not work on already exist in your html on your page load.

The problem is I am using a popup that is generated using google map api (the popup where it appears when you click somewhere on the map).

I need to put div parent tag after the popup appears

var infowindow = new google.maps.InfoWindow({
      // content: this.contentString
      content: " <div #parent></div>"
    });

Therefore I tried to bind it into onclick event on the popup as the following:

  marker.addListener('click', () => {
        infowindow.open(this.map, marker);
        const childComponent = this.componentFactoryResolver.resolveComponentFactory(CentreDetailsComponent);
        this.parent.createComponent(childComponent);
      });

However, it does not work as per the screenshot. Is it because of the div parent tag is not generated on page load? can someone please assist? Thx

Rahul VV Rahul VV · Accepted Answer · 2017-12-08T17:48:04

The best Solution is. You just go for AgmCore

npm install --save @agm/core

for that you need to add core module in your ngModule like :

import { AgmCoreModule } from '@agm/core';
@NgModule({
    imports: [
        AgmCoreModule.forRoot({
            apiKey: 'api_key_googlemap'
          })
    ]})

and your html view file will looks like

 <div  style="height: 700px; width: 100%;">
    <agm-map [latitude]="32.02" [longitude]="52.2" [zoom]="17">
        <agm-marker   [latitude]="52.2" [longitude]="32.02"   title="Name" >
           <agm-info-window  [isOpen]="true"  >
              <h6>Name</h6>
           </agm-info-window>                                                   
         </agm-marker>                
       </agm-map>
</div>

if you want click function in marker

<agm-marker (markerClick)="yourClickFunction()"></agm-marker>

Hope this will resolve your problem.

adding angular component dynamically to new html element

1 Answers