Angular Directives

This is a comprehensive reference for Angular 21 directive patterns, covering attribute directives, structural directives, and the newer directive composition API. You'll want this when building reusable DOM behaviors or working with Angular's hostDirectives feature. The examples are practical and show both traditional decorators and the newer signal-based inputs. The code snippets lean heavily on best practices like using Renderer2 for DOM manipulation and keeping directives focused on single responsibilities. It's current for Angular 21 and includes the modern control flow syntax, though if you're still on older versions you'll need to mentally translate some of the examples back to NgModule patterns.

skills.sh installs: 176
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Angular Directives

Version: Angular 21 (2025) Tags: Directives, Components, DOM, Custom Directives

References: Directives Guide • Attribute Directives • Structural Directives

API Changes

This section documents recent version-specific API changes.

NEW: Directive composition API — Use hostDirectives to compose directives source
NEW: Signal inputs in directives — Use input() for reactive directive properties
NEW: Standalone directives — All directives can be standalone
NEW: Control flow syntax — @if, @for, @switch replace *ngIf, *ngFor

Best Practices

Create attribute directives for reusable behavior

import { Directive, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() set appHighlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color || 'yellow');
  }

SKILL.md on GitHub