How to make a flexbox in a div to have 2 columns with ngFor of mat-chips/angular material2?


Ask A Question





Login To post a question

I have a list of fruits with 10 entries. I want to make it so that the fruit name text (next to a mat-chip) are displayed in two columns with 5 in each column. The chips I am using are here: https://material.angular.io/components/chips/api

My CSS:

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

.flexc {
    flex-grow: 1;
    display: inline-block;
}

HTML

       <div class="flexp" *ngFor="let fruit of fruits">
              <div class="flexc">
                <mat-chip>
                  {{fruit.typeOfFruit}}
                </mat-chip>
                {{fruit.name}}
              </div>
          </div>

How can I do this? Right now my flexbox is going from top to bottom.

I want to make to so that it looks like a table, but without having to create the structure. If there was a way for the ngFor to be smart enough to make it display in this way… that is what I am looking for:

<table>
<tr>
<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>
</table>

If it is not possible, please state.

For more info please click herehttps://stackoverflow.com/q/49743578



Have a question or need a custom quote?
info@smartinfocare.com