Getting element after ion-segment change

#1

I have a page with ion-segment, one of the segments is a google map.
When the segment changes it removes my map element from the dom so I need to get it every time the map segment is loaded, this was working fine before but now it seems that when I try and grab the element on ionChange=“segChange()” the element isn’t there in time.
I have temporarily fixed this with a setTimeout, this has happened since upgrading to beta10 and updating ngSwitchWhen to ngSwitchCase.

@ViewChild('gmap') map:ElementRef;

segChange(e) {
    if (e.value === 'map') {
        this.mapElement = this.map.nativeElement;
        this.loadMap(this.mapElement, this.mapFilter);
    }
  }
// Gives the error "Cannot read property 'nativeElement' of undefined".
#2

Does anyone know why this is?

#3

Well, first things first, can you correctly log out the value of the DOM element?

#4

not without adding a setTimeout, but if I add a setTimeout with the value of 0 it also works but I only noticed this since beta 10 and using switch case.

#5

The ionChange method seems to get called early.

#6

Do you know what it could be @mhartington ?

#7

I’d venture a slightly different approach that you

  1. create a component for you map and encapsulate the logic there
  2. in the template that renders ion-segment, do something like
<ion-segment>
...
</ion-segment>

<div *ngSwitch....>
  <div *ngSwitchWhen="map">
    <MyMap [foo]="nar"></MyMap>
  </div>
... 

The reason is that I believe on tab change, ion-segment automatically re-renders the tab to be current.