Custom Attribute Directives

Attribute directives change the appearance or behavior of an element without altering the DOM structure. They are applied as attributes on existing elements.

Basic Directive

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

@Directive({
  selector: '[appHighlight]',
  standalone: true,
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

<p appHighlight>This text has a yellow background</p>

Using @HostListener

@HostListener listens to events on the host element:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appTooltip]',
  standalone: true,
})
export class TooltipDirective {
  @HostListener('mouseenter')
  onMouseEnter(): void {
    console.log('Mouse entered');
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    console.log('Mouse left');
  }

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    console.log('Clicked at:', event.clientX, event.clientY);
  }
}

<button appTooltip>Hover over me</button>

Using @HostBinding

@HostBinding sets properties on the host element:

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

@Directive({
  selector: '[appHighlight]',
  standalone: true,
})
export class HighlightDirective {
  @Input() appHighlight = '';

  @HostBinding('style.backgroundColor')
  get backgroundColor(): string {
    return this.appHighlight || 'yellow';
  }

  @HostBinding('class.highlighted')
  get isHighlighted(): boolean {
    return !!this.appHighlight;
  }
}

<p appHighlight="lightblue">Blue highlight</p>
<p appHighlight>Default yellow highlight</p>

Directives can accept multiple inputs, inject services, and compose with other directives.

Multiple Inputs

import { Directive, Input, HostListener, HostBinding } from '@angular/core';

@Directive({
  selector: '[appResize]',
  standalone: true,
})
export class ResizeDirective {
  @Input() appResize: 'small' | 'medium' | 'large' = 'medium';
  @Input() resizable = true;

  @HostBinding('class.resize-small')
  get isSmall(): boolean { return this.appResize === 'small'; }

  @HostBinding('class.resize-medium')
  get isMedium(): boolean { return this.appResize === 'medium'; }

  @HostBinding('class.resize-large')
  get isLarge(): boolean { return this.appResize === 'large'; }

  @HostBinding('style.cursor')
  get cursor(): string { return this.resizable ? 'resize' : 'default'; }
}

<div appResize="large" [resizable]="true">Resizable content</div>

Injecting Services in Directives

import { Directive, inject } from '@angular/core';
import { NotificationService } from './notification.service';

@Directive({
  selector: '[appConfirm]',
  standalone: true,
})
export class ConfirmDirective {
  private notification = inject(NotificationService);

  @HostListener('click')
  onClick(): void {
    const confirmed = confirm('Are you sure?');
    if (confirmed) {
      this.notification.show('Action confirmed');
    }
  }
}

Directive with Renderer2 (Safe DOM Manipulation)

Always use Renderer2 instead of direct DOM access for server-side rendering compatibility:

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

@Directive({
  selector: '[appLoading]',
  standalone: true,
})
export class LoadingDirective {
  private el = inject(ElementRef);
  private renderer = inject(Renderer2);

  @Input() set appLoading(isLoading: boolean) {
    if (isLoading) {
      this.renderer.addClass(this.el.nativeElement, 'loading');
      this.renderer.setAttribute(this.el.nativeElement, 'aria-busy', 'true');
    } else {
      this.renderer.removeClass(this.el.nativeElement, 'loading');
      this.renderer.removeAttribute(this.el.nativeElement, 'aria-busy');
    }
  }
}

<div [appLoading]="isLoading">Content</div>