I have the following project with Angular using bootstap accordion. When the user click on the panel, the collapse panel will show a openstreet map but for some reason the map is not showing
https://stackblitz.com/edit/angular-jdbzhe
If i change the behavior to always show panel like so : class="collapse show" then the map is correctly initialized
Implementation https://getbootstrap.com/docs/4.1/components/collapse/
I'm not familiar with the library you're using for maps, but since you're not specifying the sizes anywhere I assume it autosizes the map element to fit the specified cotnainer.
Since your container's parent is set to display: none by the "collapse" class, the width and height will be unset, meaning the map will most probably have 0 width and 0 height.
I quickly checked the OL docs and it seems that you can use this.map.updateSize(); to update the map sizing based on it's container size. How and when to call it is up to you - in current implementation I'd say try listening to style changes on your app-map component.
One side advice - instead of using "classic" bootstrap try using one of more angular-friendly frameworks, which will provide you with events and methods, making working with the code much easier in the long run.
The problem comes from the fact that it has a display: none; on the area where the canvas is supposed to be rendered.
Add an map.updateSize() to it after you've expanded your accordion and it works!
Have a look at this working StackBlitz edit I did.
