angular-patterns

Enforce modern Angular 21+ development patterns in Nuclia frontend monorepo.

56|18|Updated Apr 26, 2022

Search Tags:#typescript #best practices #refactoring #frontend #angular #component development

Ready to run

npx skills add https://github.com/nuclia/frontend --skill angular-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-patterns
Source: https://github.com/nuclia/frontend/tree/main/.claude/skills/angular-patterns
Command: npx skills add https://github.com/nuclia/frontend --skill angular-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers adhere to the latest Angular best practices and patterns specifically adopted within the Nuclia frontend monorepo, ensuring consistency and maintainability.

Core Features & Use Cases

Modern Syntax: Guides users on using inject(), standalone components, signal-based APIs (input(), output(), signal(), computed()), and functional guards.
Code Consistency: Enforces patterns like ChangeDetectionStrategy.OnPush and specific RxJS/Signal bridging techniques.
Refactoring: Assists in migrating legacy Angular code to the modern 21+ style.
Use Case: When creating a new Angular component, use this Skill to ensure it follows the project's established patterns for state management, dependency injection, and change detection.

Quick Start

Use the angular-patterns skill to create a new standalone component.

Frequently Asked Questions about angular-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate legacy Angular components to modern signal-based APIs?▼

Angular OnPush change detection optimizes rendering by checking components only when inputs change or events fire. Combine it with signal-based APIs and computed() to ensure state updates trigger change detection predictably.

What is the best way to bridge RxJS observables with Angular signals?▼

Bridge RxJS observables with Angular signals using specific interop techniques that convert observable streams into signal-based state. This pattern maintains consistency in state management while leveraging reactive streams for async operations.

How do I use functional guards for lazy routing in Angular 21+?▼

Use functional guards for lazy routing by defining guard functions that return boolean or observable results, applying them directly to route configurations. This replaces class-based guards and aligns with modern Angular standalone component patterns.

Do I need standalone components to follow modern Angular development patterns?▼

Yes, standalone components are central to modern Angular 21+ development patterns. They replace NgModule declarations, work with inject() for dependencies, and pair with signal-based APIs for state management and OnPush change detection.

Why use inject() instead of constructor injection in Angular components?▼

Use inject() instead of constructor injection to achieve cleaner component code, enable flexible dependency injection within methods, and align with Angular 21+ conventions. It supports standalone components and signal-based API patterns consistently.