Directive execution and DOM manipulation in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the rendered output of this Angular directive?

Consider this Angular standalone directive that changes the background color of the host element:

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

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

If this directive is applied to a <div> with text 'Hello', what will the user see?

Angular

<div appHighlight>Hello</div>

A The text color will change to yellow but background remains default

B The text 'Hello' will be bold but no background color change

C The div will be hidden and not visible on the page

D A yellow background behind the text 'Hello' inside the div

💡 Hint

Think about what renderer.setStyle does to the host element's style.

The directive uses Renderer2 to set the background-color style of the host element to yellow. This means the div's background will appear yellow behind the text.

❓ lifecycle

intermediate

When is the best lifecycle hook to safely manipulate the DOM in an Angular directive?

You want to add a CSS class to the host element after it is fully initialized. Which lifecycle hook should you use inside your directive?

A constructor

B ngOnInit

C ngAfterViewInit

D ngOnDestroy

💡 Hint

Consider when the view and child elements are fully rendered.

ngAfterViewInit runs after Angular has fully initialized the component's view and child views, making it safe to manipulate the DOM.

📝 Syntax

advanced

Which directive code snippet correctly toggles a CSS class on click?

Choose the correct Angular directive code that toggles the CSS class 'active' on the host element when it is clicked.

A

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

@Directive({ selector: '[appToggle]' })
export class ToggleDirective {
  private active = false;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  @HostListener('click') toggle() {
    this.active = !this.active;
    if (this.active) {
      this.renderer.addClass(this.el.nativeElement, 'active');
    } else {
      this.renderer.removeClass(this.el.nativeElement, 'active');
    }
  }
}

B

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

@Directive({ selector: '[appToggle]' })
export class ToggleDirective {
  private active = false;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  @HostListener('click') toggle() {
    this.active = !this.active;
    this.el.nativeElement.classList.toggle('active');
  }
}

C

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

@Directive({ selector: '[appToggle]' })
export class ToggleDirective {
  private active = false;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  @HostListener('click') toggle() {
    this.active = !this.active;
    this.renderer.setStyle(this.el.nativeElement, 'class', this.active ? 'active' : '');
  }
}

D

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

@Directive({ selector: '[appToggle]' })
export class ToggleDirective {
  private active = false;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  @HostListener('click') toggle() {
    this.active = !this.active;
    this.renderer.setAttribute(this.el.nativeElement, 'class', this.active ? 'active' : '');
  }
}

💡 Hint

Remember that renderer.setStyle does not set classes, and direct DOM manipulation is discouraged.

Option A uses renderer.addClass and renderer.removeClass properly to toggle the class. Option A tries to set style 'class' which is invalid. Option A manipulates DOM directly which is discouraged. Option A sets attribute 'class' which overwrites all classes.

🔧 Debug

advanced

What error will this Angular directive code cause?

Analyze this directive code snippet:

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

@Directive({ selector: '[appError]' })
export class ErrorDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'blue');
  }

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

What error will Angular throw when this directive is used?

A SyntaxError due to missing semicolons

B No error; the directive works as expected

C Runtime error: HostListener decorator missing import

D Runtime error: Cannot read property 'setStyle' of undefined

💡 Hint

Check if all necessary imports and syntax are correct.

The code imports all needed symbols, uses Renderer2 correctly, and the missing semicolons do not cause errors in TypeScript. The HostListener decorator is now shown imported. If imported, no runtime error occurs.

🧠 Conceptual

expert

Which statement best describes Angular directive execution order and DOM manipulation?

Consider multiple directives applied to the same element. Which statement about their execution and DOM manipulation order is true?

A All directives execute their constructors first, then lifecycle hooks run in the order of declaration, allowing safe DOM manipulation in ngAfterViewInit

B Directives execute in the order they appear in the template, and each can manipulate the DOM immediately during construction

C Directives execute lifecycle hooks in parallel, so DOM manipulation order is unpredictable

D Directives cannot manipulate the DOM; only components can

💡 Hint

Think about Angular's lifecycle and when DOM is ready for manipulation.

Angular calls constructors of all directives first, then lifecycle hooks like ngOnInit and ngAfterViewInit in declaration order. DOM manipulation should happen in ngAfterViewInit to ensure the view is ready.