[Solved] What will be the output of this Angular template?@Component({ selector: 'app-list', template: `{{ item }}` }) export class ListComponent { items = ['A', 'B', 'C']; } | Angular

Angular - Fundamentals

What will be the output of this Angular template?

@Component({ selector: 'app-list', template: `{{ item }}
` }) export class ListComponent { items = ['A', 'B', 'C']; }

A<ul><li></li><li></li><li></li></ul>

B<ul><li>items</li></ul>

C<ul><li>A</li><li>B</li><li>C</li></ul>

DError: *ngFor syntax invalid

Step-by-Step Solution

Solution:

Step 1: Understand *ngFor directive
*ngFor loops over the 'items' array and creates an
for each element.
Step 2: Check array contents
The array contains ['A', 'B', 'C'], so the template renders three
elements with these values.
Final Answer:
The output is
A
B
C
. -> Option C
Quick Check:
*ngFor loops render list items [OK]

Quick Trick: *ngFor repeats template for each array item [OK]

Common Mistakes:

Master "Fundamentals" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What will be the output of this Angular template?