Why directives are needed in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Angular directive that changes text color.

Angular

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

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

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

A'blue'

B'bold'

C'center'

D'underline'

Attempts:

3 left

💡 Hint

Common Mistakes

Using text style values like 'bold' instead of a color.

Forgetting to use quotes around the color string.

The directive changes the text color by setting the style.color property. The correct value is a color string like 'blue'.

2fill in blank

medium

Complete the code to apply the directive to a paragraph element in the template.

Angular

<p [1]>This text will be highlighted.</p>

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

Ahighlight

BhighlightDirective

Capp-highlight

DappHighlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong attribute name that doesn't match the directive selector.

Using dash-case instead of camelCase.

The directive selector is '[appHighlight]', so to apply it, use the attribute appHighlight on the element.

3fill in blank

hard

Fix the error in the directive code to properly inject ElementRef.

Angular

import { Directive, [1] } from '@angular/core';

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

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

AElementRef

BRenderer2

CInput

DHostListener

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated classes like Renderer2 or Input instead of ElementRef.

Forgetting to import ElementRef causing runtime errors.

The ElementRef class must be imported to inject it in the constructor for DOM access.

4fill in blank

hard

Fill both blanks to create a directive that changes background color on mouse enter and resets on mouse leave.

Angular

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

@Directive({
  selector: '[appHover]'
})
export class HoverDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = [1];
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = [2];
  }
}

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

A'yellow'

B'transparent'

C'red'

D'none'

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color values.

Using 'none' instead of 'transparent' to reset background color.

On mouse enter, the background color changes to 'yellow'. On mouse leave, it resets to 'transparent' to remove the highlight.

5fill in blank

hard

Fill all three blanks to create a structural directive that shows content only if a condition is true.

Angular

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

@Directive({
  selector: '[appIf]'
})
export class IfDirective {
  constructor(private [1]: TemplateRef<any>, private [2]: ViewContainerRef) {}

  @Input() set appIf(condition: boolean) {
    if (condition) {
      this.[3].createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

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

AtemplateRef

BviewContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up variable names for TemplateRef and ViewContainerRef.

Calling createEmbeddedView on the wrong variable.

The constructor injects templateRef and viewContainer. The viewContainer creates or clears the embedded view based on the condition.