Directive execution and DOM manipulation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a standalone Angular directive that changes the background color of an element.

Angular

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

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = [1];
  }
}

Drag options to blanks, or click blank then click option'

Ayellow

B'yellow'

C'backgroundColor'

D'blue'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the color string

Using a variable name instead of a string

Using a property name instead of a color value

The backgroundColor style property expects a string value representing the color. So, it must be wrapped in quotes like 'yellow'.

2fill in blank

medium

Complete the code to listen for click events inside a directive and log a message.

Angular

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

@Directive({
  selector: '[appClickLogger]',
  standalone: true
})
export class ClickLoggerDirective {
  @HostListener('click') onClick() {
    console.log([1]);
  }
}

Drag options to blanks, or click blank then click option'

Aclick

BElement clicked!

C'Element clicked!'

Dthis.el

Attempts:

3 left

💡 Hint

Common Mistakes

Logging a variable that is not defined

Forgetting quotes around the string

Logging the event object without defining it

The console.log expects a string message, so it must be wrapped in quotes.

3fill in blank

hard

Fix the error in the directive that tries to add a CSS class to the host element.

Angular

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

@Directive({
  selector: '[appAddClass]',
  standalone: true
})
export class AddClassDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.classList.[1]('active');
  }
}

Drag options to blanks, or click blank then click option'

Apush

Bappend

Cinsert

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' or 'push' which are array methods

Using 'insert' which is not a classList method

The correct method to add a CSS class to an element's classList is 'add'.

4fill in blank

hard

Fill both blanks to create a directive that toggles a CSS class on click.

Angular

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

@Directive({
  selector: '[appToggleClass]',
  standalone: true
})
export class ToggleClassDirective {
  private isActive = false;

  constructor(private el: ElementRef) {}

  @HostListener('click') onClick() {
    this.isActive = !this.isActive;
    this.el.nativeElement.classList.[1]('active');
    if (!this.isActive) {
      this.el.nativeElement.classList.[2]('active');
    }
  }
}

Drag options to blanks, or click blank then click option'

Aadd

Bremove

Ctoggle

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toggle' incorrectly in both places

Using 'contains' which only checks for a class

When toggling manually, use 'add' to add the class and 'remove' to remove it based on the state.

5fill in blank

hard

Fill all three blanks to create a directive that changes text content on mouse enter and leave.

Angular

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

@Directive({
  selector: '[appHoverText]',
  standalone: true
})
export class HoverTextDirective {
  private originalText = '';

  constructor(private el: ElementRef) {
    this.originalText = this.el.nativeElement.[1];
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.[2] = [3];
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.textContent = this.originalText;
  }
}

Drag options to blanks, or click blank then click option'

AtextContent

BinnerText

C'Hovered!'

D'Mouse over'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'textContent' and 'innerText'

Forgetting quotes around the new text

Changing the wrong property on the element

The original text is stored from 'textContent'. On mouse enter, 'innerText' is changed to the string 'Hovered!'.

Practice

1. What is the primary purpose of an Angular directive?

easy

A. To create new Angular modules

B. To add or change behavior on HTML elements

C. To define routes in the application

D. To manage HTTP requests

Solution

1. Step 1: Understand what directives do

   Directives in Angular are used to add or change behavior on HTML elements, such as changing styles or responding to events.

2. Step 2: Compare with other Angular features

   Modules organize code, routes manage navigation, and HTTP requests handle data fetching, which are not the main roles of directives.

3. Final Answer:

   To add or change behavior on HTML elements -> Option B

4. Quick Check:

   Directive purpose = Add/change behavior [OK]

Hint: Directives change element behavior, not app structure [OK]

Common Mistakes:

• Confusing directives with modules
• Thinking directives manage routing
• Assuming directives handle HTTP

2. Which syntax correctly injects Renderer2 in a directive's constructor?

easy

A. constructor(renderer: Renderer2 private) {}

B. constructor(Renderer2 private renderer) {}

