How to call custom function after ngSwitch new view is created

I am creating a small app using Angular2+Ionic2. In this app I want initialise google-map into view segment when user switch to the map-segment using ion-segment

Following is the sample code structure:

<ion-navbar *navbar class="hide-navbar">
    <ion-segment [(ngModel)]="homeSegment">
        <ion-segment-button value="list">
            List..
        </ion-segment-button>
        <ion-segment-button value="map" >
            Map
        </ion-segment-button>
    </ion-segment>
</ion-navbar>
<ion-content>
    <div [ngSwitch]="homeSegment" >
        <div *ngSwitchWhen="'map'">
            <div id="googleMap"></div>
        </div>
        <ion-list *ngSwitchWhen="'list'">
           Listing
        </ion-list>
    </div>
</ion-content>

I have tried by providing click listener for ion-segment-button, but that doesn’t worked out. Before div with id=“googleMap” is appended to DOM, functionality for adding map gets triggered, and which result a undefined error.

So, how we can understand when new elements are loaded when an ngSwitch happens? Whats the best way to do it?

@piccaza I was trying something similar. Did you manage to figure out a way?

Never mind, I used the change output event as in the docs: http://ionicframework.com/docs/v2/api/components/segment/Segment/#output-events

Simply add (change)="onSegmentChanged($event) to the ion-segment, then create a onSegementChanged method in your class. This will be called. The value of the segment will be passed in the event, so just check for ‘maps’ or whatever you called in your segment, and run your code accordingly.

2 Likes

You can use (select) on ion-segement-button to run custom function for the selected segment.

ion-segement-button

1 Like

Yes :relaxed: , see this SO item: https://stackoverflow.com/questions/36427670/angular2-calling-custom-function-after-ngswitch-new-view-is-created

Finally how I resolved this is by, by providing a (change)=“onSegmentChanged($event)” on ion-segment element.

Which will trigger whenever ion-segment will switch. And I am able to access the dom element with id googleMapAllFobs when its getting switched to value=“map”.

Provided a checking in onSegmentChanged function, before call load google map function, to ensure the current view contains div to load google map.

Looks very easy for this current requirement.

1 Like

Hi there, could you share your code with us? I’m still looking for a solution… my code is still not working, what I’m doing wrong?
This is my code:
.html:

<ion-header>
  <ion-navbar>
   <ion-segment [(ngModel)]="dashboard" (change)="onSegmentChanged($event)">
        <ion-segment-button value="list">
          Liste
        </ion-segment-button>
        <ion-segment-button value="map">
          Karte
        </ion-segment-button>
      </ion-segment>
  
  </ion-navbar> 
</ion-header>

<ion-content>
  <div [ngSwitch]="dashboard">

    <div *ngSwitchCase="'list'">
        some content...
    </div>
      
      <div *ngSwitchCase="'map'">
        <div #map id="map"></div>
      </div>

    </div>

.ts

 initMap() {

        let LatLng = new google.maps.LatLng(52.491114, 13.394625);

        let mapOptions = {
            center: LatLng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    }

    onSegmentChanged($event) {
        if ($event == 'map') {
            this.initMap();
         }
    }

.scss

  #map{
    height:100%;
  }

Would really appreciate, thank you!

I consider this template abuse. Templates are view layer animals that depict a state of affairs and accept input. ngSwitch is not a control flow concept, so trying to trigger component code actions from it does not make sense.

I’m not sure what you’re trying to say. But handling segments with ngSwitch is the common way (according to the ionic docs)

1 Like