Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with 'display:none' style #196

Open
HarelM opened this issue Oct 1, 2018 · 1 comment
Open

Problem with 'display:none' style #196

HarelM opened this issue Oct 1, 2018 · 1 comment

Comments

@HarelM
Copy link
Contributor

HarelM commented Oct 1, 2018

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
Copy link

TalosProgramming commented Apr 5, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants