andrewjbateman / angular-material-darkmode

:clipboard: Weather API search with dark mode toggle

⚡ Angular Material Table

• App displays weather from the OpenWeather API
• Uses the Angular Material design component library to add a dark mode
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Material Table
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Angular standard dark theme used
• RxJS takeUntil used to emit values until provided observable limits - until $Unsubscribe in this case
• RxJS Subject used to share an execution path among observers
• RxJS Filter to emit only selected values

📷 Screenshots

📶 Technologies

• Angular v16
• Angular Material v16
• RxJS v7

💾 Setup

• Install dependencies using npm i
• Sign up with OpenWeather API, get a (hopefully) free API key and add it to the environment.ts files
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

💻 Code Examples

  // Function that takes a city name as input and returns an Observable using a Weather interface
  getWeatherForCity(city: string): Observable<Weather> {
    const params = new HttpParams({ fromObject: { q: city } });

    return this.httpGet<Weather>('weather', params).pipe(
      map((data: Weather) => ({
        ...data,
        image: `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`,
      })),
      delay(500)
    );
  }

  private httpGet<T>(url: string, params: HttpParams): Observable<T> {
    params = params.append('appid', environment.apiKey);
    params = params.append('lang', 'en');
    params = params.append('units', 'metric');
    return this.http.get<T>(`${this.baseUrl}/data/2.5/weather`, { params });
  }

🆒 Features

• dark mode toggle
• stylish weather card

📋 Status & To-Do List

• Status: Working
• To-Do: Correct 5 type errors "Property 'main' does not exist on type 'unknown'."

👏 Inspiration

• Angular Material Darkmode in 3 Steps
• Angular Weather App RxJS in Angular

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]