angular-developer

name	angular-developer
description	Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
license	MIT
metadata	{"author":"Copyright 2026 Google LLC","version":"1.0"}

Angular Developer Guidelines

1. Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.

2. When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.

3. Once you finish generating code, run ng build to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.

Creating New Projects

If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project:

1. Use the latest stable version of Angular unless the user specifies otherwise.
2. Use Signals Forms for form management in new projects (available in Angular v21 and newer) Find out more.

Execution Rules for ng new: When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:

Step 1: Check for an explicit user version.

• IF the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use npx.
• Command: npx @angular/cli@<requested_version> new <project-name>

Step 2: Check for an existing Angular installation.

• IF no specific version is requested, run ng version in the terminal to check if the Angular CLI is already installed on the system.
• IF the command succeeds and returns an installed version, use the local/global installation directly.
• Command: ng new <project-name>

Step 3: Fallback to Latest.

• IF no specific version is requested AND the ng version command fails (indicating no Angular installation exists), you must use npx to fetch the latest version.
• Command: npx @angular/cli@latest new <project-name>

Components

When working with Angular components, consult the following references based on the task:

• Fundamentals: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read components.md
• Inputs: Signal-based inputs, transforms, and model inputs. Read inputs.md
• Outputs: Signal-based outputs and custom event best practices. Read outputs.md
• Host Elements: Host bindings and attribute injection. Read host-elements.md
• Component Patterns: Advanced patterns including content projection, lifecycle hooks, class/style bindings, NgOptimizedImage, and accessibility requirements. Read component-patterns.md

If you require deeper documentation not found in the references above, read the documentation at https://angular.dev/guide/components.

Reactivity and Data Management

When managing state and data reactivity, use Angular Signals and consult the following references:

• Signals Overview: Core signal concepts (signal, computed), reactive contexts, and untracked. Read signals-overview.md
• Dependent State (linkedSignal): Creating writable state linked to source signals. Read linked-signal.md
• Async Reactivity (resource): Fetching asynchronous data directly into signal state. Read resource.md
• Side Effects (effect): Logging, third-party DOM manipulation (afterRenderEffect), and when NOT to use effects. Read effects.md
• Signal Patterns: RxJS interop (toSignal, toObservable), service state patterns, and signal equality. Read signal-patterns.md

Forms

In most cases for new apps, prefer signal forms. When making a forms decision, analyze the project and consider the following guidelines:

• if the application is using v21 or newer and this is a new form, prefer signal forms. -For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.

• Signal Forms: Use signals for form state management. Read signal-forms.md

• Template-driven forms: Use for simple forms. Read template-driven-forms.md

• Reactive forms: Use for complex forms. Read reactive-forms.md

Dependency Injection

When implementing dependency injection in Angular, follow these guidelines:

• Fundamentals: Overview of Dependency Injection, services, and the inject() function. Read di-fundamentals.md
• Creating and Using Services: Creating services, the providedIn: 'root' option, and injecting into components or other services. Read creating-services.md
• Defining Dependency Providers: Automatic vs manual provision, InjectionToken, useClass, useValue, useFactory, and scopes. Read defining-providers.md
• Injection Context: Where inject() is allowed, runInInjectionContext, and assertInInjectionContext. Read injection-context.md
• Hierarchical Injectors: The EnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional, skipSelf), and providers vs viewProviders. Read hierarchical-injectors.md
• Advanced DI Patterns: useClass, useFactory, useExisting, multi providers, app initializers, runInInjectionContext, and route-level providers. Read di-advanced.md
• DI Patterns Reference: Comprehensive patterns and examples. Read di-patterns.md

Directives

When creating custom directives for reusable DOM manipulation and behavior:

• Directives Overview: Attribute directives, structural directives (portals, dynamic rendering), host directives, and the directive composition API. Read directives.md
• Directive Patterns: Advanced directive patterns and examples. Read directive-patterns.md

Note: Use native @if, @for, @switch for control flow — do NOT create custom structural directives for conditionals/loops.

