Issue printing api weather data too a html page - html

Question

I am trying too code a very basic Weather app that pulls data from this API https://openweathermap.org/api. When I click the link too go from the home.html file too the weatherData.html nothing is showing up and I cant seem too pinpoint the issue within my code,any help would be appreciated.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Weather Ireland
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Weather Ireland</ion-title>
</ion-toolbar>
</ion-header>
<a class="button icon-right ion-plus-round" href="../weather-data/weather-data.page.html">weatherData</a>
</ion-content>
This is the code for the homepage.html which links too the weatherData.html file where the information from the API is supposed to be printed.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import {WeatherDataService} from '../weather-data.service'
import { WeatherDataPageRoutingModule } from './weather-data-routing.module';
import { WeatherDataPage } from './weather-data.page';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
WeatherDataPageRoutingModule
],
declarations: [WeatherDataPage]
})
export class WeatherDataPageModule {
weather;
constructor(private weatherdataservice: WeatherDataService){}
ngOnInit(){
this.weatherdataservice.getWeather().subscribe((data)=>{
console.log(data);
this.weather = data['weather'];
}
)
}
}
This is the code for the data.html file
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import {WeatherDataService} from '../weather-data.service'
import { WeatherDataPageRoutingModule } from './weather-data-routing.module';
import { WeatherDataPage } from './weather-data.page';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
WeatherDataPageRoutingModule
],
declarations: [WeatherDataPage]
})
export class WeatherDataPageModule {
weather;
constructor(private weatherdataservice: WeatherDataService){}
ngOnInit(){
this.weatherdataservice.getWeather().subscribe((data)=>{
console.log(data);
this.weather = data['weather'];
}
)
}
}
this is the code for the data.module.ts file
import { Injectable } from '#angular/core';
import { HttpClient} from '#angular/common/http'
#Injectable({
providedIn: 'root'
})
export class WeatherDataService {
APIKey = 'fec30507acb533f670080ab3174f226f';
constructor(private httpClient: HttpClient) { }
public getWeather(){
return this.httpClient.get('api.openweathermap.org/data/2.5/weather?lat={53.87}&lon={8.63}&appid={fec30507acb533f670080ab3174f226f}')
}
}
this is the code for the data.services ts file.

Answer 1

From below code, seems like you wanted to redirect to some page though you have response from the api. Instead of link redirection, try to create new page and pass response.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Weather Ireland
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Weather Ireland</ion-title>
</ion-toolbar>
</ion-header>
**<a class="button icon-right ion-plus-round" href="../weather-data/weather-data.page.html">weatherData</a>**
</ion-content>
In WeatherDataPage try using NavController
declare, navCtrl: NavController in constructor and use this.navCtrl.push(component_name, {whetherData: this.weather});
And after navigating to new component page use, NavParams. Declare navParams: NavParams and use navParams.get("whetherData");