Search code examples
angularngfor

*ngFor take two values at once?

I'm doing an ngFor for print out labels/inputs

    <div *ngFor="let point of points" class="form-group row col">
        <label for=... ></label>
        <input ...></input>
    </div>

But now I'm realizing that instead of one per row, I want to put two of them on a single row. Is it possible to do something like that with the ngFor statement? I know I can add an index to it but I'm still not sure how that would help me as I need to double the internal label/div, and also handle the case where there's not an even number of points, so the last line might just have one pair instead of two.

Solution

  • Flexbox approach to achieve 2 column layout of a linear list

    <div class="parent">
  <div class="child" *ngFor="let point of points" >
    <label for=... ></label>
    <input ...></input>
  </div>
</div>

    .parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 50%;
}