AutoGineer
Generated banner for Angular Developer
Generated logo for Angular Developer

Angular Developer

Angular (Google)OfficialCreated by Google LLCDistributed by Angular (Google)

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), queries and content projection, forms, dependency injection, routing, server and hybrid rendering (SSR, prerendering, hydration), accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, naming conventions, or CLI tooling.
— the description by Google LLC

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Angular Developer skill assists in building and maintaining Angular applications. It provides structured guidance on project scaffolding, component architecture, state management with signals, HTTP communication, and accessibility. It emphasizes the use of the Angular CLI for consistency and mandates build verification to ensure code quality. The skill covers modern Angular features including signal-based reactivity, deferrable views, and headless accessibility components via Angular Aria.

What it does

  • Generates boilerplate code for components, services, and routes using the Angular CLI.
  • Provides architectural advice on state management using signals, linked signals, and resources.
  • Offers guidance on implementing accessible UI patterns using Angular Aria directives.
  • Advises on modern rendering strategies including SSR, prerendering, and hydration.
  • Ensures code quality by requiring build verification after generation.
  • Recommends modern naming conventions and styling approaches like Tailwind CSS.

When to use it

  • When scaffolding a new Angular project or adding new features to an existing one.
  • When needing to implement complex state management or asynchronous data fetching.
  • When building accessible custom components like accordions, listboxes, or comboboxes.
  • When refactoring older code to modern Angular standards or migrating to newer versions.
  • When troubleshooting build errors or optimizing component performance.

Advantages

  • Promotes consistency by enforcing Angular CLI usage and standard naming conventions.
  • Reduces technical debt by prioritizing modern signal-based reactivity and form management.
  • Improves accessibility by integrating headless ARIA patterns.
  • Ensures functional reliability through mandatory build verification steps.
  • Provides context-aware guidance based on the specific Angular version of the project.

Usage examples

“Create a new Angular component for a user profile with signal-based inputs.”
The agent generates the component structure using the Angular CLI, implementing signal-based inputs as per the latest framework standards.
“How do I implement an accessible accordion in my Angular application?”
The agent provides the necessary imports from the Angular Aria package and demonstrates the correct HTML structure using the required directives.
“Help me refactor my legacy animation code to the modern approach.”
The agent analyzes the project version and provides a guide on transitioning to native CSS animations using the recommended enter and leave classes.
“What is the best way to fetch data in a component using signals?”
The agent explains the use of the resource API for asynchronous data fetching and provides a code example for integrating it into the component.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/angular/angular-developer/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip angular-developer.zip -d .agents/skills

