skills.rest
oguzhan18
oguzhan18COMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-directives

Author Angular attribute and structural directives with hostDirectives and signals.

6|1|Updated Feb 18, 2026
Search Tags:#angular#signals#directives#host-directives#structural-directives#attribute-directives
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-directives-oguzhan18
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-directives
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-directives-oguzhan18

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular directives can become hard to compose, reuse, and modernize across large applications; this Skill consolidates current API changes, best practices, and composition patterns so developers can author predictable, maintainable directives that align with Angular 21 features.

Core Features & Use Cases

  • Directive composition: Guidance on using hostDirectives to compose behaviors across components and directives for reusable UI patterns.
  • Reactive inputs and signals: Patterns for using input() signals inside directives and integrating reactive state with directive logic.
  • Standalone and migration: Advice for migrating classic directives to standalone directives and updating structural directives to new control-flow syntax.
  • Template and DOM control: Practical usage of TemplateRef, ViewContainerRef, HostBinding, and HostListener for structural and attribute directives.
  • Use Case: Refactor a legacy highlight and click tracking directive set to use hostDirectives, signals for inputs, and standalone configuration so they are composable and tree-shakable in an Angular 21 app.

Quick Start

Review my directive implementation and recommend how to refactor it for hostDirectives, signals-based inputs, and standalone usage.

Frequently Asked Questions about angular-directives

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

FAQPage Schema
How do I use hostDirectives to compose Angular directive behaviors?▼

Angular structural directives manipulate the DOM layout using TemplateRef and ViewContainerRef. They conditionally render templates based on application logic, utilizing the new control-flow syntax to manage structural template rendering dynamically.

How do I refactor legacy Angular directives to use signals and standalone configuration?▼

Refactoring legacy Angular directives involves migrating to standalone configuration and replacing traditional inputs with input() signals. This modernization ensures your attribute and structural directives are composable, reactive, and tree-shakable within Angular 21 projects.

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

Attribute directives change the appearance or behavior of existing elements using HostBinding and HostListener, while structural directives add or remove DOM elements using TemplateRef and ViewContainerRef. Both can utilize signals and standalone configurations for modern Angular development.

Can I use input() signals inside structural directives with the new control-flow syntax?▼

hostDirectives allow you to compose multiple standalone directive behaviors into a single host component without modifying the host. This pattern ensures reusable UI behaviors remain tree-shakable and predictable across large Angular 21 applications.

Related Skills

Explore More Software Engineering Skills→
Faouzi91Faouzi91

angular-component

Generate Angular 21+ standalone components with OnPush and signals.

Community
Intermediate
WesleyMarinhoWesleyMarinho

angular-directives

Develop custom Angular directives for UI enhancement and DOM manipulation.

Community
Intermediate
RogerioSobrinhoRogerioSobrinho

angular-patterns

Apply standardized Angular 17+ patterns to components, directives, services, and routing.

Community
Advanced
walkingriverwalkingriver

angular-directives

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

Community
Advanced