Angular2 calling custom function after ngSwitch new view is created

Question

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

Answer 1

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.

Answer 2

There is no built-in support of calling a function when ngSwitch adds/removes elements.

I would create a directive that calls the function when created (for example in ngOnInit()) or emits an event where an event handler can be bound to, and apply it to the component that is added when the ngSwitch branch is enabled.

If ngSwitch adds a component you can implement it in this component as well (depends on your requirements)

update

    <ion-list (onCreate)="doSomething()" *ngSwitchCase="'list'">
       Listing
    </ion-list>

@Directive(selector: '[onCreate]')
export class OnCreate implements OnInit {
  @Output() onCreate:EventEmitter = new EventEmitter();

  ngOnInit() {
    this.onCreate.emit('dummy');
  }
}

Plunker example

Answer 3

You can also call a function when ion-segment is changed.

<ion-segment [(ngModel)]="homeSegment" (ionChange)="updatePage(homeSegment)">

and in your component a function like

updatePage(homeSegment) {
  if (homeSegment === 'map') {
    this.loadMap();
  }
}

Maybe this helps someone.