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
hostDirectivesto 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
ts
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');
}
constructor(private el: ElementRef, private renderer: Renderer2) {}
}
- •Use @Input and @Output for directive communication
ts
@Directive({
selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
@Input() trackName = 'default';
@Output() clicked = new EventEmitter<string>();
@HostListener('click')
onClick() {
this.clicked.emit(this.trackName);
}
}
- •Use TemplateRef for structural directives
ts
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appUnless]'
})
export class UnlessDirective {
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcRef.createEmbeddedView(this.templateRef);
} else {
this.vcRef.clear();
}
}
constructor(
private templateRef: TemplateRef<any>,
private vcRef: ViewContainerRef
) {}
}
- •Use ViewContainerRef for complex structural logic
ts
@Directive({ selector: '[appDynamic]' })
export class DynamicDirective {
constructor(
private vcr: ViewContainerRef,
private templateRef: TemplateRef<any>
) {
this.vcr.createEmbeddedView(this.templateRef);
}
}
- •Use hostDirectives for composition
ts
@Component({
selector: 'app-card',
standalone: true,
imports: [HighlightDirective],
hostDirectives: [
{
directive: HighlightDirective,
inputs: ['appHighlight: highlight']
}
],
template: `<ng-content></ng-content>`
})
export class CardComponent {}
- •Use standalone: true for modern directives
ts
@Directive({
selector: '[appStandalone]',
standalone: true
})
export class StandaloneDirective {}
- •Use signals in directives
ts
@Directive({
selector: '[appSignal]'
})
export class SignalDirective {
value = input<string>('');
ngOnInit() {
console.log(this.value());
}
}
- •Use @HostBinding for property binding
ts
@Directive({
selector: '[appDisable]'
})
export class DisableDirective {
@Input() set disabled(value: boolean) {
this.hostBinding.nativeElement.disabled = value;
}
constructor(private hostBinding: ElementRef) {}
}
- •Keep directives focused — One responsibility
ts
// ✅ Good - focused directive
@Directive({ selector: '[appTooltip]' })
// ❌ Bad - too many responsibilities
@Directive({ selector: '[appTooltip][appTooltipMaxWidth][appTooltipTheme]' })
- •Use descriptive selectors
ts
// ✅ Good
@Directive({ selector: '[appUserCard]' })
// ❌ Bad
@Directive({ selector: '[appUc]' })