How to fetch data from provider to app.component.ts

@wandie wrote:

i have working code and providers are running well in other pages but not in app.component
how can i make the data be fetched in app.component.ts from the weatherprovider
this is my providers code
import { HttpClient } from ‘@angular/common/http’;
import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
/*
Generated class for the WeatherProvider provider.

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class WeatherProvider {

apiKey = ‘6b2ee5e9fdc980c8’;
url;

constructor(public http: HttpClient) {

this.url = 'http://api.wunderground.com/api/'+this.apiKey+'/conditions/q'
 console.log('Hello WeatherserviceProvider Providennr');

}

getWeather(city,state)
{
return this.http.get(this.url+’/’+state+’/’+city+’.json’)
.map(res => res);
}

}

and this is my app.component.ts
import { Component, ViewChild } from ‘@angular/core’;

import { Events,ModalController,MenuController, Nav, Platform } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { Storage } from ‘@ionic/storage’;
import { WeatherProvider } from ‘…/providers/weather/weather’;
//import{ Observable } from ‘rxjs/Observable’;

// import { AboutPage } from ‘…/pages/about/about’;
// import { AccountPage } from ‘…/pages/account/account’;
// import { LoginPage } from ‘…/pages/login/login’;
// import { MapPage } from ‘…/pages/map/map’;
// import { SignupPage } from ‘…/pages/signup/signup’;
import { TabsPage } from ‘…/pages/tabs-page/tabs-page’;
import { TutorialPage } from ‘…/pages/tutorial/tutorial’;
import { SchedulePage } from ‘…/pages/schedule/schedule’;
import { ProgramPage } from ‘…/pages/program/program’;
import { NewsPage } from ‘…/pages/news/news’;
import { ShowPage } from ‘…/pages/show/show’;
//import { AddPage } from ‘…/pages/add/add’;
// import { StoryPage } from ‘…/pages/story/story’;
// import { SpeakerListPage } from ‘…/pages/speaker-list/speaker-list’;
// import { SupportPage } from ‘…/pages/support/support’;

import { ConferenceData } from ‘…/providers/conference-data’;
import { UserData } from ‘…/providers/user-data’;

export interface PageInterface {
title: string;
name: string;
component: any;
icon: string;
logsOut?: boolean;
index?: number;
tabName?: string;
tabComponent?: any;
}

@Component({
templateUrl: ‘app.template.html’,
providers: [WeatherProvider]
})
export class ConferenceApp {
current_observation: string;
public weatherList = [];
weather:any;
location:{
city:string,
state:string
}

// the root nav is a child of the root app component
// @ViewChild(Nav) gets a reference to the app’s root nav
@ViewChild(Nav) nav: Nav;

// List of pages that can be navigated to from the left menu
// the left menu only works after login
// the login page disables the left menu
appPages: PageInterface[] = [
{ title: ‘Home’, name: ‘TabsPage’, component: TabsPage, tabComponent: SchedulePage, index: 0, icon: ‘calendar’ },
{ title: ‘Program Guide’, name: ‘TabsPage’, component: TabsPage, tabComponent: ProgramPage, index: 1, icon: ‘contacts’ },
{ title: ‘News’, name: ‘TabsPage’, component: TabsPage, tabComponent: NewsPage, index: 2, icon: ‘map’ },
{ title: ‘Shows’, name: ‘TabsPage’, component: TabsPage, tabComponent: ShowPage, index: 3, icon: ‘information-circle’ }
// { title: ‘Stories’, name: ‘TabsPage’, component: TabsPage, tabComponent: StoryPage, index: 4, icon: ‘information-circle’ }

];

// loggedInPages: PageInterface[] = [
// { title: ‘Account’, name: ‘AccountPage’, component: AccountPage, icon: ‘person’ },
// { title: ‘Support’, name: ‘SupportPage’, component: SupportPage, icon: ‘help’ },
// { title: ‘Logout’, name: ‘TabsPage’, component: TabsPage, icon: ‘log-out’, logsOut: true }
// ];
// loggedOutPages: PageInterface[] = [
// { title: ‘Login’, name: ‘LoginPage’, component: LoginPage, icon: ‘log-in’ },
// { title: ‘Support’, name: ‘SupportPage’, component: SupportPage, icon: ‘help’ },
// { title: ‘Signup’, name: ‘SignupPage’, component: SignupPage, icon: ‘person-add’ }
// ];
rootPage: any;

constructor(
public events: Events,
public userData: UserData,
public menu: MenuController,
public platform: Platform,
public modalCtrl: ModalController,
public confData: ConferenceData,
public storage: Storage,
public weatherProvider: WeatherProvider,
public splashScreen: SplashScreen
) {

// Check if the user has already seen the tutorial
this.storage.get('hasSeenTutorial')
  .then((hasSeenTutorial) => {
    if (hasSeenTutorial) {
      this.rootPage = TabsPage;
    } else {
      this.rootPage = TutorialPage;
    }
    this.platformReady()
  });

// load the conference data
confData.load();

// decide which menu items should be hidden by current login status stored in local storage
this.userData.hasLoggedIn().then((hasLoggedIn) => {
  this.enableMenu(hasLoggedIn === true);
});
this.enableMenu(true);

this.listenToLoginEvents();

}

//working weather
ionViewWillEnter(){
this.location = {
city: ‘Kampala’,
state: ‘UG’
}
this.weatherProvider.getWeather(this.location.city,this.location.state)
.subscribe(current_observation => {
this.weather = current_observation;
//console.log(weather);
});
}

//end of working weather

// addWeather(){
//
// let addWeatherModal = this.modalCtrl.create(AddPage);
// addWeatherModal.onDidDismiss(data => {
//
// if(data){
// this.getWeather(data.city,data.country);
// }
//
// console.log(data);
// });
// addWeatherModal.present();
// }

//getWeather
// getWeather(city:string,country:string){
// this.weather.city(city,country)
//
// .subscribe(data => {
//
// this.weatherList.push(data);
// },
// err=> console.log(err),
// () => console.log(‘get weather now’)
// )
//
// }

openPage(page: PageInterface) {
let params = {};

// the nav component was found using @ViewChild(Nav)
// setRoot on the nav to remove previous pages and only have this page
// we wouldn't want the back button to show in this scenario
if (page.index) {
  params = { tabIndex: page.index };
}

// If we are already on tabs just change the selected tab
// don't setRoot again, this maintains the history stack of the
// tabs even if changing them from the menu
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
  this.nav.getActiveChildNavs()[0].select(page.index);
} else {
  // Set the root of the nav with params if it's a tab index
  this.nav.setRoot(page.name, params).catch((err: any) => {
    console.log(`Didn't set nav root: ${err}`);
  });
}

if (page.logsOut === true) {
  // Give the menu time to close before changing to logged out
  this.userData.logout();
}

}

openTutorial() {
this.nav.setRoot(TutorialPage);
}

listenToLoginEvents() {
this.events.subscribe(‘user:login’, () => {
this.enableMenu(true);
});

this.events.subscribe('user:signup', () => {
  this.enableMenu(true);
});

this.events.subscribe('user:logout', () => {
  this.enableMenu(false);
});

}

enableMenu(loggedIn: boolean) {
this.menu.enable(loggedIn, ‘loggedInMenu’);
this.menu.enable(!loggedIn, ‘loggedOutMenu’);
}

platformReady() {
// Call any initial plugins when ready
this.platform.ready().then(() => {
this.splashScreen.hide();
});
}

isActive(page: PageInterface) {
let childNav = this.nav.getActiveChildNavs()[0];

// Tabs are a special case because they have their own navigation
if (childNav) {
  if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
    return 'primary';
  }
  return;
}

if (this.nav.getActive() && this.nav.getActive().name === page.name) {
  return 'primary';
}
return;

}
}

how can i do that thanks.

Posts: 2

Participants: 2

Read full topic