I am currently exploring the world of app development and have decided to create a weather application. The main goal of this app is to display the current weather using data from the openweathermap.org API. To achieve this, I have divided my app into 3 tabs:
- The first tab (Home) will display the weather data.
- The second tab contains information about the creators (credits, useless).
- And the third tab focuses on the logic behind the app.
One challenge I am facing is related to the Ionic "Select" element in the third tab. Users should be able to choose one of the 4 predefined locations (Zwettl, Krems, St. Pölten, Wien). Depending on their selection, the temperature of that location should be displayed on the first tab. For instance, if a user picks Zwettl, the app should show the current temperature in Zwettl on the first tab.
- First Tab displaying the temperature
- Third Tab with 'ion-select' for location selection
- Selectable Locations
My question is: How can I define the value of the selected location using an 'ion-option' and how can I access this variable in the first tab or the tab1.page.ts file?
Please disregard the checkboxes in picture 2 as I am focusing on determining what specific data to display on the first tab (temperature, humidity, etc.) once the navigation between tab1 and tab3 is functional. I hope this clarifies my query!
Below is the code I have implemented so far:
Tab1.html:
<ion-content [fullscreen]="true">
<ion-item>
<ion-label>
<p id="weatherdata"></p>
<h3>{{weather?.main.temp}}°C</h3>
<ion-button (click)="setLocation1()">Zwettl</ion-button>
<ion-button (click)="setLocation2()">Wien</ion-button>
</ion-label>
</ion-item>
</ion-content>
Tab1.ts:
import { Component } from '@angular/core';
import { ApiService } from './../api.service'
import { HttpParams } from '@angular/common/http';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss'],
})
export class Tab1Page {
currentDate;
weather: any;
constructor(public api: ApiService) {
this.currentDate = new Date();
}
ngOnInit(){
this.api.loc = "Zwettl";
this.getWeather();
}
setLocation1(){
this.api.loc = "Zwettl";
console.log(this.api.loc);
this.getWeather();
}
setLocation2(){
this.api.loc = "Wien";
console.log(this.api.loc);
this.getWeather();
}
async getWeather(){
await this.api.getWeatherData().subscribe(res => {
console.log(res);
this.weather = res;
}, err => {console.log(err);
});
}
}
Tab3.html:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Settings
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-list>
<ion-item>
<ion-icon name="compass"></ion-icon>
<ion-label style="padding-left:15px">Location</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="zwettl">Zwettl</ion-select-option>
<ion-select-option value="krems">Krems</ion-select-option>
<ion-select-option value="stpoelten">St. Pölten</ion-select-option>
<ion-select-option value="wien">Wien</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
API.ts:
import { Injectable } from '@angular/core';
import {Observable, of, throwError} from 'rxjs';
import {HttpClient, HttpHeaders, HttpParams, HttpErrorResponse} from '@angular/common/http';
import{catchError, tap, map} from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({'Content-Type' : 'application/json'})
};
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http:HttpClient) { }
loc:any;
getWeatherData(): Observable<any>{
const httpOptions = {
headers: new HttpHeaders({'Content-Type' : 'application/json'})
};
const request = this.http.request<any>('GET', "http://api.openweathermap.org/data/2.5/weather?q="+this.loc+"&APPID=99b52e0a2655a753716cf6adb17476a7&units=metric")
request.subscribe(response => {
/Handling the response body/
}, error => {
console.log(error);
});
return request.pipe()
}
}
There isn't anything significant in Tab3.ts :(