ngx-weather
is an Angular library that provides a weather widget for displaying current weather conditions and forecasts in your Angular applications. It's designed to be highly customizable and easy to integrate into your projects.
Important
This library provide an api key from weatherapi
- Display current weather conditions (temperature, description, icon).
- Show weather forecasts for the upcoming days.
- Automatic geolocation detection or manual location setting.
- Units conversion (Celsius/Fahrenheit).
Angular Version | ngx-weather Version | Status |
---|---|---|
>= 16.x | >= 1.0.0 | ✅ Supported |
< 16.0 | >= 1.0.0 | ❌ Not Supported |
You can install ngx-weather
via npm or yarn. Make sure you have Angular installed in your project.
npm install ngx-weather
# or
yarn add ngx-weather
In your Angular module, import and add the NgxWeatherModule to the imports array.
@NgModule({
declarations: [
AppComponent
],
imports: [
//...
NgxWeatherModule.forRoot({
apiKey: '--Your weatherapi key--'
}),
//...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In your template, use the <ngx-weather>
component to display the weather widget. You can configure it with various options.
<ngx-weather
[options]="{location: 'Tunisia'}"
></ngx-weather>
Here are the available options you can use when configuring the NgxWeatherComponent
:
Property | Type | Required | Default Value | Description |
---|---|---|---|---|
type |
WidgetTypeEnum |
No | "FORECAST" | Widget type (day, week, or forecast) |
temperatureUnits |
TemperatureUnitsEnum |
No | CELSIUS | Temperature units (CELSIUS or FAHRENHEIT) |
lang |
LanguagesEnum (optional) |
No | "en" | Language for weather information |
location |
string or PositionModel |
Yes | null |
Weather location (string or PositionModel ) |
days |
number |
No | 3 | Number of days for weather forecast |