[Solved] Given this directive that changes background color:@Directive({selector:... } }What will be the background color of this element?<div appBgColor>Hello</div> | Angular

Angular - Directives

Given this directive that changes background color:

@Directive({selector: '[appBgColor]'})
export class BgColorDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

What will be the background color of this element?

<div appBgColor>Hello</div>

ABlue

BYellow

CNo color change

DRed

Step-by-Step Solution

Solution:

Step 1: Understand directive effect on element
The directive sets the element's background color to yellow in the constructor.
Step 2: Apply directive to the div element
The div with appBgColor will have its background color changed to yellow.
Final Answer:
Yellow -> Option B
Quick Check:
Directive sets background color = Yellow [OK]

Quick Trick: Directive constructor changes element style immediately [OK]

Common Mistakes:

Assuming no style change without explicit binding
Confusing directive selector with component selector
Expecting default color instead of yellow

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this directive that changes background color:

Step 1: Understand directive effect on element

Step 2: Apply directive to the div element

Final Answer:

Quick Check:

Want More Practice?