Angular Weather Any Degree

Demo

Angular Weather any degree package for web applications . Easy and Highly customisable.

Getting Started

Installation

• The angular Weather for any degree package is published on the npm Registry.

• Install the package : npm install angular-weather-any-degree --save

• Once installed import AngularWeatherAnyDegreeModule from the installed package into your module as follows:

Usage

Import AngularWeatherAnyDegreeModule into NgModule in app.module.ts. Angular's HttpClientModule and CommonModule is also required.

import { AngularWeatherAnyDegreeModule } from 'angular-weather-any-degree';

@NgModule({
  // ...
  imports: [
    AngularWeatherAnyDegreeModule,
    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)

 <mal-angular-weather-any-degree class="weather" [Units]="'metric'" [unitSymbol]="'C'"
    [APIKEY]="'your api key'">
  </mal-angular-weather-any-degree>

Full properties

 <mal-angular-weather-any-degree class="weather" [Units]="'metric'" [unitSymbol]="'C'"
    [APIKEY]="'your api key'" [width]="'380px'" [height]="'355px'" [isBoxShadow]="false"
    [borderRadius]="'0px'" [backgroundColor]="'transparent'" [locationFontSize]="'35px'" [locationFontColor]="'#20a8d8'"
    [status]="true" [statusFontColor]="'#20a8d8'" [statusFontSize]="'18px'" [temperature]="true"
    [tempratureFontColor]="'#20a8d8'" [tempratureFontSize]="'65px'" [weatherImages]="true" [weatherImageWidth]="'110px'"
    [weatherImageHeight]="'110px'" [geoLocation]="true" [location]="''" [isWind]="true" [windFontColor]="'#20a8d8'"
    [windFontSize]="'17px'" [humidityFontColor]="'#20a8d8'" [humidityFontSize]="'17px'">
  </mal-angular-weather-any-degree>

Properties

The following list of properties are supported by the component.

Property	Type	Description	Default Value
Units	string	Kalvin,Imperial(Farenhite), Celcious
UnitSymbol	string	K-->Kalvin, F-->Farenhite, C-->Cilcious
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

This project was generated with Angular CLI version 15.1.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

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/

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

License

MIT License.