Getting element after ion-segment change


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.loadMap(this.mapElement, this.mapFilter);
// Gives the error "Cannot read property 'nativeElement' of undefined".

Does anyone know why this is?


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


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.


The ionChange method seems to get called early.


Do you know what it could be @mhartington ?


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

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

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