Dynamically create an array of HTML elements using typescript in Angular 2/4

Question

I want to dynamically add divs using a loop with typescript in angular. I want to reproduce the following pseudo code in a .ts file:

i: number = 4;
arrayofHTMLelements: html elements = [];

for i in range (1, i):
    create div at index i

I assume that I can then shift the array of HTML elements to a .html file with:

<li *ngFor="let arrayofHTMLelement of arrayofHTMLelements; let i = index">{{i + 1}}: {{arrayofHTMLelements}}</li>

Answer 1

You have to iterate over your objects and create the internal HTML in the template as follows:

const heroes = [
  { name: 'Spiderman' },
  { name: 'Superman' },
  { name: 'Superwoman!' }
]

template: `
  <ul>
    <li *ngFor="let hero of heroes">
      <div>{{hero.name}}</div>
    </li>
  </ul>
`