https://github.com/aliwarraich007/ng-weather-widget
Re-useable weather widget component built in Angular
https://github.com/aliwarraich007/ng-weather-widget
angular npm open-source openweathermap typescript
Last synced: about 2 months ago
JSON representation
Re-useable weather widget component built in Angular
- Host: GitHub
- URL: https://github.com/aliwarraich007/ng-weather-widget
- Owner: aliwarraich007
- Created: 2023-09-13T22:43:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-26T20:04:26.000Z (over 2 years ago)
- Last Synced: 2025-04-04T04:46:42.349Z (about 1 year ago)
- Topics: angular, npm, open-source, openweathermap, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-weather-widget
- Size: 129 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular - Weather widget
ng-weather-widget is a reusable Angular component that can be used in any angular project. All you need is your openweathermap api key and you're good to go.
**_Features:_**
- Beautiful design
- Animated Icons on Current weather condition
- Rain effect if current weather is rain
- Caching of data for three hours.
- Mobile friendly
- Current weather status at top:
- City with Country name
- Temperature
- Humidity
- UVI
- Wind direction (in text: for example NE, SW, E, etc) and wind
- Speed in kmh
- Weather Forecast below:
The bottom part is the forecast for today and the next 5 days, For every single day we show:
- Week name
- Weather icon
- Max temp
- Min temp
more features are coming soon
---
# How to use widget in your app
## Installation
Install the package using npm:
```console
npm install ng-weather-widget
```
## Usage
Import and register the ng-weather-widget in your Angular module:
```
import { NgWeatherWidgetModule } from 'ng-weather-widget';
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
WeatherModule,
NgWeatherWidgetModule,
]
```
In your angular template, add the WeatherWidget component and pass your OpenWeatherMap API key as a prop:
```html
```
Replace yourOpenWeatherApiKey with your actual OpenWeatherMap API key.
The weather widget should now be displayed in your application, showing the weather data for the current day and upcoming week.
## Configuration
The WeatherWidget component accepts the following props:
`openWeatherApiKey` (required): Your OpenWeatherMap API key to fetch weather data.