TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Angular 2/4/6/8 Weather Widget

    npm version

    Angular 2+ Weather Widget component for web applications. Easy and Highly customisable. Stackblitz example (need API key)

    alt text

    Getting Started


    • 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:


    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';
      // ...
      imports: [
      // ...
    • 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)


    Full 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/


    MIT License.


    npm i angular2-weather-widget

    DownloadsWeekly Downloads






    Unpacked Size

    155 kB

    Total Files


    Last publish


    • itsmeloop