How do you create a dynamic number of divs with dynamic content in Angular2?

Question

I know you would use ngFor, but I'm not quite sure how to do it.

Basically I want want to create the div below n times, replacing the 0 with 1 for the 2nd div, 2 for the 3rd div, and so on...

<div class="box">
    <p class="dut-text dut-title">
        {{list[0].data}}
    </p>
</div>

Answer 1

Creates below div for each value in items :

<div class="box" *ngFor="let item of items;let i=index">
    <p class="dut-text dut-title">
        {{list[i].data}}
    </p>
</div>

class MyComponent {
  items = ['a', 'b', 'c'];
}

Update

alternative interpretation of your question (see comments)

<div class="box" *ngFor="let item of list">
    <p class="dut-text dut-title">
        {{item.data}}
    </p>
</div>

class MyComponent {
  list = ['a', 'b', 'c'];
}