Angular 6 - Rendering problems if BrowserAnimationsModule imported (Openlayers)

Question

I basically have a App which renders a small map. On this page is also a \"toggle\" button which hides the small map with a *ngIf in the parent component and displays the ma

Answer 1

You have to use ngAfterViewInit, then you can be 'sure' the element inside your components template is present in the DOM.

ngAfterViewInit() {
  this.map = new OlMap({
    target: 'map',
    layers: [new OlTileLayer({ source: new OlOSM() })],
    view: new OlView({ zoom: 13, center: fromLonLat([13.376935, 52.516181]) }),
    controls: []
  });
}

Answer 2

Here is a solution,

Component template

<div #mapElementRef class="map"></div>

Component class implements OnInit and has the next property

@ViewChild('mapElementRef') mapElementRef: ElementRef;

finally initialize the map on ngOnInit method, you can use

this.map.setTarget(this.mapElementRef.nativeElement);

Hope it helps.