You have a component property fruits = ['Mango', 'Peach', 'Grapes']. Which Angular template snippet correctly displays each fruit inside an ordered list?

hard📝 Application Q9 of 15

Angular - Components

You have a component property fruits = ['Mango', 'Peach', 'Grapes']. Which Angular template snippet correctly displays each fruit inside an ordered list?

<pre><ol>
  <li *ngFor="let fruit of fruits">{{ fruit }}</li>
</ol></pre>

<pre><ul>
  <li *ngIf="fruits">{{ fruits }}</li>
</ul></pre>

<pre><ol>
  <li>fruits</li>
</ol></pre>

<pre><ol>
  <li *ngFor="fruits">{{ fruit }}</li>
</ol></pre>

Step-by-Step Solution

Solution:

Step 1: Understand *ngFor syntax
*ngFor requires syntax: *ngFor="let item of items".
Step 2: Check each option
```
<ol>
  <li *ngFor="let fruit of fruits">{{ fruit }}</li>
</ol>
```
correctly uses *ngFor with let fruit of fruits inside <ol>.
Step 3: Identify incorrect options
B uses *ngIf incorrectly; C displays literal 'fruits'; D misses 'let' keyword.
Final Answer:
Option A -> Option A
Quick Check:
*ngFor requires 'let variable of array' syntax [OK]

Quick Trick: Use *ngFor="let item of items" to loop arrays [OK]

Common Mistakes:

Using *ngIf instead of *ngFor for lists
Omitting 'let' keyword in *ngFor
Displaying array variable directly without iteration

Master "Components" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Angular Quizzes

You have a component property fruits = ['Mango', 'Peach', 'Grapes']. Which Angular template snippet correctly displays each fruit inside an ordered list?

Step 1: Understand *ngFor syntax

Step 2: Check each option

Step 3: Identify incorrect options

Final Answer:

Quick Check:

Want More Practice?