What is an Attribute Directive in Angular?

1. What is an Attribute Directive?

An Attribute Directive is an Angular directive used to change the appearance or behavior of an existing HTML element, component, or another directive.

Unlike a component, an attribute directive does not have its own HTML template.

Example:

<p appHighlight>Welcome to Angular</p>

Here, appHighlight is a custom attribute directive that can modify the <p> element.

Simple definition: An attribute directive changes how an existing element looks or behaves without replacing its structure.

2. Why Do We Need Attribute Directives?

Suppose several elements in an application need the same behavior, such as:

• Highlighting an element
• Changing text/background style
• Adding hover behavior
• Controlling element interaction
• Applying reusable DOM behavior

Instead of repeating the same logic in multiple components, we can create a reusable attribute directive.

For example:

<p appHighlight>Angular</p>

<h2 appHighlight>ASP.NET Core</h2>

<div appHighlight>Microservices</div>

The same directive behavior can be reused on different elements.

3. Full Simple Sample Program

Let's create an appHighlight directive that changes the background when the mouse enters the element and restores it when the mouse leaves.

highlight.ts

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

@Directive({
  selector: '[appHighlight]'
})
export class Highlight {

  constructor(private element: ElementRef) {
  }

  @HostListener('mouseenter')
  onMouseEnter() {
    this.element.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.element.nativeElement.style.backgroundColor = '';
  }
}

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Highlight],
  templateUrl: './app.html'
})
export class App {
}

app.html

<h1>Attribute Directive Example</h1>

<p appHighlight>
  Move the mouse over me.
</p>

<h2 appHighlight>
  Angular Attribute Directive
</h2>

4. Program Explanation

@Directive

@Directive({
  selector: '[appHighlight]'
})

@Directive tells Angular that the class represents a directive.

The selector:

'[appHighlight]'

means Angular looks for an HTML attribute named:

appHighlight

For example:

<p appHighlight>Hello</p>

ElementRef

constructor(private element: ElementRef) {
}

ElementRef gives the directive access to the host DOM element on which the directive is applied.

For:

<p appHighlight>Hello</p>

the host element is the <p> element.

@HostListener

@HostListener('mouseenter')
onMouseEnter()

@HostListener allows the directive to listen to events occurring on its host element.

Here it listens for:

mouseenter

When the mouse enters:

this.element.nativeElement.style.backgroundColor = 'yellow';

the element's background becomes yellow.

Similarly:

@HostListener('mouseleave')
onMouseLeave()

detects when the mouse leaves and removes the background color.

5. How It Works

The flow is:

User opens page
      ↓
Angular finds appHighlight
      ↓
Highlight directive is attached
      ↓
User moves mouse over element
      ↓
mouseenter event occurs
      ↓
onMouseEnter() executes
      ↓
Background becomes yellow

When the mouse leaves:

mouseleave
    ↓
onMouseLeave()
    ↓
Background restored

6. Built-in Attribute Directives

Angular provides built-in directives commonly used to change an element's appearance or behavior.

Examples include:

ngClass

Used to dynamically add or remove CSS classes.

<div [ngClass]="{ active: isActive }">
  Welcome
</div>

ngStyle

Used to dynamically set inline styles.

<div [ngStyle]="{ 'font-size': fontSize + 'px' }">
  Welcome
</div>

7. Attribute Directive vs Component Directive

Easy way to remember:

Component
   ↓
Creates/controls a UI view
   ↓
Has Template


Attribute Directive
   ↓
Changes existing element
   ↓
No Template

8. Advantages

• Reusable behavior — one directive can be used on many elements.
• Reduces duplicate code — common UI behavior stays in one place.
• Separation of concerns — directive-specific behavior is separated from components.
• Easy maintenance — changing the directive changes the behavior everywhere it is used.
• Works with existing elements — no need to create a new component for simple behavior.

9. Disadvantages

Attribute directives have few inherent disadvantages, but misuse can cause problems:

• Too many custom directives can make templates harder to understand.
• Direct DOM manipulation using ElementRef.nativeElement should be used carefully.
• Complex business logic should normally not be placed inside UI directives.
• A directive may be unnecessary when simple property binding or CSS can solve the problem.

For production code involving DOM manipulation, Angular's Renderer2 is often preferable to directly manipulating nativeElement.

10. Key Points

• An attribute directive changes the appearance or behavior of an existing element.
• It does not have its own template.
• Custom attribute directives are created using @Directive.
• Attribute selectors commonly use square brackets:

selector: '[appHighlight]'

• Usage:

<p appHighlight>Hello</p>

• ElementRef can provide access to the host element.
• @HostListener can listen to host-element events.
• ngClass and ngStyle are common built-in examples.
• Attribute directives are useful for reusable UI behavior.

11. Interview Questions and Answers

Q1. What is an attribute directive in Angular?

An attribute directive is used to change the appearance or behavior of an existing HTML element, component, or directive. It does not have its own template.

Q2. Which decorator is used to create a custom attribute directive?

The @Directive decorator is used.

@Directive({
  selector: '[appHighlight]'
})

Q3. Does an attribute directive have its own template?

No. An attribute directive works with an existing element rather than providing its own template.

Q4. Give examples of built-in attribute directives.

Common examples are:

ngClass
ngStyle

Q5. What is the difference between a component and an attribute directive?

A component has its own template, while an attribute directive modifies an existing element and does not have its own template.

Q6. Why do we use square brackets in the directive selector?

selector: '[appHighlight]'

The square brackets tell Angular that appHighlight should be matched as an attribute.

Therefore we use it as:

<p appHighlight>Hello</p>

Q7. What is HostListener in a directive?

@HostListener allows a directive to listen for events on its host element, such as click, mouseenter, or mouseleave.

@HostListener('click')
onClick() {
}

Q8. What is the best short interview definition?

An attribute directive is an Angular directive that changes the appearance or behavior of an existing element without creating its own template.

Simple ngClass Example

ngClass is a built-in Angular attribute directive used to dynamically add or remove CSS classes.

Full Example

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgClass],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  isActive = true;
}

app.html

<h2 [ngClass]="{ 'active': isActive }">
  Welcome to Angular
</h2>

<button (click)="isActive = !isActive">
  Change Style
</button>

app.css

.active {
  color: white;
  background-color: green;
  padding: 10px;
}

Explanation

This:

[ngClass]="{ 'active': isActive }"

means:

isActive = true
      ↓
Add "active" CSS class
      ↓
Text gets green background

isActive = false
      ↓
Remove "active" CSS class
      ↓
Normal appearance

When the button is clicked:

(click)="isActive = !isActive"

the value changes between true and false, so Angular dynamically adds or removes the active CSS class.

Key Point

[ngClass]="{ 'active': isActive }"

can be read as:

Apply the active class when isActive is true.