angular - Change selected Tab after CRUD operation - Ionic2 -

the app simple workout entry tool. basic api call crud operations. app display

i can't reload workout tab after new entry created , stored database. able manipulate navcontroller set root display updated data it's under add workout tab. workouts updated in add workout tab when tab workout tab. displays result first image attached.

i presume because constructor , ngoninit initialized once. how can around this?

this code workout tab.

export class workoutpage {   navctrl;   workoutservice;   workouts;  static parameters() {     return [navcontroller, workoutservice]; }  constructor(navctrl, workoutservice) {   this.navctrl = navctrl;   this.workoutservice = workoutservice;   this.workoutservice.getworkouts().subscribe(workouts => {     this.workouts = workouts;   }) }  ngoninit() {   this.workoutservice.getworkouts().subscribe(workouts => {     this.workouts = workouts;   }) }  workoutselected(event, workout) {   this.navctrl.push(workoutdetailpage, {       workout: workout   }) } }   

this how setroot after new entry added database.

onsubmit() {   var workout = {     title: this.title,     note: this.note,     type: this.type    }    this.workoutservice.addworkout(workout)     .subscribe(data => {         this.result = data;     }, err => console.log(err),     () => console.log("workout added"));      this.navctrl.setroot(workoutpage); } 

i need way refresh data on workout page. appreciated.

you can using observable

edit: i've edited answer because instead of using observable syncing both components, need use observable able change selected tab once new item added.

since each tab has own nav history, can't use setroot() method inside 1 tab, because that's going set new page root of that tab instead of returning user other tab.

so idea use observable allow 1 of child components (the page inserts new item) tell parent component (the page contains both tabs) should change selected tab (in case, page shows list of items).

tabservice

import {injectable} '@angular/core'; import {observable} 'rxjs/observable';  @injectable() export class tabservice {     private tabchangeobserver: any;   public tabchange: any;    constructor(){     this.tabchangeobserver = null;     this.tabchange = observable.create(observer => {         this.tabchangeobserver = observer;     });   }    public changetabincontainerpage(index: number) {     this.tabchangeobserver.next(index);   } } 

so tabservice creates observable allow tabs container subscribe it, , declares changetabincontainerpage() method called child pages.

in tabspage, subscribe service, , change selected tab this.tabref.select(index);

import { component, viewchild } "@angular/core"; import { page1 } './page1.ts'; import { page2 } './page2.ts'; import { tabservice } 'tabservice.ts';   @component({   templateurl: 'tabs.html' }) export class tabspage {   @viewchild('mytabs') tabref: tabs;    tab1root: = page1;   tab2root: = page2;    constructor(private tabservice: tabservice){     this.tabservice.tabchange.subscribe((index) => {       this.tabref.select(index);     });   } } 

please notice we're getting reference tabs instance adding #mytabs in ion-tabs element, , component @viewchild('mytabs') tabref: tabs;

<ion-tabs #mytabs>   <ion-tab [root]="tab1root" tabtitle="tab 1"></ion-tab>   <ion-tab [root]="tab2root" tabtitle="tab 2"></ion-tab> </ion-tabs> 

then, thing left done call method when new item added list:

    // add new item     this.workoutservice.addworkout(this.newworkout)         .subscribe(           (data) => {              // reset form             this.newworkout = '';              // change selected tab             this.tabservice.changetabincontainerpage(0);           },            (err) => console.log(err),           () => console.log("workout added"));