angular-directives

Implement Angular directives for reusable DOM behaviors using the Angular Directives API.

1|Updated Oct 12, 2022

Search Tags:#frontend #angular #portal #directives #host-directives #dom-manipulation

Ready to run

npx skills add https://github.com/plastikaweb/plastikspace --skill angular-directives-plastikaweb

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a set of reusable Angular directives to encapsulate common DOM behaviors, reducing boilerplate and promoting consistent patterns across components.

Core Features & Use Cases

Attribute Directives: modify element appearance or behavior (e.g., highlight, tooltip) without altering markup.
Structural Directives: create portals, overlays, and dynamic insertion points (e.g., appPortal, appLazyRender, TemplateOutlet) to manage DOM structure.
Host Directives & Composition: compose multiple directives on a component to share behavior and enable reusable patterns.

Quick Start

Create a new directive using the Angular Directives API (Directive, Input, Output, TemplateRef, ViewContainerRef) and apply it to an element in a template. For example, add an appHighlight directive to a paragraph to change its background when hovered.

Frequently Asked Questions about angular-directives

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

FAQPage Schema

How do I create reusable Angular directives for DOM manipulation?▼

Create reusable Angular directives by using the Directives API with Input and Output decorators to encapsulate DOM behaviors, reducing component boilerplate. This Skill provides patterns for attribute, structural, and host directives to extend element functionality.

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

Attribute directives modify element appearance or behavior without altering markup, structural directives manage DOM structure using TemplateRef and ViewContainerRef for dynamic insertion, and host directives compose multiple behaviors onto a single component for reusable patterns.

How do I build dynamic portals and overlays in Angular?▼

Build dynamic portals and overlays in Angular by creating structural directives that leverage TemplateRef and ViewContainerRef to establish dynamic insertion points. This approach manages DOM structure directly, enabling lazy rendering and template outlet composition.

Can I use Angular host directives to compose multiple behaviors on a single component?▼

Yes, you can use Angular host directives to compose multiple directives on a single component, enabling shared behaviors and reusable composition patterns. This technique allows you to stack functionalities without duplicating logic across individual components.

Does this Angular directive approach work with Angular v20+?▼

Yes, this approach applies to building attribute, structural, and host directives specifically in Angular v20+. It utilizes the modern Angular Directives API, including inject, TemplateRef, and ViewContainerRef, to ensure compatibility with current portal and composition requirements.

How do I pass data into an Angular attribute directive?▼

Pass data into an Angular attribute directive by using the Input decorator within the Directive API to accept dynamic values. This allows the directive to modify element appearance or behavior, such as changing a background color on hover, based on provided inputs.