How can I split a div into 2 with ngfor

Ionic Framework ionic-v3
1

I mean I want to show a list name, it is a short one, but I want to split my div into 2 divs, the first div with the half of the items and the second one with the others items

<div *ngFor="let item of items; let i = index;">
  <div class="container-list">
    <div class="name">
      {{item.content}}
    </div>
  </div>
</div>

Like this:

number of items: 7

div1 div2
item 1, item 5,
item 2, item 6,
item 3, item 7,
item 4

how can I do this?

2

Well first you would want the ngfor on the closest element to where the items will populate because it will repeat all item within the ngfor element. I would try making the outer container element a flex box with wrapping.

3

Well, maybe I should have two ngfor? the i can create the other div?
the ngfor I have is to show the name list, but how can i divide in two divs?

4

I think it would be most straightforward to have the template see two separate arrays. Whether you actually store it that way or expose it as two firstHalf() and secondHalf() methods that slice the underlying array on demand would probably depend on how big the array is.

5

what do you want to intend with splitting the list in two divs?
or a column like style?

6

Yes i need to like this action?