Documentation by Google LLC

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 some 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 Signal Forms for form management in new projects (stable in Angular v22 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, self-closing tags, 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

  • Naming Conventions: Modern Angular v20+ naming style ("Intent over Role") for files, components, services, directives, pipes, and models. Read naming-conventions.md

  • Queries and Content Projection: Signal-based view and content queries (viewChild, viewChildren, contentChild, contentChildren) and content projection with <ng-content> slots and fallback content. Read queries-and-projection.md

  • Deferrable Views: Lazy loading, code splitting, triggers, prefetching, loading states, SSR, and layout stability with @defer. Read deferrable-views.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

HTTP Communication

When communicating with backend services, use Angular HTTP APIs and consult the following reference:

  • HTTP Client and Resources: provideHttpClient, HttpClient, interceptors, and httpResource. Read http-client.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 v22 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

Pipes

When formatting values in templates, creating custom pipes, or reusing pipe-like logic in TypeScript, consult the following reference. Prefer pipes in templates; outside templates, avoid injecting pipe classes just to call transform().

  • Pipes: Built-in pipe imports, custom pipe naming and implementation, pure vs impure pipes, and TypeScript reuse patterns using standalone formatting functions or extracted plain functions. Read pipes.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: Choosing between CSR, SSG (prerendering), and SSR. Read rendering-strategies.md

  • Server and Hybrid Rendering: Implementing server routes, prerendering, hydration, server-compatible code, and request data in an SSR-configured app. Read server-side-rendering.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 (Vitest), 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: Setting up and running E2E tests. 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

  • Code Modernization: Automatically refactoring to modern standards using migrations. Read migrations.md

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

  • Environment Configuration: Strategies for build-time and runtime configuration. Read environment-configuration.md

Files

references/angular-aria.md

Angular Aria

Angular Aria (@angular/aria) is a collection of headless, accessible directives that implement common WAI-ARIA patterns. These directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support.

As an AI Agent, your role is to provide the HTML structure and CSS styling, while the directives handle the complex accessibility logic.

Styling Headless Components

Because Angular Aria components are headless, they do not come with default styles. You must use CSS to style different states based on the ARIA attributes or structural classes the directives automatically apply.

Common ARIA attributes to target in CSS:

  • [aria-expanded="true"] / [aria-expanded="false"]

  • [aria-selected="true"]

  • [aria-disabled="true"]

  • [aria-current="page"] (for navigation)

CRITICAL: Before using this package, confirm that @angular/aria is installed. If necessary, install it using the package manager configured for the project.

1. Accordion

Organizes related content into expandable/collapsible sections.

Usage: The Accordion is a layout component designed to organize content into logical groups that users can expand one at a time to reduce scrolling on content-heavy pages. Use it for FAQs, long forms, or progressive disclosure of information, but avoid it for primary navigation or scenarios where users must view multiple sections of content simultaneously.

Imports: import { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger } from '@angular/aria/accordion';

Directives: ngAccordionGroup, ngAccordionTrigger, ngAccordionPanel, ngAccordionContent (for lazy loading).

@Component({
  selector: 'app-cmp',
  imports: [AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger],
  template: `...`,
  styles: [],
})
export class App {
  protected readonly title = signal('angular-app');
}
<div ngAccordionGroup [multiExpandable]="false">
  <div class="accordion-item">
    <button ngAccordionTrigger [panel]="panel1" class="accordion-header">
      Section 1
      <span class="icon">▼</span>
    </button>
    <div ngAccordionPanel #panel1="ngAccordionPanel" class="accordion-panel">
      <ng-template ngAccordionContent>
        <p>Lazy loaded content here.</p>
      </ng-template>
    </div>
  </div>
</div>

Styling Strategy: Target the [aria-expanded] attribute on the trigger to rotate icons, and style the panel visibility.

.accordion-header[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}

/* The panel directive handles DOM removal, but you can style the transition */
.accordion-panel {
  padding: 1rem;
  border-top: 1px solid #ccc;
}

2. Listbox

A foundational directive for displaying a list of options. Used for visible selection lists (not dropdowns).

Usage: Visible selectable lists (single or multi-select).

Imports: import {Listbox, Option} from '@angular/aria/listbox';

Directives: ngListbox, ngOption.

@Component({
  selector: 'app-cmp',
  imports: [Listbox, Option],
  template: `...`,
  styles: [],
})
export class App {
  protected readonly title = signal('angular-app');
}
<!-- horizontal or vertical orientation -->
<ul ngListbox [(value)]="selectedItems" orientation="horizontal" [multi]="true">
  <li ngOption value="apple" class="option">Apple</li>
  <li ngOption value="banana" class="option">Banana</li>
</ul>

Styling Strategy: Target [aria-selected="true"] for selected state and :focus-visible or [data-active] for the focused item (Angular Aria uses roving tabindex or activedescendant).

.option {
  padding: 8px;
  cursor: pointer;
}
.option[aria-selected='true'] {
  background: #e0f7fa;
  font-weight: bold;
}
/* Focus state managed by aria */
.option:focus-visible {
  outline: 2px solid blue;
}

3. Combobox, Select, and Multiselect

These patterns combine the ngCombobox directive (applied directly to the trigger/combobox element) with a popup containing an ngListbox widget.

  • Combobox (Autocomplete): Applied to an <input ngCombobox> element. Ideal when typing filters the list.

  • Select: Applied to a focusable wrapper like a <div ngCombobox> or <button ngCombobox> element. Users select from a list of options.

  • Multiselect: A Combobox or Select paired with a multi-select ngListbox.

Imports:

import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
import {Listbox, Option} from '@angular/aria/listbox';

Directives: ngCombobox, ngComboboxPopup, ngComboboxWidget, ngListbox, ngOption.

<!-- Example 1: Standard Autocomplete -->
<div>
  <input
    ngCombobox
    #combobox="ngCombobox"
    [(value)]="searchString"
    [(expanded)]="isExpanded"
    placeholder="Search options..."
    class="select-trigger"
  />

  <ng-template ngComboboxPopup [combobox]="combobox">
    <ul
      ngComboboxWidget
      ngListbox
      #listbox="ngListbox"
      [(value)]="selectedValue"
      [activeDescendant]="listbox.activeDescendant()"
      class="dropdown-menu"
    >
      <li ngOption value="option1" label="Option 1" class="option">Option 1</li>
      <li ngOption value="option2" label="Option 2" class="option">Option 2</li>
    </ul>
  </ng-template>
</div>

<!-- Example 2: Select Component (Applied directly to a div trigger) -->
<div ngCombobox #select="ngCombobox" [(expanded)]="selectExpanded" class="select-trigger">
  <span class="select-text">{{ selectedValue() ?? 'Choose an option' }}</span>
  <span class="icon">▼</span>
</div>

<ng-template ngComboboxPopup [combobox]="select">
  <ul
    ngComboboxWidget
    ngListbox
    #selectListbox="ngListbox"
    [(value)]="selectedValues"
    [activeDescendant]="selectListbox.activeDescendant()"
    (click)="onCommit()"
    (keydown.enter)="onCommit()"
    class="dropdown-menu"
  >
    <li ngOption value="option1" label="Option 1" class="option">Option 1</li>
    <li ngOption value="option2" label="Option 2" class="option">Option 2</li>
  </ul>
</ng-template>

Styling Strategy: Style the popup container to look like a dropdown floating above content (often paired with CDK Overlay).

.select-trigger {
  width: 200px;
  padding: 8px;
  text-align: left;
}
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

4. Menu and Menubar

For actions, commands, and context menus (not for form selection).

Usage: The Menubar is a high-level navigation pattern designed for building desktop-style application command bars (e.g., File, Edit, View) that stay persistent across an interface. It is best utilized for organizing complex commands into logical top-level categories with full horizontal keyboard support, but it should be avoided for simple standalone action lists or mobile-first layouts where horizontal space is constrained.

Imports: import {MenuBar, Menu, MenuContent, MenuItem, MenuTrigger} from '@angular/aria/menu';

Directives: ngMenuBar, ngMenu, ngMenuItem, ngMenuTrigger, ngMenuContent.

<!-- Menubar Example -->
<div ngMenuBar class="menubar">
  <div ngMenuItem value="file" [submenu]="fileMenu" class="menubar-item">File</div>
  <div ngMenuItem value="edit" [submenu]="editMenu" class="menubar-item">Edit</div>
</div>

<div ngMenu #fileMenu="ngMenu" class="menu">
  <ng-template ngMenuContent>
    <div ngMenuItem value="new">New</div>
    <div ngMenuItem value="open">Open</div>
  </ng-template>
</div>

<div ngMenu #editMenu="ngMenu" class="menu">
  <ng-template ngMenuContent>
    <div ngMenuItem value="cut">Cut</div>
    <div ngMenuItem value="copy">Copy</div>
  </ng-template>
</div>

Styling Strategy: Use flexbox for the menubar. Hide/show submenus based on the trigger's state.

.menubar {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.menu {
  background: white;
  border: 1px solid #ccc;
  padding: 5px 0;
}
.menu li {
  padding: 5px 15px;
  cursor: pointer;
}

5. Tabs

Layered content sections where only one panel is visible.

Usage: The Tabs component is used to organize related content into distinct, navigable sections, allowing users to switch between categories or views without leaving the page. It is ideal for settings panels, multi-topic documentation, or dashboards, but should be avoided for sequential workflows (steppers) or when navigation involves more than 7–8 sections.

Imports: import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';

Directives: ngTabs, ngTabList, ngTab, ngTabPanel, ngTabContent.

<div ngTabs>
  <ul ngTabList [(selectedTab)]="selectedTabValue" class="tab-list">
    <li ngTab value="profile" class="tab-btn">Profile</li>
    <li ngTab value="security" class="tab-btn">Security</li>
  </ul>

  <div ngTabPanel value="profile" class="tab-panel">
    <ng-template ngTabContent>Profile Settings</ng-template>
  </div>
  <div ngTabPanel value="security" class="tab-panel">
    <ng-template ngTabContent>Security Settings</ng-template>
  </div>
</div>

Styling Strategy: Target [aria-selected="true"] on the tab buttons.

.tab-list {
  display: flex;
  border-bottom: 2px solid #ccc;
  list-style: none;
  padding: 0;
}
.tab-btn {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn[aria-selected='true'] {
  border-bottom-color: blue;
  font-weight: bold;
}
.tab-panel {
  padding: 20px;
}

6. Toolbar

Groups related controls (like text formatting).

Usage: The Toolbar is an organizational component designed to group frequently accessed, related controls into a single logical container. It is best used to enhance keyboard efficiency (via arrow-key navigation) and visual structure for workflows requiring repeated actions, such as text formatting or media controls.

Imports: import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';

Directives: ngToolbar, ngToolbarWidget, ngToolbarWidgetGroup.

<div ngToolbar class="toolbar">
  <div ngToolbarWidgetGroup role="group" aria-label="Formatting">
    <button
      ngToolbarWidget
      type="button"
      [attr.aria-pressed]="bold()"
      (click)="bold.set(!bold())"
      class="tool-btn"
    >
      B
    </button>
    <button
      ngToolbarWidget
      type="button"
      [attr.aria-pressed]="italic()"
      (click)="italic.set(!italic())"
      class="tool-btn"
    >
      I
    </button>
  </div>
</div>

Styling Strategy: Target [aria-pressed="true"] (for toggle buttons) or [aria-checked="true"] (for radio groups) within the toolbar.

.toolbar {
  display: flex;
  gap: 5px;
  padding: 8px;
  background: #f5f5f5;
}
.tool-btn {
  padding: 5px 10px;
  border: 1px solid #ccc;
}
.tool-btn[aria-pressed='true'],
.tool-btn[aria-checked='true'] {
  background: #ddd;
}

7. Tree

Displays hierarchical data (file systems, nested nav).

Usage: The Tree component is designed for navigating and displaying deeply nested, hierarchical data structures like file systems, organization charts, or complex site architectures. It should be used specifically for multi-level relationships where users need to expand or collapse branches, but it should be avoided for flat lists, data tables, or simple selection menus.

Imports: import {Tree, TreeItem, TreeItemGroup} from '@angular/aria/tree';

Directives: ngTree, ngTreeItem, ngTreeItemGroup.

<ul ngTree #tree="ngTree" [(value)]="selectedValues" class="tree">
  <li ngTreeItem [parent]="tree" value="documents" #docsItem="ngTreeItem">
    <span class="tree-label">Documents</span>
    <ul role="group">
      <ng-template ngTreeItemGroup [ownedBy]="docsItem" #docsGroup="ngTreeItemGroup">
        <li ngTreeItem [parent]="docsGroup" value="resume">Resume.pdf</li>
        <li ngTreeItem [parent]="docsGroup" value="cover-letter">CoverLetter.pdf</li>
      </ng-template>
    </ul>
  </li>
</ul>

Styling Strategy: Target [aria-expanded] to show/hide children or rotate chevron icons. Use padding-left on nested groups to show hierarchy.

.tree,
.tree-group {
  list-style: none;
  padding-left: 20px;
}
.tree-label::before {
  content: '▶ ';
  display: inline-block;
  transition: transform 0.2s;
}
li[aria-expanded='true'] > .tree-label::before {
  transform: rotate(90deg);
}

8. Grid

A two-dimensional interactive collection of cells enabling navigation via arrow keys.

Usage: Data tables, calendars, spreadsheets, and layout patterns for interactive elements. Directives: ngGrid, ngGridRow, ngGridCell, ngGridCellWidget.

<table ngGrid [multi]="true" [enableSelection]="true" class="grid-table">
  <tr ngGridRow>
    <th ngGridCell role="columnheader">Name</th>
    <th ngGridCell role="columnheader">Status</th>
  </tr>
  <tr ngGridRow>
    <td ngGridCell>Project A</td>
    <td ngGridCell [(selected)]="isSelected">
      <button ngGridCellWidget (activated)="onActivate()">Active</button>
    </td>
  </tr>
</table>

Styling Strategy: Target [aria-selected="true"] for selected cells and :focus-visible for the active cell (roving tabindex) or [aria-activedescendant] on the container.

.grid-table {
  border-collapse: collapse;
}
[ngGridCell] {
  padding: 8px;
  border: 1px solid #ddd;
}
[ngGridCell][aria-selected='true'] {
  background: #e3f2fd;
}
/* Focus state managed by roving tabindex */
[ngGridCell]:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: -2px;
}

9. Testing with Component Harnesses

Angular Aria provides standard Component Harnesses (based on @angular/cdk/testing) to make unit testing clean, robust, and decoupled from DOM structural details.

Imports:

import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {AccordionGroupHarness, AccordionHarness} from '@angular/aria/accordion/testing';
import {ListboxHarness, ListboxOptionHarness} from '@angular/aria/listbox/testing';
Example: Testing an Accordion with Harnesses
describe('MyAccordionComponent', () => {
  let fixture: ComponentFixture<MyAccordionComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    fixture = TestBed.createComponent(MyAccordionComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should expand accordion on toggle', async () => {
    // Get the harness by its trigger title
    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));

    expect(await accordion.isExpanded()).toBeFalse();

    // Expand the accordion
    await accordion.expand();

    expect(await accordion.isExpanded()).toBeTrue();
  });
});

