Directives in Angular

Directives

Directives are instructions in the DOM that tell Angular to change the style or behavior of DOM elements. Directives are TypeScript classes with a @Directive() decorator. In Angular 21, the new built-in control flow syntax (@if, @for, @switch) replaces the older structural directives for most use cases. There are mainly four types of directives available in Angular:-

Components Directives.
Structural Directives.
Attribute directives.
Custom Directives.

Components Directives

Component directives are one of the most commonly used directives in Angular. It is also known as self-contained directives. Component directives controls the details about how the component should be instantiated, processed and utilized at runtime.

Component Directive

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Tutorials Logic</h1>`
})
export class AppComponent { }

Built-in Control Flow (Angular 17+ / Angular 21)

Angular 17+ introduced a new built-in control flow syntax that replaces *ngIf, *ngFor, and *ngSwitch. It is more readable and performs better with zoneless change detection.

@if / @for / @switch

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <!-- @if replaces *ngIf -->
    @if (isLoggedIn()) {
      <p>Welcome back!</p>
    } @else {
      <p>Please log in.</p>
    }

    <!-- @for replaces *ngFor -->
    <ul>
      @for (item of items; track item.id) {
        <li>{{ item.name }}</li>
      } @empty {
        <li>No items found.</li>
      }
    </ul>

    <!-- @switch replaces *ngSwitch -->
    @switch (status()) {
      @case ('active')   { <span style="color:green">Active</span> }
      @case ('inactive') { <span style="color:red">Inactive</span> }
      @default           { <span>Unknown</span> }
    }

    <button (click)="toggle()">Toggle Login</button>
  `
})
export class AppComponent {
  isLoggedIn = signal(false);
  status = signal('active');
  items = [
    { id: 1, name: 'Angular' },
    { id: 2, name: 'React' },
    { id: 3, name: 'Vue' }
  ];
  toggle() { this.isLoggedIn.update(v => !v); }
}

Attribute Directives

Attribute directives change the appearance or behavior of a DOM element. Angular has built-in attribute directives like [ngStyle] and [ngClass].

ngClass & ngStyle

import { Component, signal } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgClass, NgStyle],
  template: `
    <p [ngClass]="{ 'active': isActive, 'bold': isBold }">
      Styled with ngClass
    </p>
    <p [ngStyle]="{ 'color': textColor(), 'font-size': '18px' }">
      Styled with ngStyle
    </p>
    <button (click)="toggleActive()">Toggle Active</button>
  `,
  styles: ['.active { background: #e8f5e9; } .bold { font-weight: bold; }']
})
export class AppComponent {
  isActive = true;
  isBold = false;
  textColor = signal('blue');
  toggleActive() { this.isActive = !this.isActive; }
}

Custom Directives

Create custom attribute directives using the @Directive decorator. In Angular 21, custom directives can also be standalone.

Custom Directive

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

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

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.backgroundColor = this.color();
  }

  @HostListener('mouseleave') onLeave() {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HighlightDirective],
  template: `
    <p appHighlight="lightblue">Hover over me!</p>
    <p appHighlight>Hover - default yellow</p>
  `
})
export class AppComponent { }

Previous Next