All 12 ModulesModule 3 of 12
Angular 18+ Standalone & Signals
Module 3: Angular 18+ Network Operations Dashboard
Architect a modern Angular 18+ UI with Standalone Components, fine-grained Signals, RxJS streams, Typed Reactive Forms, and OnPush Change Detection.
Angular 18+Standalone ComponentsSignalscomputed()RxJSTyped FormsOnPushHTTP InterceptorsJasminePlaywright
Level 1: Build
Level 1: Build — Modern Angular Architecture
Construct a responsive, real-time Network Operations Dashboard in Angular 18+ featuring device management, search filters, and reactive status indicators.
User Story:
As a Network Operations Center (NOC) operator, I need an intuitive dashboard to filter 5,000 devices instantly and submit configuration changes without page reloads.
Key Deliverables & Specifications:
- Standalone Component Structure: Core, Shared, and Feature modules
- Fine-grained Reactive State Management using Angular `signal()`, `computed()`, and `effect()`
- Typed Reactive Forms for Device Registration with async IP uniqueness validators
- Functional HTTP Interceptor injecting JWT tokens and handling 401/403 errors
Implementation Roadmap:
1. **Scaffold Standalone Layout**: Build `DeviceListComponent` with `ChangeDetectionStrategy.OnPush`.
2. **Implement State Service**: Use `signal<Device[]>([])` with `computed()` filters for instant UI search.
3. **Form Architecture**: Build `FormGroup` with typed form controls and custom subnet validators.
4. **Wire Interceptors**: Configure functional interceptors in `app.config.ts`.