[Solved] Consider the following Angular code snippet:const compRe... compRef.changeDetectorRef.detectChanges();If UserCardComponent template contains <h1>{{ userName }}</h1>, what will be rendered in the DOM? | Angular

Angular - Advanced Patterns

Consider the following Angular code snippet:

const compRef = viewContainerRef.createComponent(UserCardComponent);
compRef.instance.userName = 'Alice';
compRef.changeDetectorRef.detectChanges();

If UserCardComponent template contains <h1>{{ userName }}</h1>, what will be rendered in the DOM?

AAn error because userName is not a valid property

BNo output because change detection was not triggered

C<h1>Alice</h1>

DEmpty <h1></h1> since instance properties are not bound

Step-by-Step Solution

Solution:

Step 1: Create component instance
The createComponent method creates an instance of UserCardComponent.
Step 2: Set input property
Assigning userName = 'Alice' sets the component's property.
Step 3: Trigger change detection
Calling compRef.changeDetectorRef.detectChanges() updates the view to reflect the new property value.
Final Answer:
<h1>Alice</h1> -> Option C
Quick Check:
Property set + detectChanges = updated DOM [OK]

Quick Trick: Always call detectChanges after setting inputs dynamically [OK]

Common Mistakes:

Master "Advanced Patterns" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Consider the following Angular code snippet: