In the ionic 3 app I am getting the values using Async task and storing them to another ts file, so that I can use them in other components. Now the problem is as I am calling the async task in app.component.ts so that the the data is fetched every single time the app is opened and store that to another file for further use. The call to fetch the data is async the main page is loaded before the call gets completed. In the main page I am calling the data from data saved file and as the async task the data is being loaded slowly into storage file and before that the main page is making a call to storage which is returning null.
Code of app.component.js
import { Component, ViewChild } from '@angular/core';
import { ThemeSharedService } from '../services/theme-service';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = MainPage;
userLang: any;
constructor(public platform: Platform, private themeSharedService:
ThemeSharedService) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.getTheme();
});
}
getTheme() {
let themeValue: any =this.appConfigService.fetchTheme("http://www.website.com/theme/").subscribe(
data => {
return data;
},
err => {
console.log(err);
this.configure(err);
return err;
},
() => {
console.log('Movie Search Complete');
}
);
return themeValue;
}
configure(response){this.themeSharedService.setPlaceholderService(response.usePlaceholderService);
this.themeSharedService.setColour(response.themeColours);
}
}
ThemeSharedService is the ts file I am storing the data and code for it is
import { Injectable } from '@angular/core';
@Injectable()
export class ThemeSharedService {
usePlaceholderService: boolean;
colours: any;
constructor() {
}
setPlaceholderService(usePlaceholderService) {
this.usePlaceholderService = usePlaceholderService;
}
getPlaceholderService() {
return this.usePlaceholderService;
}
setColour(colours) {
this.colours = colours;
}
getColour() {
return this.colours;
}
}
As the app is opened the MainPage is loaded and the component ts file is as follows
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { ThemeSharedService } from ‘…/…/services/theme-service’;
@Component({
selector: ‘page-main’,
templateUrl: ‘main.html’
})
export class DashboardPage {
constructor(public navCtrl: NavController, private themeSharedService: ThemeSharedService) {
console.log(“but why”,this.themeSharedService.getColour());
}
ionViewDidLoad() {
}
}
In the console I am getting the value as undefined, I want to get the data to Main Page from ThemeSharedService after the data is saved from app.component.ts. Can we subscribe to it so that the data is fetched after every update if any.