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.