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.

Practice

1. Why are directives needed in Angular?

easy

A. To add special behavior to HTML elements

B. To write plain CSS styles

C. To create backend APIs

D. To manage database connections

Solution

1. Step 1: Understand the role of directives

   Directives allow you to add custom behavior to HTML elements beyond standard HTML capabilities.

2. Step 2: Compare with other options

   Options A, C, and D relate to styling, backend, and database, which are not the purpose of directives.

3. Final Answer:

   To add special behavior to HTML elements -> Option A

4. Quick Check:

   Directives add behavior = B [OK]

Hint: Directives change HTML behavior, not backend or styles [OK]

Common Mistakes:

• Confusing directives with CSS styling
• Thinking directives manage backend logic
• Assuming directives handle database tasks

2. Which of the following is the correct syntax to apply a directive in Angular?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify Angular directive syntax

   Structural directives use the asterisk (*) before the directive name to modify the DOM structure.

2. Step 2: Check other symbols

   # is for template references, ? and @ are invalid for directives.

3. Final Answer:

   <div *myDirective></div> -> Option C

4. Quick Check:

   Structural directives use * prefix = A [OK]

Hint: Look for * before directive name for structural directives [OK]

Common Mistakes:

• Using # which is for template references
• Using ? or @ which are invalid syntax
• Omitting the * for structural directives

3. Given this Angular directive usage:

<button appHighlight>Click Me</button>

What will happen when this directive is applied?

medium

A. Nothing happens

B. The button text changes to uppercase

C. The button becomes disabled

D. The button background color changes

Solution

1. Step 1: Understand typical directive behavior

   Directives like 'appHighlight' usually change the appearance, such as background color, to highlight elements.

2. Step 2: Evaluate other options

   Changing text case or disabling button is less common for a highlight directive; 'Nothing happens' is unlikely if directive is implemented.

3. Final Answer:

   The button background color changes -> Option D

4. Quick Check:

   Highlight directive changes background = A [OK]

Hint: Highlight means color change, not disabling or text case [OK]

Common Mistakes:

• Assuming text changes instead of style
• Thinking directive disables element
• Believing directive has no effect

4. What is wrong with this directive usage?

<div *myDirective>Content</div>

Assuming myDirective is a component, not a structural directive.

medium

A. Components cannot be used with * syntax

B. The directive name is invalid

C. The div tag cannot have directives

D. There is no closing tag

Solution

1. Step 1: Understand directive vs component usage

   Structural directives use * syntax; components are used as elements, not with *.

2. Step 2: Check other options

   Directive name can be valid, div can have directives, and closing tag is present.

3. Final Answer:

   Components cannot be used with * syntax -> Option A

4. Quick Check:

   * syntax only for structural directives = D [OK]

Hint: Use * only with structural directives, not components [OK]

Common Mistakes:

• Using * with components
• Thinking div can't have directives
• Ignoring correct closing tags

5. You want to create a reusable directive that changes text color based on a condition. Which approach best explains why directives are needed here?

hard

A. Directives replace components for UI layout

B. Directives let you add reusable behavior to any HTML element without changing its structure

C. Directives are only for creating new HTML tags, not for behavior

D. Directives are used to fetch data from servers

Solution

1. Step 1: Identify directive purpose in reuse

   Directives add behavior like changing text color reusable on any element without altering HTML structure.

2. Step 2: Eliminate incorrect uses

   Directives do more than create tags, do not replace components, and do not fetch data.

3. Final Answer:

   Directives let you add reusable behavior to any HTML element without changing its structure -> Option B

4. Quick Check:

   Directives add reusable behavior = C [OK]

Hint: Directives add behavior reuse without new tags or data fetching [OK]

Common Mistakes:

• Thinking directives only create new tags
• Confusing directives with components
• Assuming directives handle data fetching