Angular Directives

Solid reference for building Angular directives the modern way with v20+ patterns. Covers attribute directives using the new `input()` function and `host` property instead of decorators, plus structural directives for actual DOM manipulation like portals and lazy rendering. The examples show real scenarios like tooltips, click-outside detection, and keyboard shortcuts rather than toy demos. Smart guidance on using native `@if/@for/@switch` for control flow instead of rolling custom structural directives. The host directive composition examples are especially useful for building reusable behavior mixins across components.

skills.sh installs: 5.7K
GitHub stars: 587
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add analogjs/angular-skills --skill angular-directives --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular Directives

⚠️ Deprecated. This skill is no longer maintained, and its guidance has been removed rather than left to go stale. The Angular team now publishes official skills at angular/skills — install those instead:
npx skills add https://github.com/angular/skills
To remove these: npx skills remove analogjs/angular-skills

The previous contents of this skill remain available in this repository's git history.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly