angular-19_skill

Overview

This skill covers practical Angular 19 patterns: signals, standalone components, resource APIs, signal queries, dependency injection, and integration with the Aurora framework. It focuses on modern reactive practices, tree-shakable providers, lifecycle hooks, and RxJS interop to build efficient, predictable UI. Use it when implementing components, directives, pipes, services, or migrating to Angular 19 idioms.

How this skill works

The skill inspects component and service implementations and recommends Angular 19 idiomatic replacements (signals, input/output helpers, and view queries). It highlights lifecycle and rendering utilities (afterRenderEffect, afterRender, afterNextRender), resource and rxResource usage for async data, and rxjs interop helpers like toSignal/toObservable and takeUntilDestroyed. It also suggests DI patterns using inject(), providedIn singletons, and provideAppInitializer for app startup tasks.

When to use it

• Implementing new or migrated Angular components, directives, pipes, or services
• Adopting reactive state with signals, computed, and effect in component logic
• Loading async data with resource(), rxResource(), or signal-based queries
• Rewriting DI to use inject(), provideAppInitializer(), and tree-shakable providers
• Integrating third-party libs or Aurora framework features that need post-render initialization

Best practices

• Prefer standalone components by default; avoid explicit standalone: true
• Use signal(), computed(), and effect() for local reactive state; replace @Input/@Output with input()/output() helpers
• Use resource()/rxResource() for async data and avoid ngOnInit for data loading
• Use inject() inside classes rather than constructor injection for brevity and tree shaking
• Adopt OnPush change detection with signals and use takeUntilDestroyed() for RxJS cleanup

Example use cases

• Detail view component using signals for local model, computed values for derived state, and resource() for remote loading
• Directive that exposes a signal input and focuses an element when the signal becomes true
• Service providedIn: 'root' that exposes a signal-backed API and converts observables with toSignal
• App initializer using provideAppInitializer() to load configuration before bootstrap
• Component that uses afterRenderEffect to sync a chart library with signal-driven data