CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3angular
somecallmemike
somecallmemike

Reputation: 441

Angular 2 Insert DOM into InfoWindow element that was created by Google Maps V3 api

I am working with the Google Maps V3 inside Angular 2 and I am currently attempting to find a solution for populating InfoWindows with bound links and input values. When an InfoWindow element is created it is a new DOM element and according to Angular 2 docs binding to a DOM element that did not exist on the initialization of the app is not supported. Is there a way to insert or inject bound elements into the newly created DOM, or have a pre-created element containing the bound elements that can be moved into the InfoWindow?

Upvotes: 1

Views: 1822

Answers (1)

Oleg Barinov
Oleg Barinov

Reputation: 1665

I guess, you should use dynamic components creation in this case. Just try smth like this in your service or component, which knows, when you have to render your content:

import {ComponentResolver, ComponentFactory, ComponentRef, ApplicationRef, Injector} from '@angular/core';

export class SomeServiceOrComponent {
  constructor(private resolver:ComponentResolver, private injector:Injector, private appRef:ApplicationRef) {
  }

  renderComponent() {
    return this.resolver
        .resolveComponent(YourDynamicComponentClass)
        .then((factory:ComponentFactory<YourDynamicComponentClass>) => {
            let cmpRef:ComponentRef<YourDynamicComponentClass> =
                factory.create(this.injector, null, '.infoWindowsDOMSelector');
            (<any>this.appRef)._loadComponent(cmpRef);
            return cmpRef;
        });
  }
}

and just call this method, whether you need it.

(<any>this.appRef)._loadComponent(cmpRef) is a trick from prev versions of RC, but maybe soon it should be resolved

Upvotes: 1

Related Questions