A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in Angular (as well as also 10 other frontend frameworks) in order to review, compare and benchmark frontend web frameworks.

• 🌦️ Live weather conditions
• 📅 7-day weather forecast
• 🔍 City search functionality
• 📍 Geolocation support
• 💾 Persistent location storage
• 📱 Responsive design
• ♿ Accessible interface
• 🎨 Multi-theme support
• 🧪 Fully unit tested
• 🌐 Internationalized

Task	Status
Test - Executes all e2e and unit tests
Lint - Verifies code style and quality
Build - Builds and deploys the app

First, follow the repo setup instructions. Then cd apps/angular and use the following commands:

npm run dev    # Start dev server (ng serve --port 3000)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (ng build)
npm start      # Serve built prod app (from ./dist)

For troubleshooting, use npm run verify from the root of the project.

Angular is a full-blown framework from Google, not just a library. It comes with everything out of the box, from routing to forms to testing. Its TypeScript-first approach and structured architecture make it great for large, enterprise apps. The learning curve is steep but it’s incredibly powerful when mastered.

The app uses Angular's dependency injection system with services marked as @Injectable({ providedIn: 'root' }). The WeatherStateService manages global state using RxJS BehaviorSubject.

State management leverages RxJS observables with operators like catchError, finalize, switchMap, and delay. The app component uses takeUntil pattern for subscription cleanup to prevent memory leaks.

All components use Angular's modern standalone API, eliminating the need for NgModules. Components import their dependencies directly in the imports array.

The AppComponent demonstrates Angular's inline template syntax with data binding ([isLoading], (search)), structural directives, and conditional rendering.

Full TypeScript support with typed interfaces for weather data and app state, providing compile-time type checking and better developer experience.

Angular isn't the cool kid anymore, but it's incredibly solid and ships with absolutely everything you need. TypeScript from day one, dependency injection, forms, HTTP client, routing, testing utilities - it's all there, officially maintained and deeply integrated. No need to cobble together a stack from random npm packages.

For our weather app, Angular did kinda feel like using a sledgehammer to crack a nut. Using the newer standalone components (no more NgModule boilerplate!) made things cleaner, but I was still writing a lot more code than I needed in Svelte or Vue. That said, everything does just works, and the TypeScript integration is phenomenal.

The dependency injection system was quite nice for having WeatherService automatically injected into components. And RxJS observables handle all the async weather data very nicley, though they do add a learning curve if you're not familiar with reactive programming.

Angular's template syntax with *ngIf, *ngFor, and (click) feels natural once you get used to it. Change detection just works without thinking about it (unlike React where you're constantly memoizing things).

For a simple weather app, we really didn't need any of Angular's big or flagship features (like guards, resolvers, or lazy loading). But I recently build Domain Locker using Angular, and it was a great fit for the complexity of that project, As the structure, type safety, and tooling made it easy to manage a large codebase with multiple features.

Since the weather app is very simple, it may be helpful to see a more practical implementation of a Angular app. So, checkout:

Domain Locker - Domain name portfolio manager
🐙 Get it on GitHub at github.com/Lissy93/domain-locker
🌐 View the website at domain-locker.com

Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.