[Solved] What will happen when this directive is applied?@Directive({ selector: '[appClick]' }) export class ClickDirective { constructor(private el: ElementRef) { this.el.nativeElement.... | Angular

Angular - Directives

What will happen when this directive is applied?

@Directive({ selector: '[appClick]' })
export class ClickDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.addEventListener('click', () => alert('Clicked!'));
  }
}

Applied as: <button appClick>Press</button>

AAn alert 'Clicked!' shows when button is pressed

BNothing happens on click

CError because Renderer2 is missing

DThe button text changes to 'Clicked!'

Step-by-Step Solution

Solution:

Step 1: Understand event listener attachment
The directive adds a native click event listener that triggers an alert with 'Clicked!'.
Step 2: Confirm behavior on button click
Clicking the button triggers the alert as expected.
Final Answer:
An alert 'Clicked!' shows when button is pressed -> Option A
Quick Check:
Native event listener triggers alert = A [OK]

Quick Trick: Directives can add native event listeners via ElementRef [OK]

Common Mistakes:

Expecting Renderer2 is mandatory for events
Assuming no effect without @HostListener
Thinking button text changes automatically

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

What will happen when this directive is applied?

Step 1: Understand event listener attachment

Step 2: Confirm behavior on button click

Final Answer:

Quick Check:

Want More Practice?