Why directives are needed in Angular - See It in Action

Why directives are needed in Angular

📖 Scenario: You are building a simple Angular app to display a list of tasks. You want to reuse a piece of HTML code that highlights tasks that are completed. Instead of repeating the same code everywhere, you will create a directive to add this highlight behavior.

🎯 Goal: Build an Angular directive that changes the background color of a task item when it is marked as completed. This shows why directives are needed to add reusable behavior to HTML elements.

📋 What You'll Learn

Create a standalone Angular directive named HighlightCompletedDirective

Use an input property named appHighlightCompleted to receive a boolean indicating if the task is completed

Change the background color of the host element to lightgreen if the task is completed

Keep the background color transparent if the task is not completed

Use the directive in a component template to highlight completed tasks

💡 Why This Matters

🌍 Real World

Directives are used in Angular apps to add custom behavior to elements, such as highlighting, validation, or animations, without repeating code.

💼 Career

Understanding directives is essential for Angular developers to build clean, reusable, and maintainable UI components.

1

Create the Angular directive file

Create a standalone Angular directive named HighlightCompletedDirective with the selector [appHighlightCompleted]. Import Directive and Input from @angular/core.

Angular

// Your code here

Hint

Use @Directive decorator with selector and standalone: true. Add an @Input() property named appHighlightCompleted initialized to false.

2

Add a configuration property for background color

Inside the HighlightCompletedDirective class, create a property named highlightColor and set it to the string 'lightgreen'.

Angular

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

@Directive({
  selector: '[appHighlightCompleted]',
  standalone: true
})
export class HighlightCompletedDirective {
  @Input() appHighlightCompleted = false;

  // Your code here
}

Hint

Just add a simple property highlightColor with the value 'lightgreen' inside the class.

3

Apply the background color based on the input

Inject ElementRef and Renderer2 in the constructor. Use a setter on appHighlightCompleted to change the host element's background color to highlightColor if true, or to 'transparent' if false.

Angular

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

@Directive({
  selector: '[appHighlightCompleted]',
  standalone: true
})
export class HighlightCompletedDirective {
  @Input() appHighlightCompleted = false;

  highlightColor = 'lightgreen';

  // Your code here
}

Hint

Use ElementRef and Renderer2 to safely change the background color of the host element inside the setter of appHighlightCompleted.

4

Use the directive in a component template

In a component template, use the directive by adding [appHighlightCompleted]="task.completed" on a <li> element inside an *ngFor loop over tasks. Assume tasks is an array of objects with name and completed boolean properties.

Angular

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

@Directive({
  selector: '[appHighlightCompleted]',
  standalone: true
})
export class HighlightCompletedDirective {
  highlightColor = 'lightgreen';

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @Input() set appHighlightCompleted(value: boolean) {
    const color = value ? this.highlightColor : 'transparent';
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
  }
}

// Your code here

Hint

Use *ngFor="let task of tasks" to loop and add [appHighlightCompleted]="task.completed" on the <li> elements.

Practice

1. Why are directives needed in Angular?

easy

A. To add special behavior to HTML elements

B. To write plain CSS styles

C. To create backend APIs

D. To manage database connections

Solution

1. Step 1: Understand the role of directives

   Directives allow you to add custom behavior to HTML elements beyond standard HTML capabilities.

2. Step 2: Compare with other options

   Options A, C, and D relate to styling, backend, and database, which are not the purpose of directives.

3. Final Answer:

   To add special behavior to HTML elements -> Option A

4. Quick Check:

   Directives add behavior = B [OK]

Hint: Directives change HTML behavior, not backend or styles [OK]

Common Mistakes:

• Confusing directives with CSS styling
• Thinking directives manage backend logic
• Assuming directives handle database tasks

2. Which of the following is the correct syntax to apply a directive in Angular?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify Angular directive syntax

   Structural directives use the asterisk (*) before the directive name to modify the DOM structure.

2. Step 2: Check other symbols

   # is for template references, ? and @ are invalid for directives.

3. Final Answer:

   <div *myDirective></div> -> Option C

4. Quick Check:

   Structural directives use * prefix = A [OK]

Hint: Look for * before directive name for structural directives [OK]

Common Mistakes:

• Using # which is for template references
• Using ? or @ which are invalid syntax
• Omitting the * for structural directives

3. Given this Angular directive usage:

<button appHighlight>Click Me</button>

What will happen when this directive is applied?

medium

A. Nothing happens

B. The button text changes to uppercase

C. The button becomes disabled

D. The button background color changes

Solution

1. Step 1: Understand typical directive behavior

   Directives like 'appHighlight' usually change the appearance, such as background color, to highlight elements.

2. Step 2: Evaluate other options

   Changing text case or disabling button is less common for a highlight directive; 'Nothing happens' is unlikely if directive is implemented.

3. Final Answer:

   The button background color changes -> Option D

4. Quick Check:

   Highlight directive changes background = A [OK]

Hint: Highlight means color change, not disabling or text case [OK]

Common Mistakes:

• Assuming text changes instead of style
• Thinking directive disables element
• Believing directive has no effect

4. What is wrong with this directive usage?

<div *myDirective>Content</div>

Assuming myDirective is a component, not a structural directive.

medium

A. Components cannot be used with * syntax

B. The directive name is invalid

C. The div tag cannot have directives

D. There is no closing tag

Solution

1. Step 1: Understand directive vs component usage

   Structural directives use * syntax; components are used as elements, not with *.

2. Step 2: Check other options

   Directive name can be valid, div can have directives, and closing tag is present.

3. Final Answer:

   Components cannot be used with * syntax -> Option A

4. Quick Check:

   * syntax only for structural directives = D [OK]

Hint: Use * only with structural directives, not components [OK]

Common Mistakes:

• Using * with components
• Thinking div can't have directives
• Ignoring correct closing tags

5. You want to create a reusable directive that changes text color based on a condition. Which approach best explains why directives are needed here?

hard

A. Directives replace components for UI layout

B. Directives let you add reusable behavior to any HTML element without changing its structure

C. Directives are only for creating new HTML tags, not for behavior

D. Directives are used to fetch data from servers

Solution

1. Step 1: Identify directive purpose in reuse

   Directives add behavior like changing text color reusable on any element without altering HTML structure.

2. Step 2: Eliminate incorrect uses

   Directives do more than create tags, do not replace components, and do not fetch data.

3. Final Answer:

   Directives let you add reusable behavior to any HTML element without changing its structure -> Option B

4. Quick Check:

   Directives add reusable behavior = C [OK]

Hint: Directives add behavior reuse without new tags or data fetching [OK]

Common Mistakes:

• Thinking directives only create new tags
• Confusing directives with components
• Assuming directives handle data fetching