angular-directives

The `angular-directives` skill enables developers to create custom directives in Angular v20+ to enhance DOM manipulation and extend element behavior. This skill addresses the common need for reusable, composable behaviors in Angular applications, allowing developers to encapsulate functionality in directives rather than repeatedly writing similar code across components. By leveraging attribute directives, structural directives, and host directives, developers can modify element appearance, handle events, and compose behaviors in a maintainable and scalable way. The skill emphasizes modern Angular practices, including using native @if/@for/@switch for control flow instead of custom structural directives, ensuring compatibility with Angular's latest standards.

Key features of this skill include creating attribute directives to modify element behavior or styling, utilizing the host property for binding events and attributes, and managing class and style dynamically. It also supports event handling for both DOM and custom events, and enables keyboard shortcut handling through directive-based configuration. The skill provides examples of reusable directives like highlighting text, tooltips, button styling, click outside detection, and shortcut key handling. It leverages Angular's reactive patterns with input/output decorators and effects to maintain efficient and responsive behavior.

This skill is ideal for Angular developers aiming to improve code reusability, reduce boilerplate, and create modular UI components. It is particularly useful for teams building complex web applications where consistent DOM behavior and UI interactions are needed across multiple components. Target users include frontend developers working with Angular v20+ who want to implement custom, reusable directives for behavior composition, styling, event handling, and accessibility improvements.