[Solved] Why does this custom structural directive fail to toggle content?@Directive({ selector: '[appShow]' }) export class ShowDirective { constructor(private tpl: TemplateRef, private vcr:... | Angular

Angular - Advanced Patterns

Why does this custom structural directive fail to toggle content?

@Directive({ selector: '[appShow]' })
export class ShowDirective {
  constructor(private tpl: TemplateRef, private vcr: ViewContainerRef) {}

  @Input() set appShow(condition: boolean) {
    if (condition) {
      this.vcr.createEmbeddedView(this.tpl);
    }
  }
}

AIt never clears the view when condition is false.

BTemplateRef is not injected properly.

CThe selector is incorrect for structural directives.

DThe @Input property name does not match the selector.

Step-by-Step Solution

Solution:

Step 1: Analyze the setter logic
The setter only creates the view when condition is true but does not clear it when false.
Step 2: Understand effect on toggling
Without clearing the view, the content remains visible even if condition becomes false.
Final Answer:
It never clears the view when condition is false. -> Option A
Quick Check:
Missing clear() causes content to stay visible [OK]

Quick Trick: Always clear view container when condition is false [OK]

Common Mistakes:

Forgetting to clear the view on false condition
Confusing TemplateRef and ViewContainerRef roles
Incorrect selector syntax

Master "Advanced Patterns" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Why does this custom structural directive fail to toggle content?

Step 1: Analyze the setter logic

Step 2: Understand effect on toggling

Final Answer:

Quick Check:

Want More Practice?