Access objects from tabs page

Hi Guys ,
can any one tell me how i will get data from tabs pages .
For more details lets i clarify my query,
i have one tab data page which contain 4 tabs pages but as i given one submit button on tabdata page to send data to api
call. how can i access data from child pages .
i tried with view child page but it not working.

Thanks …!

maybe try using providers?

1 Like

@FnnHuman , yes i aware of services (providers), but its not giving result as i wants.
from tabs page 1 , i assigned value for variable but while accessing from tab contain page it showing null.

could you show me some code?

Tab data page

import { ChatService } from '../../providers/chat-service/chat-service';//import of chat service
@Component({
  templateUrl: 'build/pages/aircraft-tab-data/aircraft-tab-data.html',
  providers:[ChatService]//provider define 
})

export class AircraftTabDataPage {

 @ViewChild("aircrafttab") tabRef: Tabs;
//tabs define
  info = AircraftDetailsPage;
  Weight = AircraftWeightPage;
  equipment = AircraftEquipmentsPage;
  surveillance = AircraftSurveillancePage;
  performance = AircraftPerformancePage;
  attachment = AircraftAttachmentsPage;
//tabs define
  //  // selectedTabIndex: number = 1;
  tabsColor: string = "default";
  tabsMode: string = "md";
  tabsPlacement: string = "top";
//added instance of chat service to constructor 
  constructor(private navCtrl: NavController,private chatservice:ChatService) {
  
  }
  registerAircraft(){
    console.log("roshdfn");
    console.log(this.chatservice.aircraftdetails);//accesing variable from service file
  } 

child page where i modify aircraftdetails variable

import { Component } from '@angular/core';
import { NavController, ModalController, Events } from 'ionic-angular';
import { DataService } from '../../providers/data-service/data-service';
import { CustomSpinnerPage } from '../custom-spinner/custom-spinner';
import { SuggestStationPage } from "../suggest-station/suggest-station";
import { ChatService } from '../../providers/chat-service/chat-service';

/*
  Generated class for the AircraftDetailsPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/aircraft-details/aircraft-details.html',
  providers: [DataService,ChatService],
  directives: [CustomSpinnerPage]
})
export class AircraftDetailsPage {
  private AircraftInformation: any;
  private spinner: any;
  public aircraftype: any;
  public engineName: any;
  public EngineType: any;
  public FuelType: any;
  constructor(private navCtrl: NavController, private dataService: DataService, private modalCtrl: ModalController, private events: Events,private chatservice:ChatService) {

  }
  ngAfterViewInit() {


  }
  showAircraftModel() {
    let modal = this.modalCtrl.create(SuggestStationPage, { backpage: this, type: "airCraft" });
    modal.present();

  }
  getAircraftDetails() {
    console.log(this.aircraftype);
    console.log("1231");
    this.chatservice.aircraftdetails = this.aircraftype;//modifying variable
     console.log(this.chatservice.aircraftdetails);
    this.spinner = true;
    this.events.publish('AircrafType', this.aircraftype);
    this.events.publish('EngineName', this.engineName);
    if (this.engineName != '' && this.aircraftype != '') {
      this.dataService.getAircraftDetails(this.aircraftype, this.engineName).then(aircraftData => {
        this.spinner = false;
        this.AircraftInformation = aircraftData;


        console.log(this.AircraftInformation);
        console.log("this.AircraftInformation");
        console.log(this.AircraftInformation['AircraftType']);
        this.EngineType = this.AircraftInformation['EngineSpecification']['EngineType'];
        this.FuelType = this.AircraftInformation['AircraftType']['FuelType'];
      });
    }
  }
}

service function

@Injectable()
export class ChatService {
  private _db: any;
  private _todosRef: any;
  private _todos$: any;
  public aircraftdetails="";//variable define to access in page
  constructor(private http: Http) {
    this._db = firebase.database().ref('/'); // Get a firebase reference to the root
    this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos
    

    this._todosRef.on('value',this.handleData,this)
     
  

    this._todos$ = new ReplaySubject();
    //this._todosRef.on('child_changed', this.test, this)
    

  }

@FnnHuman ,if you have any doubt on code please feel free to make query

declare variables you want to share in some provider and then use it directly from both pages

1 Like

@FnnHuman, yes i understood, as you see my provider have one variable
public aircraftdetails="";//variable define to access in page
and modifying it from tab page 1 in getAircraftDetails method
and finally i am accessing it in main tab data page in registerAircraft() method .
as i know registerAircraft metod should return the modified value of aircraftdetails , but its giving null string , means the modified value not stored on aircraftdetails variable.

maybe it is because you use an asynchronous call in your child page?

sorry, not getting data. still waiting for result .

Eliminate all providers from components. They are causing you to get per-component instances. You also probably don’t want per-component directives, and please give things proper types instead of abusing any.

thanks guys for your help , now its working fine.
still any thing like view child things its good to use instead of getting from providers.