Why directives are needed in Angular - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use directives in Angular?

Which of the following best explains why Angular uses directives?

A Directives allow you to create reusable components and manipulate the DOM easily.

B Directives are used only to style elements with CSS classes.

C Directives replace the need for services and dependency injection.

D Directives are only for handling HTTP requests in Angular.

💡 Hint

Think about how Angular helps you add behavior to HTML elements.

Directives let you add custom behavior to elements and create reusable UI parts. They help manipulate the DOM in a clean way.

❓ component_behavior

intermediate

What happens when you use a structural directive?

Consider the Angular structural directive *ngIf. What does it do to the DOM?

A It disables the element but keeps it visible in the DOM.

B It only changes the style of the element without affecting the DOM structure.

C It adds or removes elements from the DOM based on a condition.

D It duplicates the element multiple times without any condition.

💡 Hint

Think about how *ngIf controls whether something shows or not.

*ngIf adds or removes elements from the DOM depending on the condition you give it, so the element is only present when needed.

📝 Syntax

advanced

Identify the correct syntax for a custom attribute directive

Which option shows the correct way to define a custom attribute directive in Angular?

Angular

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

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

A Use @Pipe with selector '[appHighlight]' and modify element style in constructor.

B Use @Component with selector 'appHighlight' and modify element style in ngOnInit.

C Use @Injectable with selector '[appHighlight]' and modify element style in constructor.

D Use @Directive with selector '[appHighlight]' and modify element style in constructor.

💡 Hint

Remember attribute directives use @Directive and selectors with square brackets.

Attribute directives use @Directive with a selector in square brackets to apply behavior to existing elements.

❓ lifecycle

advanced

When is the best time to access the DOM in a directive?

In an Angular directive, which lifecycle hook is best to safely access and manipulate the DOM elements?

A ngAfterViewInit

B ngOnDestroy

C ngOnChanges

D ngOnInit

💡 Hint

Think about when the view and child elements are fully initialized.

ngAfterViewInit runs after Angular fully initializes the component's views and child views, so DOM elements are ready to be accessed.

🔧 Debug

expert

Why does this directive not change the element's color?

Given this directive code, why does the element's text color not change to red?

Angular

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

@Directive({
  selector: '[appRedText]'
})
export class RedTextDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.color = 'red';
  }
}

A The directive selector should be without square brackets: 'appRedText'.

B The directive is not declared in any Angular module, so it is not applied.

C The directive is missing the <code>export</code> keyword before the class.

D The style property 'color' cannot be set directly on nativeElement.

💡 Hint

Check if the directive is properly registered in Angular.

If a directive is not declared in an Angular module, Angular does not know about it and will not apply it to elements.