Weather App Using Angular

We will be creating a weather application using the Angular framework. This app will allow users to check the current weather conditions by entering a city name. It will provide detailed information including temperature, weather description, wind speed, and humidity. With responsive design and interactive features, the app will offer a user-friendly experience across various devices.

Project Preview

Prerequisites

• Node.js
• Angular CLI
• TypeScript

Approach

• We will initialize an Angular project to build a weather application, setting up the basic structure and components.
• We will use custom CSS to style the app, ensuring a clean and responsive design.
• We will integrate the OpenWeatherMap API to fetch and display real-time weather data based on user input.
• We will implement features to show temperature, weather description, wind speed, and humidity, with proper error handling and a loading indicator for a smooth user experience.

Steps to Create Weather App using Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new weather-app --no-standalone
cd weather-app

Step 3: Create a Component

Create a component. You can generate a component using the Angular CLI:

ng generate component weather-app

Step 4: Install dependencies

Install moment library for real-time date fetching:

ng install moment --save

Dependencies

  "dependencies": {
    "@angular/animations": "^18.2.1",
    "@angular/common": "^18.2.1",
    "@angular/compiler": "^18.2.1",
    "@angular/core": "^18.2.1",
    "@angular/forms": "^18.2.1",
    "@angular/platform-browser": "^18.2.1",
    "@angular/platform-browser-dynamic": "^18.2.1",
    "@angular/router": "^18.2.1",
    "moment": "^2.30.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
}

Folder Structure

Example: Create the required files as seen in the folder structure and add the following codes.

Weather Component

Below mentioned is Weather Component having HTML, CSS and JavaScript code having an input field to add state name and a Get Weather Button to show the weather update along with humidity and wind speed.

<!--weather-app.component.html-->

<div class="container">
    <div class="weather-card">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Weather App Using Angular
        </h3>
        <input type="text" [(ngModel)]="cityName" placeholder="Enter city name">
        <button (click)="getWeather()">Get Weather</button>

        <div *ngIf="loading" class="loading">
            Loading...
        </div>

        <div *ngIf="error" class="error-message">
            {{ error }}
        </div>

        <div *ngIf="weatherData" class="animate__animated animate__fadeIn" id="weather-info">
            <h3 id="city-name">{{ weatherData.name }}</h3>
            <p id="date">{{ currentDate }}</p>
            <img [src]="iconUrl" alt="Weather Icon"