Generating markup from angular without iterating array

Question

I want to create simple component to create. For example there are two inputs for columns number and rows number.

How to generate choosen by user numbers of rows and columns?

Here's the template. Iterating through for smells bad for me :<

 <input type="number" placeholder="Length"/>
<input type="number" placeholder="width"/>

<div class="map">
  <div class="row">
    <div class="cell">Test</div>
  </div>
</div>

It would be great to do it in typescript

I think this question is either too broad or unclear. There are going to be any number of ways to generate such a component. Try the [Angular 2 Documentation](https://angular.io/docs/ts/latest/guide/) to get started. — apkostka, Jul 07 '16 at 21:09
yeah, you can even create dummy array ranged from 1 to width and iterate through it, but it's horrible idea i think, but it works, though. But i couldn't find best practice covering case specified by me in Docs — dawidklos, Jul 07 '16 at 21:13

score 1 · Answer 1 · edited May 23 '17 at 12:17

In fact, having an ngFor within an ngFor within the same template isn't perhaps ideal.

That being said, you could leverage one or several other components to split your different loops. For example: one for the row, and one for the cell.

In this case, you would have:

<div class="map">
  <div class="row" row [cells]="row.cells" *ngFor="let row of rows"></div>
</div>

and for the row component

@Component({
  selector: 'row',
  template: `
    <div *ngFor="let cell of cells">{{cell.value}}</div>
  `
})
export class RowComponent {
  @Input()
  cells: any[];
}

You could also notice that you can leverage the ngFormTemplate directive. I don't exactly your use case...

See these questions for more details:

Generating markup from angular without iterating array

1 Answers1