Bird
0
0

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?
A<pre><ol> <li *ngFor="let fruit of fruits">{{ fruit }}</li> </ol></pre>
B<pre><ul> <li *ngIf="fruits">{{ fruits }}</li> </ul></pre>
C<pre><ol> <li>fruits</li> </ol></pre>
D<pre><ol> <li *ngFor="fruits">{{ fruit }}</li> </ol></pre>
Step-by-Step Solution
Solution:
  1. Step 1: Understand *ngFor syntax

    *ngFor requires syntax: *ngFor="let item of items".
  2. 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>.
  3. Step 3: Identify incorrect options

    B uses *ngIf incorrectly; C displays literal 'fruits'; D misses 'let' keyword.
  4. Final Answer:

    Option A -> Option A
  5. 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

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes