[Solved] }And presentational component template:<ul> <li *ngFor="let item of items">{{ item }}</li> </ul>What will be rendered if the container passes items to the presentational component? | Angular

Angular - Advanced Patterns

Given this container component code:

export class ContainerComponent {
  items = ['apple', 'banana'];
}

And presentational component template:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

What will be rendered if the container passes items to the presentational component?

AError: items not defined

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

C<ul></ul>

D<ul><li>apple</li><li>banana</li></ul>

Step-by-Step Solution

Solution:

Step 1: Understand data flow
The container passes the array ['apple', 'banana'] as 'items' to the presentational component.
Step 2: Analyze template rendering
The presentational component loops over 'items' and creates a list item for each element.
Final Answer:
<ul><li>apple</li><li>banana</li></ul> -> Option D
Quick Check:
Passing array renders list items [OK]

Quick Trick: ngFor loops over passed array to render list [OK]

Common Mistakes:

Master "Advanced Patterns" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this container component code: