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!'.