Angular 4 - Google map height fill remaining space

Question

I am using https://github.com/SebastianM/angular-google-maps in my angular 4 application.

I must specify map height in CSS, like this, otherwise, map won't show:

agm-map {
  height: 300px;
}

Is it possible for <agm-map> to fill remaining space in parent container?

PS: i would prefer solution using https://github.com/angular/flex-layout

Answer 1

You could use a template ref to get the height of the map's parent element and set the map's height that way.

    <div class="container" fxLayout="column">
      <div class="map" fxFlex="1 1 100%" #map>
        <agm-map [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-map>
      </div>
    </div>