[Solved] Given this code, what will be the output when AppComponent is rendered?@Component({ selector: 'app-root', standalone: true, template: `Hello`, imports:... | Angular

Angular - Standalone Components

Given this code, what will be the output when AppComponent is rendered?

@Component({ selector: 'app-root', standalone: true, template: `Hello
`, imports: [ChildComponent] }) export class AppComponent {}
@Component({ selector: 'app-child', standalone: true, template: `Child works!
` }) export class ChildComponent {}

A<h1>Hello</h1><p>Child works!</p>

B<h1>Hello</h1>

CError: ChildComponent not declared in NgModule

D<p>Child works!</p>

Step-by-Step Solution

Solution:

Step 1: Check how ChildComponent is included
AppComponent imports ChildComponent in its imports array, allowing usage in its template.
Step 2: Understand standalone component rendering
Both components are standalone, so ChildComponent renders inside AppComponent's template.
Final Answer:
<h1>Hello</h1><p>Child works!</p> -> Option A
Quick Check:
Standalone imports enable nested component rendering [OK]

Quick Trick: Standalone components must be imported to use in templates [OK]

Common Mistakes:

Assuming child renders without importing
Expecting NgModule declaration errors
Ignoring standalone imports array

Master "Standalone Components" 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 code, what will be the output when AppComponent is rendered?

Hello

Step 1: Check how ChildComponent is included

Step 2: Understand standalone component rendering

Final Answer:

Quick Check:

Want More Practice?