Problem with 'display:none' style

[HarelM]

I'm using angular material. In that I'm using accordion. in the accordion, I'm using a map. The problem is that the accordion uses css display:none in order to hide its items and it seems there's an issue with it using this library. See here - I've used a simple toggle button to demonstrate the issue. https://stackblitz.com/edit/ngx-openlayers-196

The workaround is to use *ngIf...

[TalosProgramming]

Hi, did you use @angular/material accordeon ? If so it seems to work with the expansion panel.

https://stackblitz.com/edit/ngx-openlayers-material-panel

If not, I had a similar problem with the stepper : It changes the display on the ngAfterContentInit lifecycle hook, and if the map is loaded at the wrong 'moment', the component.ts gets loaded without the template, wich makes the binding fail because of how openlayers is loaded.

I had to use the animationDone @Output to load the component hosting the map (with material expansion panel there is an afterExpand @Output):

(animationDone)="loadContent()"

canDisplayMap = false;
loadContent() {
    this.canDisplayMap = true;
}

<component-hosting-map *ngIf="canDisplayMap"></component-hosting-map>

BUT sometimes you don't have a nice event to tell you when you can load the map, so, you can tell your 'component-hosting-map' to send an event :

@Output() mapLoadedEvent = new EventEmitter<boolean>()
ngAfterViewChecked() {
  <Observable<Event>>fromEvent(<any>this.map.instance, 'postcompose').pipe(take(1)).subscribe(() => 
  {
    this.mapLoadedEvent.emit(true);
  });
}

<component-hosting-map *ngIf="canDisplayMap" (mapLoadedEvent)="canDisplayMap = $event"></component-hosting-map>

This is not the cleanest way to process, we planned to be looking for a better way to handle this case at some point, I'll keep you posted on this if we fint a better way.