Hello everyone, I am a beginner with Angular and I seem to have run into an issue that I can't figure out.
In my parent component, I am attempting to pass the weekly variable to my child component but it doesn't seem to be working as expected. Here is what my parent component code looks like:
app.component.ts
import { Component } from "@angular/core";
import { GeolocationService } from "./geolocation.service";
import { WeatherService } from "./weather.service";
import { kmphToMs } from '../utilities/helpful';
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
latitude: number;
longitude: number;
cityName: string;
currentTemp: number;
currentHumidity: number;
currentWindSpeed: string;
weekly: Array<object>;
errorMessage: string;
constructor(
private geolocationService: GeolocationService,
private weatherService: WeatherService
) {}
ngOnInit() {
this.geolocationService.getCoordinates().subscribe(result => {
console.log(result);
this.latitude = result.coords.latitude;
this.longitude = result.coords.longitude;
this.weatherService
.getTheWeather(this.latitude, this.longitude)
.subscribe(weatherData => {
console.log(weatherData);
this.cityName = weatherData["timezone"];
this.currentTemp = weatherData["currently"]["temperature"];
this.currentWindSpeed = kmphToMs(weatherData["currently"]["windSpeed"]);
this.currentHumidity = weatherData['currently']['humidity'] * 100;
this.weekly = weatherData['daily']['data'];
console.table(this.weekly);
});
});
}
}
app.component.html
<app-days
[weekly]="weekly"
></app-days>
Now, let's take a look at how my child component is structured:
import { Component, OnInit, Input } from "@angular/core";
@Component({
selector: "app-days",
templateUrl: "./days.component.html",
styleUrls: ["./days.component.css"]
})
export class DaysComponent implements OnInit {
@Input() weekly: Array<object>;
constructor() {
}
ngOnInit() {
console.log(this.weekly);
}
}
When I try to console.log the weekly variable in the child component, it shows up as undefined. I'm not sure where I might be going wrong, so any help would be greatly appreciated!