Angular Weather App - help

1

Hello! I am learning Angular and I am trying to make a simple weather app.

I want to add and change the background to image depending on the weather_description status (Cloudy, Rainy…) in the API.

So when I search for a location I want the background to change depending on the weather_description which from the API only gives the status but I want to add image.

I could use some help. Any thoughts?
Thanks!

2

Hello and welcome :slight_smile:!

Assuming You’re using services, a simple option would be to compare the weather_description with the current one and update accordingly, maybe by dispatching an event or any other alternative that suits Your design.

If You share some of the code involved we may be able to help you more :slight_smile:.

3

Thank you! And hanks for the reply:)

This is the component.ts file

export class WeatherComponent implements OnInit {
  public weatherSearchForm: FormGroup;
  public weatherData: any;

  constructor(
    private formBuilder: FormBuilder,
    private apixuService: ApixuService
    ) {}

  ngOnInit() {
    this.weatherSearchForm = this.formBuilder.group({
      location: [""]
    });
  }

  sendToAPIXU(formValues) {
    this.apixuService.getWeather(formValues.location).subscribe(data => {
      this.weatherData = data;
      console.log(this.weatherData);
    });
  }
}`

And some of the component.html where I display the data from the API

<div class="right-half">
          <h3 class="text-center">Weather Details:</h3>

          <p class="text-center">
              Weather description: {{this.weatherData?.current.weather_descriptions}}
          </p>
           <p class="text-center">
              Observation Time: {{this.weatherData?.current.observation_time}}
            </p>
          <p class="text-center">
            Humidity: {{this.weatherData?.current.humidity}}
          </p>
          <p class="text-center">
            Temperature: {{this.weatherData?.current.temperature}}
          </p>
          <p class="text-center">
            Feels like: {{this.weatherData?.current.feelslike}}
          </p>
          <p class="text-center">
            Location Searched: {{this.weatherData?.location.name}},
            {{this.weatherData?.location.country}}
          </p>
      </div>
4

Hey!

Sorry for the delay.

I’ve developed a test app which may do what You want. Of course, the data has been mocked, hence there is no real data, but You should be able to figure out how to make it work (if not, You can ask again :stuck_out_tongue:).

I haven’t developed in Angular for 4 years (or so) xD, so I learned a lot again (maybe I should thank You :stuck_out_tongue:).

Hope it helps :slight_smile:

I forgot! To use the test app, write london or paris (the data on the file forecast-mock.ts) in the search box and then click the search button.

5

Thank you so much!! This is really helpful, just how I wanted to work :slight_smile: I will try on my own now with the rest. Thanks again! :slight_smile:

1 Like