Bird
0
0

Identify the error in this custom structural directive code:

medium📝 Debug Q6 of 15
Angular - Advanced Patterns
Identify the error in this custom structural directive code:
@Directive({ selector: '[appToggle]' })
export class ToggleDirective {
  constructor(private tpl: TemplateRef) {}

  @Input() set appToggle(condition: boolean) {
    if (condition) {
      this.tpl.createEmbeddedView();
    }
  }
}
AMissing ViewContainerRef injection to create views.
BTemplateRef cannot be used in directives.
CThe @Input decorator is missing parentheses.
DThe selector should not be in square brackets.
Step-by-Step Solution
Solution:
  1. Step 1: Check usage of createEmbeddedView

    createEmbeddedView is a method of ViewContainerRef, not TemplateRef.
  2. Step 2: Identify missing injection

    The directive injects TemplateRef but lacks ViewContainerRef, so it cannot create views properly.
  3. Final Answer:

    Missing ViewContainerRef injection to create views. -> Option A
  4. Quick Check:

    createEmbeddedView needs ViewContainerRef, not TemplateRef [OK]
Quick Trick: Use ViewContainerRef to create or clear embedded views [OK]
Common Mistakes:
  • Calling createEmbeddedView on TemplateRef instead of ViewContainerRef
  • Ignoring missing dependency injection
  • Misunderstanding selector syntax

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes