I have a map div in angular component html: <div id="map" [ngStyle]="{'height.px': mapHeight}"></div> mapHeight is initialized to 600, and I have button that, once being clicked on, will change mapHeight from 600 to 300, and from 300 back to 600, etc. The map div size is changed just fine. However, how to make the content within the map, ie zoom level, center, etc to change accordingly with the div size? For example, if on size 600, I can see the full lake, but once shrink to size 300, I do not want to see half of the lake, I want the scale to change accordingly so that I can ALWAYS see the full lake (smaller full lake on smaller div, vice versa). How to do this in angular. My attempts: I used ngclass that linked to a css style, which also does not work. I found that only inline style with "height:300px" works for me. But as I said, I want it to respond to DOM ui change. Continue reading...