10. Integration with Signal Forms

Because Angular Aria directives leverage Angular's modern model() signals for managing interactive values, they integrate out-of-the-box with Angular's new Signal Forms (@angular/forms/signals).

The [formField] directive automatically detects directives like ngCombobox or ngListbox as custom form controls because they expose a value model.

Imports:

import {form, schema, required} from '@angular/forms/signals';
import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
import {Listbox, Option} from '@angular/aria/listbox';
Example 1: Autocomplete Combobox inside a Form

Given a form model defined in your component:

protected readonly citySignal = signal({name: '', city: ''});
protected readonly myForm = form(this.citySignal, schema(f => {
  required(f.city);
}));

You bind it directly using [formField]:

<div>
  <label for="city-input">Choose your city:</label>
  <input
    id="city-input"
    ngCombobox
    #combobox="ngCombobox"
    [formField]="myForm.city"
    [(expanded)]="isExpanded"
    placeholder="Search cities..."
  />

  <ng-template ngComboboxPopup [combobox]="combobox">
    <ul
      ngComboboxWidget
      ngListbox
      #listbox="ngListbox"
      [(value)]="selectedValue"
      [activeDescendant]="listbox.activeDescendant()"
      class="dropdown-menu"
    >
      <li ngOption value="sfo" label="San Francisco">San Francisco</li>
      <li ngOption value="nyc" label="New York">New York</li>
    </ul>
  </ng-template>
