# Build Angular Signal Components

Modern Angular components require signal APIs, accessible templates, and current standalone patterns. This skill guides Claude, Codex, and Claude Code to create or refactor Angular v20+ components consistently.

## Install

```bash
npx skillstore add analogjs/angular-component
```

## Metadata

- - Slug: analogjs-angular-component
- - Version: 1.0.0
- - Author: analogjs
- - GitHub username: analogjs
- - License: MIT
- - Repository: https://github.com/analogjs/angular-skills/tree/main/skills/angular-component/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: safe
- - Quality score: 76
- - Public page: https://skillstore.pages.dev/skills/analogjs-angular-component
- - Manifest: https://skillstore.pages.dev/api/skills/analogjs-angular-component/manifest

## Capabilities

- Creates standalone Angular component examples using v20\+ defaults.
- Uses signal-based input, output, model, computed, and query patterns.
- Shows host bindings for classes, attributes, styles, and keyboard events.
- Applies native Angular control flow syntax instead of structural directives.
- Includes accessibility requirements for ARIA, keyboard navigation, and focus states.
- References advanced patterns for content projection, dependency injection, and deferred components.

## Use Cases

- Create New UI Components: Generate standalone components with signal inputs, outputs, host bindings, and accessible template structure.
- Modernize Existing Components: Refactor older Angular component patterns toward signals, native control flow, and OnPush-friendly state.
- Standardize Team Patterns: Keep component examples consistent across content projection, queries, dependency injection, and lazy rendering.

## Prompt Templates

### Create a Basic Component

```
Create an Angular v20 standalone user card component with signal inputs for name, avatar URL, and active state. Include accessible markup and host bindings.
```

### Add Interaction and Outputs

```
Build an Angular standalone toggle component using signal inputs and outputs. Add host bindings for ARIA state, click handling, and keyboard activation.
```

### Refactor to Signal Patterns

```
Refactor this Angular component from decorator inputs and outputs to signal input and output APIs. Use native control flow and avoid ngClass and ngStyle.
```

### Design a Composed Component System

```
Design an Angular tabs component using content queries, projected tab panels, signal state, accessible roles, and current Angular v20 template syntax.
```

## Limitations

- Does not run Angular CLI commands or install project dependencies.
- Does not verify generated code against a live application build.
- Focuses on components, not routing, services, testing, or full application architecture.
- Assumes Angular v20\+ conventions and may not fit older Angular projects.

## Best Practices

- Provide the target Angular version and existing component conventions before requesting code.
- Ask for accessibility behavior when the component is interactive.
- Review generated examples inside your project build and test setup.

## Anti Patterns

- Do not use it for non-Angular frameworks or legacy Angular-only syntax.
- Do not request generated components without describing inputs, outputs, and user interactions.
- Do not skip project-specific review for styling, testing, and dependency constraints.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T08:10:59.746\+00:00
- - Summary: Static analysis reported many high and medium indicators, but review found they are false positives in Markdown documentation and TypeScript examples. The files do not define executable scripts, shell commands, credential access, data exfiltration, or prompt injection attempts, so the skill is safe to publish.

## Stats

- - Views: 116
- - Downloads: 4
- - Favorites: 0
- - Popularity score: 0