angular-developer

$2c

Creating New Projects

If no guidelines are provided by the user, use these defaults when creating a new Angular project:

• Use the latest stable version of Angular unless the user specifies otherwise.

• Prefer Signal Forms for new projects only when the target Angular version supports them. 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

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

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 version supports Signal Forms and this is a new form, prefer signal forms.

-

For older applications or existing forms, match the application's 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

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

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

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, async patterns, and TestBed. Read testing-fundamentals.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 or Playwright. Read e2e-testing.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

• Angular MCP Server: Available tools, configuration, and experimental features. Read mcp.md

Anti-Patterns

• Using null or undefined as initial signal form field values — use '', 0, or [] instead

• Accessing form field state flags without calling the field first: form.field.valid() — use form.field().valid()

• Starting new forms with older form APIs when the target Angular version supports Signal Forms

• Setting min, max, value, disabled, or readonly HTML attributes on [formField] inputs — define these as schema rules instead

• Calling inject() outside an injection context — use runInInjectionContext when needed

• Using effect() for derived state that should use computed()

• Referencing $parent.$index in nested @for loops — Angular does not support $parent; use let outerIdx = $index instead

Related Skills

• tdd-workflow — test-driven development workflow applicable to Angular components and services

• security-review — security checklist for web applications including Angular-specific concerns

• frontend-patterns — general frontend patterns for context on React/Next.js approaches