ionChange and ionSelect are fired before event is completed?

I’m struggling with putting a map on a second segment. It’s a typical problem, and I’ve found several solutions, but they don’t work for me because the events seem to get fired before the segment is build completely. I don’t know if this is because of a breaking change in Ionic, or because I am doing it wrong.


  <ion-segment [(ngModel)]="view" (ionChange)="changeSegment()">
    <ion-segment-button value="list">
      <ion-icon name="list-box" isActive="false"></ion-icon>
    <ion-segment-button value="map" (ionSelect)="selectMap()">
      <ion-icon name="map" isActive="false"></ion-icon>

<ion-content [ngSwitch]="view">
  <div *ngSwitchCase="'list'"></div>
  <div *ngSwitchCase="'map'">
    <div id='map'>Here the map comes.</div>


import {Component} from "@angular/core";

  templateUrl: 'build/pages/page/page.html'
export class Timeline {
  constructor() {
    this.view = "list";
    this.selectMap = function() {
      console.log("selectMap:", document.getElementById("map"));
    this.changeSegment = function() {
      console.log("changeSegment:", document.getElementById("map"));

(Yeah, that project is using JavaScript, not TypeScript.)

With both the change and the select events, on first click they return “null” for the map element, and only on a second click they return the correct element.

To me it looks like the events are fired before the segment is complete. (But I may just as well be making a stupid beginners mistake…)

Nobody who can help? :cry: