angular-directives

Create reusable Angular v20+ directives for DOM manipulation and composition.

Updated Dec 24, 2024

Search Tags:#typescript #frontend #angular #directives #component-architecture #dom-manipulation

Ready to run

npx skills add https://github.com/walkingriver/Angular-Apprentice --skill angular-directives-walkingriver

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/walkingriver/Angular-Apprentice/tree/main/.agents/skills/angular-directives
Command: npx skills add https://github.com/walkingriver/Angular-Apprentice --skill angular-directives-walkingriver

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Custom Angular directives encapsulate DOM manipulation logic into reusable patterns.

Core Features & Use Cases

Attribute directives for modifying element appearance or behavior
Structural directives for portals, overlays, and content insertion points
Host directives for composing reusable behaviors on components
Directive composition API to combine multiple directives into a single component
Exposing directive outputs to enable cross-component communication
Guidance on best practices for reusable DOM behavior across an Angular app

Quick Start

Create a new directive in your Angular project and apply it to a component to observe reusable behavior.

Frequently Asked Questions about angular-directives

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a custom Angular directive to encapsulate reusable DOM manipulation logic?▼

Custom Angular directives encapsulate DOM manipulation logic into reusable patterns. Use attribute directives to modify element appearance or behavior, or structural directives for portals and content insertion points to extend DOM capabilities.

What is the directive composition API in Angular and when should I use it?▼

The directive composition API combines multiple host directives into a single component to compose reusable behaviors. Use it when you need to apply shared DOM behaviors across components and enable cross-component communication through exposed directive outputs.

Does this approach to Angular directives work with signals and dependency injection features?▼

Yes, implementing reusable Angular directives requires Angular v20+ with directive APIs, including signals and dependency injection features. A TypeScript-enabled project is also required to properly build and reuse the directive patterns.

What is the difference between attribute directives and structural directives in Angular?▼

Attribute directives modify element appearance or behavior directly, while structural directives handle portals, overlays, and content insertion points. Both encapsulate DOM manipulation into reusable patterns for extending Angular component architecture.

How do I expose Angular directive outputs for cross-component communication?▼

Expose directive outputs to enable cross-component communication by leveraging host directives and the directive composition API. This allows reusable DOM behaviors to emit events that parent components can listen to and react upon.

Can I use host directives to compose reusable behaviors on existing Angular components?▼

Host directives compose reusable behaviors directly on Angular components. By using the directive composition API, you combine multiple directives into a single component, extending DOM behavior without modifying the original component template.