C. constructor(private Renderer2 renderer) {}

D. constructor(private renderer: Renderer2) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular uses TypeScript constructor parameters with access modifiers like 'private' before the variable name and type after the colon.

2. Step 2: Match correct syntax

   constructor(private renderer: Renderer2) {} follows the pattern: 'constructor(private renderer: Renderer2) {}'. Other options have incorrect order or missing colons.

3. Final Answer:

   constructor(private renderer: Renderer2) {} -> Option D

4. Quick Check:

   Correct DI syntax = private name: Type [OK]

Hint: Use 'private name: Type' in constructor for DI [OK]

Common Mistakes:

• Swapping parameter order
• Omitting colon between name and type
• Placing access modifier after type

3. Given this directive code, what will happen when the user clicks the host element?

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click') onClick() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

medium

A. The element's text color changes to yellow on click

B. Nothing happens on click

C. The element's background color changes to yellow on click

D. An error occurs because Renderer2 is not used correctly

Solution

1. Step 1: Understand @HostListener usage

   The @HostListener('click') decorator listens for click events on the host element and triggers the onClick method.

2. Step 2: Analyze onClick method

   Inside onClick, Renderer2 sets the backgroundColor style of the element to 'yellow'. This changes the element's background color on click.

3. Final Answer:

   The element's background color changes to yellow on click -> Option C

4. Quick Check:

   @HostListener + Renderer2 changes background [OK]

Hint: HostListener triggers method; Renderer2 safely changes style [OK]

Common Mistakes:

• Confusing backgroundColor with text color
• Assuming no effect without manual event binding
• Thinking Renderer2 usage causes error

4. Identify the error in this directive code snippet:

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

@Directive({ selector: '[appColor]' })
export class ColorDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'color', 'blue');
  }
}

medium

A. Missing access modifiers in constructor parameters prevent DI

B. Renderer2 cannot set styles directly

C. Selector syntax is invalid

D. ElementRef should not be used in directives

Solution

1. Step 1: Check constructor parameters for DI

   Angular dependency injection requires constructor parameters to have access modifiers like 'private' or 'public' to assign them as class properties.

2. Step 2: Identify missing access modifiers

   Here, 'el' and 'renderer' lack 'private' or 'public', so Angular won't inject them properly, causing runtime errors.

3. Final Answer:

   Missing access modifiers in constructor parameters prevent DI -> Option A

4. Quick Check:

   DI needs access modifiers in constructor [OK]

Hint: Always add 'private' or 'public' for DI in constructor [OK]

Common Mistakes:

• Thinking Renderer2 can't set styles
• Believing selector syntax is wrong
• Assuming ElementRef is disallowed

5. You want to create a directive that toggles a CSS class active on the host element when the user hovers over it, and removes it when the mouse leaves. Which approach correctly implements this behavior?

hard

A. Use two @HostListener methods for 'mouseenter' and 'mouseleave' to add and remove the class using Renderer2

B. Use a single @HostListener for 'click' to toggle the class

C. Directly modify the element's classList without Renderer2 inside the constructor

D. Use @HostBinding to bind a boolean and toggle it manually without event listeners

Solution

1. Step 1: Understand event requirements

   Hover behavior requires reacting to 'mouseenter' and 'mouseleave' events to add and remove the class.

2. Step 2: Use Renderer2 with @HostListener

   Using two @HostListener methods for these events and Renderer2 to add/remove the 'active' class is the safe and correct Angular way.

3. Final Answer:

   Use two @HostListener methods for 'mouseenter' and 'mouseleave' to add and remove the class using Renderer2 -> Option A

4. Quick Check:

   Hover needs mouseenter/mouseleave + Renderer2 [OK]

Hint: Use separate HostListeners for mouseenter and mouseleave [OK]

Common Mistakes:

• Using click event instead of hover events
• Manipulating DOM directly without Renderer2
• Relying only on @HostBinding without events