Ion events 2 ionChange fires until event ends

Question

I struggle with placing the card on the second segment. This is a typical problem, and I found several solutions, but they do not work for me, because events seem to fire before the segment is completely built. I do not know if this is due to a change in Ionic, or because I am doing it wrong.

page.html:

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

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

page.js:

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

@Component({
  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"));
    }
  }
}

(Yes, this project uses JavaScript, not TypeScript.)

On change and selection events, on the first click, they return "null" for the map element, and only on the second click do they return the correct element.

It seems to me that the events quit before the end of the segment. (But I might as well be mistaken as stupid newbies ...)

How do I know when an item is available #map?