HTTP & Data Fetching

When fetching data from APIs in Angular:

• HTTP Overview: httpResource() (signal-based), resource() (generic async), HttpClient (Observable-based), interceptors, error handling, and loading states. Read http.md
• HTTP Patterns: Advanced HTTP patterns, caching, optimistic updates, and service patterns. Read http-patterns.md

RxJS Patterns

When working with Observables and reactive streams:

• RxJS Patterns: Observable creation, operators (transformation, filtering, combination), subjects, subscription management, hot/cold observables, and Angular service patterns. Read rxjs-patterns.md

Prefer Signals: For new code, prefer resource(), httpResource(), and Angular Signals over Observables where possible. Use RxJS when you need complex async composition or are working with existing Observable-based code.

Angular Aria

When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:

• Angular Aria Components: Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read angular-aria.md

Routing

When implementing navigation in Angular, consult the following references:

• Define Routes: URL paths, static vs dynamic segments, wildcards, and redirects. Read define-routes.md
• Route Loading Strategies: Eager vs lazy loading, and context-aware loading. Read loading-strategies.md
• Show Routes with Outlets: Using <router-outlet>, nested outlets, and named outlets. Read show-routes-with-outlets.md
• Navigate to Routes: Declarative navigation with RouterLink and programmatic navigation with Router. Read navigate-to-routes.md
• Control Route Access with Guards: Implementing CanActivate, CanMatch, and other guards for security. Read route-guards.md
• Data Resolvers: Pre-fetching data before route activation with ResolveFn. Read data-resolvers.md
• Router Lifecycle and Events: Chronological order of navigation events and debugging. Read router-lifecycle.md
• Rendering Strategies: CSR, SSG (Prerendering), and SSR with hydration. Read rendering-strategies.md
• Route Transition Animations: Enabling and customizing the View Transitions API. Read route-animations.md
• Routing Patterns: Comprehensive routing patterns, nested routes, route parameters with signals, CanDeactivate guards, router events, and route data. Read routing-patterns.md

If you require deeper documentation or more context, visit the official Angular Routing guide.

SSR (Server-Side Rendering)

When implementing SSR, prerendering, or hydration:

• SSR Overview: Setup with @angular/ssr, server routes configuration, render modes (Prerender/Server/Client), hydration, incremental hydration, browser-only code, and prerendering with getPrerenderParams. Read ssr.md
• SSR Patterns: Advanced SSR patterns, TransferState, and deployment. Read ssr-patterns.md

Styling and Animations

When implementing styling and animations in Angular, consult the following references:

• Using Tailwind CSS with Angular: Integrating Tailwind CSS into Angular projects. Read tailwind-css.md
• Angular Animations: Using native CSS (recommended) or the legacy DSL for dynamic effects. Read angular-animations.md
• Styling components: Best practices for component styles and encapsulation. Read component-styling.md

Testing

When writing or updating tests, consult the following references based on the task:

• Fundamentals: Best practices for unit testing (Vitest), async patterns, and TestBed. Read testing-fundamentals.md
• Testing Patterns: Comprehensive patterns for components with signals, OnPush, services with inject(), HTTP resources, mocking dependencies, inputs/outputs, and async operations. Read testing-patterns.md
• Component Harnesses: Standard patterns for robust component interaction. Read component-harnesses.md
• Router Testing: Using RouterTestingHarness for reliable navigation tests. Read router-testing.md
• End-to-End (E2E) Testing: Best practices for E2E tests with Cypress. Read e2e-testing.md
• Vitest Migration: Migrating from Jasmine to Vitest in Angular v20+. Read vitest-migration.md

Tooling

When working with Angular tooling, consult the following references:

• Angular CLI: Creating applications, generating code (components, routes, services), serving, and building. Read cli.md
• Tooling Patterns: Advanced CLI patterns, build configuration, environment setup, performance analysis, and caching. Read tooling-patterns.md
• Angular MCP Server: Available tools, configuration, and experimental features. Read mcp.md