</div>
Example 2: Select Component inside a Form

Apply ngCombobox directly to a focusable div trigger and bind to [formField]:

<div>
  <label for="city-select">Choose your city:</label>
  <div
    id="city-select"
    ngCombobox
    #select="ngCombobox"
    [formField]="myForm.city"
    [(expanded)]="isExpanded"
    class="select-trigger"
  >
    <span class="select-text">{{ myForm.city.value() || 'Choose your city' }}</span>
    <span class="icon">▼</span>
  </div>

  <ng-template ngComboboxPopup [combobox]="select">
    <ul
      ngComboboxWidget
      ngListbox
      #selectListbox="ngListbox"
      [(value)]="selectedValues"
      [activeDescendant]="selectListbox.activeDescendant()"
      (click)="onCommit()"
      (keydown.enter)="onCommit()"
      class="dropdown-menu"
    >
      <li ngOption value="sfo" label="San Francisco">San Francisco</li>
      <li ngOption value="nyc" label="New York">New York</li>
    </ul>
  </ng-template>
</div>
Example 3: Standalone Listbox (Multi-select) inside a Form

You can bind a multi-selectable Listbox directly to a form array:

<ul ngListbox [formField]="myForm.interests" [multi]="true" class="interest-list">
  <li ngOption value="sports">Sports</li>
  <li ngOption value="music">Music</li>
  <li ngOption value="tech">Technology</li>
</ul>

General Rules for Agents

  1. Never use native HTML elements like <select> when asked to implement these specific Aria patterns. Use the ng* directives.

  2. Handle CSS manually: Remember that Angular Aria does NOT provide styles. You must write the CSS, targeting the native ARIA attributes (aria-expanded, aria-selected, etc.) that the directives automatically toggle.

  3. Lazy Loading: Always use the provided structural directives (ngAccordionContent, ngTabContent, ngMenuContent, ngComboboxPopup, ngTreeItemGroup) inside ng-template for heavy content panels or nested groups to ensure they are lazily rendered.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an MCP server, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Google LLC
Publisher
Angular (Google) (Official)
Distributed by
Angular (Google)
Source
angular/skills · angular-developer · commit 9274c6e
Licence
MIT License (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Google LLC or Angular (Google).

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download angular-developer.zip