Can't get ngSwitch to work

Ionic Framework ionic-v3
1

Hello! I’m tryong to enable a 2D and a 3D view on a mapPage. With that I am going to use ion-segment
to swtich between the two. I followed the directives in the Ionic page. But when I start the app it either says that there are no providers for ngSwitch or it says that I have to add an ngModule annotation.

I tried impoting it both in the map.ts and app.module.ts and set it in the imports.
But it doesn’t work, what am I missing?

< map.html >

<!-- 2D // 3D SWITCH START -->
  <div padding>
    <ion-segment [(ngModel)]='mapView'>
      <ion-segment-button value='2D'>
        2D
      </ion-segment-button>

      <ion-segment-button value='3D'>
        3D
      </ion-segment-button>
    </ion-segment>
  </div>
  <!-- 2D // 3D SWITCH END -->

<div [ngSwitch="mapView"]>
      <div class='twoDMap' id='2Dmap' *ngSwitchCase="'2D'"></div>
      <div class='threeDMap' id='3Dmap' *ngSwitchCase="'3D'">testing switch</div>
  </div>
2

Hello, maybe I am wrong, but I do not know that all is closed by brackets

maybe

<div [ngSwitch]="mapView">

Best regards, anna-liebt

3

ahh that seems to be the devil, will try it as soon as I can! Thank you… :stuck_out_tongue:

4

Yes, that worked. But for some reason, when I load the page, it sets my first view as default, as I want it to. But when I then switch to 3D and switch back to 2D, the map disappears. So I had to hack it with a display:none/block way and ionSelect.

But I could miss something there as well, maybe, ngSwitch removes and sets and therefore it loses the connection between variables?

5

Hello,

without code its hard to see what maybe the proplem.

Have in mind, that, maybe I am wrong, ngswitch works like ngif, mean if “2D” then there is no element with id=‘3dmap’ in dom. If your variable mapView change, then it should change the cases. If ‘3D’ then there is no element with id=2Dmap’ in dom anymore.

Best regards, anna-liebt

6

Exactly, that’s what I suspected. Just hiding it with a method call on the switch works better in my case then :slight_smile: Thank you!