Angular Architecture Host Directives Adoption

---
name: angular-architecture-host-directives-adoption
description: "Adopt Angular host directives in bounded post-upgrade modernization slices to share host behavior, reduce wrapper components, and replace inheritance-heavy patterns without mixing the change into an Angular version hop."
license: MIT
metadata:
  ngautopilot-id: "angular.architecture.host-directives-adoption"
  ngautopilot-source: "skills/angular/architecture/host-directives-adoption/SKILL.md"
  ngautopilot-version: "0.10.0"
---


# Host Directives Adoption

## Purpose

Adopt host directives in bounded modernization slices after the app is stable on the target Angular version.

## When to Use

- The app is already on a stable Angular version.
- The codebase has wrapper components that only forward behavior.
- The team wants to share host behavior without extending base classes.

## When Not to Use

- The app is still in a major version upgrade.
- The target slice is not well tested.
- The app relies on component wrappers for public API contracts that are not ready to change.

## Required Inputs

- wrapper components
- shared directive behavior
- host bindings and listeners
- test coverage for the target slice
- accessibility expectations

## Procedure

1. Identify wrapper components that only proxy behavior.
2. Extract the shared behavior into a directive.
3. Apply host directives to one bounded slice.
4. Validate inputs, outputs, events, and styles.
5. Remove wrappers only after the slice is stable.

## Do

- Prefer incremental migration.
- Keep public APIs stable unless the slice explicitly changes them.
- Validate keyboard and accessibility behavior.

## Do Not

- Do not convert unrelated wrappers in one pass.
- Do not mix this with version upgrade work.
- Do not hide public API changes behind host directives without tests.

## Review Checklist

- [ ] Slice is bounded.
- [ ] Wrapper behavior is preserved or intentionally changed.
- [ ] Tests pass.
- [ ] Accessibility and events are validated.

## Expected Output

1. Slice refactored with host directives.
2. Remaining wrapper components.
3. Test result.
4. Follow-up list.

## Exit Criteria

- Adoption is incremental.
- The next slice is clear.