refreshing GoogleMap on Angular 2 which is on a hidden component

Question

Here is my problem : Maps inside a hidden div are not shown

possible solution :

<div [hidden]="!showMap">
    <sebm-google-map #myMap></sebm-google-map>
</div>
<button (click)="showMap = true; myMap.triggerResize()">resize</button>

This could work with a simple 1 variable, in my case I have dynamic creation of theses div, so i cannot point to #myMap so easily

Answer 1

This is for calling triggerResize() on all <sebm-google-map> elements:

<div *ngFor="let item of items"> <!-- just some ngFor for demo -->
  <button #myMap (click)="showMap = true; doTriggerResize()">resize</button>
</div>

@ViewChildren('myMap') viewChildren:QueryList;

doTriggerResize() {
  this.viewChildren.toArray().forEach((e) {
    e.triggerResize();
  });
}