Angular 2/4/6/8 Weather Widget
Angular 2+ Weather Widget component for web applications. Easy and Highly customisable.
Stackblitz example (need API key)
Getting Started
Installation
-
The Weather Widget package is published on the npm Registry.
-
Install the package :
npm install angular2-weather-widget --save
-
Once installed import AngularWeatherWidgetModule
from the installed package into your module as follows:
Usage
Import AngularWeatherWidgetModule
into NgModule
in app.module.ts
. Angular's HttpClientModule
and CommonModule
is also required.
import { AngularWeatherWidgetModule } from 'angular2-weather-widget';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
AngularWeatherWidgetModule,
HttpClientModule,
CommonModule
]
})
- We are using "openweathermap" api to get weather details so SIGNUP and genereate api key for your project.
Add the following component tag in you template (no properties)
<angular-weather-widget
[APIKEY]="'APIKEY'">
</angular-weather-widget>
Full properties
<angular-weather-widget
[APIKEY]="'APIKEY'"
[width]="'380px'"
[height]="'auto'"
[backgroundColor]="'green'"
[isBoxShadow]="true"
[borderRadius]="'5px'"
[locationFontSize]="'35px'"
[locationFontColor]="'#fff'"
[status]="true"
[statusFontColor]="'#fff'"
[statusFontSize]="'18px'"
[temperature]="true"
[tempratureFontColor]="'#fff'"
[tempratureFontSize]="'75px'"
[weatherImages]="true"
[weatherImageWidth]="'110px'"
[weatherImageHeight]="'110px'"
[geoLocation]="true"
[location]="''"
[isWind]="true"
[windFontColor]="'#fff'"
[windFontSize]="'17px'"
[humidityFontColor]="'#fff'"
[humidityFontSize]="'17px'">
</angular-weather-widget>
Properties
The following list of properties are supported by the component.
Property | Type | Description | Default Value |
---|
APIKEY | String | API key from APIUX | APIKEY |
width | String | Width of the weather card | 280px |
height | String | Height of the weather card | auto |
backgroundColor | String | Background color of the weather card | #2a2828 |
isBoxShadow | Boolean | Box shadow of the weather card | true |
borderRadius | String | Border-radius of the weather card | 5px |
locationFontSize | String | Font size of the location text | 40px |
locationFontColor | String | Color of the location text | #fff |
status | Boolean | Current weather status | true |
statusFontSize | String | Font size of the location text | 18px |
statusFontColor | String | Color of the status text | #fff |
temperature | Boolean | Temperature of the location | true |
tempratureFontSize | String | Font size of the temperature text | 80px |
tempratureFontColor | String | Color of the temperature text | #fff |
weatherImages | Boolean | Weather icon | true |
weatherImageWidth | String | Weather icon width | 100px |
weatherImageHeight | String | Weather icon height | 100px |
geoLocation | Boolean | Access/Show weather of the user's location | true |
location | String | Show one specific location's weather | '' |
isWind | Boolean | Wind of the location | true |
windFontSize | String | Font size of the wind text | 20px |
windFontColor | String | Color of the wind text | #fff |
humidityFontColor | String | Font size of the humidity text | 20px |
humidityFontSize | String | Color of the humidity text | #fff |
Run locally
- Clone the repository or downlod the .zip,.tar files.
- Run
npm install
- Run
ng serve
for a dev server - Navigate to
http://localhost:4200/
License
MIT License.