Styling a NgFor horizontally

Question

How to horizontally display each <ng-container> of an *ngFor directive.

I have:

<div *ngIf="hasFinished">
    <ng-container *ngFor="let champ of champStats">
      <h2> {{champ[1].name}} </h2>
      <p> Level: {{champ[1].Level}} </p>
      <p> XP: {{champ[1].XP}} </p>
      <p> Time lost: {{champ[1].CharacterTimePlayed}} </p>
      <p> Wins: {{champ[1].CharacterWins}} </p>
      <p> Loosses: {{champ[1].CharacterLosses}} </p>
      <p> XP : {{champ.CharacterRanked2v2Wins}} </p>
      <p> XP : {{champ.CharacterRanked2v2Losses}} </p>

    </ng-container>
  </div>

I'm using bootstrap, I want that each element take a column of 4 (like the 3 first ones are in a row, the 3 after another row etc...)

Just like this:

<div class="row">
    <ng-container class="col-lg-4> ...
    </ng-container>
    <ng-container class="col-lg-4> ...
    </ng-container>
    <ng-container class="col-lg-4> ...
    </ng-container>
</div>
<div class="row">
    <ng-container class="col-lg-4> ...
    </ng-container>
    //...
</div>

EDIT: The other problem is : if there is 7 elements, how to manage the last one? (for example)

Answer 1

You can achieve this through CSS3 flex

HTML:

  <div class="horizontal" *ngIf="hasFinished">
    <ng-container *ngFor="let champ of champStats">
      <p> Name: {{champ.name}} </p>
      <p> Level: {{champ.Level}} </p>
      <p> XP: {{champ.XP}} </p>
      <p> Time lost: {{champ.CharacterTimePlayed}} </p>
      <p> Wins: {{champ.CharacterWins}} </p>
      <p> Loosses: {{champ.CharacterLosses}} </p>
      <p> XP : {{champ.CharacterRanked2v2Wins}} </p>
      <p> XP : {{champ.CharacterRanked2v2Losses}} </p>

    </ng-container>
  </div>

CSS:

.horizontal {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

p {
    display: inline-block;
    flex-grow: 1;
    height:100px;    
    width: calc(100% * (1/4) - 10px - 1px)
}

Answer 2

You can use display: flex in CSS as:

HTML

<div class="horizontal" *ngIf="hasFinished">
    <div *ngFor="let champ of champStats">
      <h2> {{champ[1].name}} </h2>
      <p> Level: {{champ[1].Level}} </p>
      <p> XP: {{champ[1].XP}} </p>
      <p> Time lost: {{champ[1].CharacterTimePlayed}} </p>
      <p> Wins: {{champ[1].CharacterWins}} </p>
      <p> Loosses: {{champ[1].CharacterLosses}} </p>
      <p> XP : {{champ.CharacterRanked2v2Wins}} </p>
      <p> XP : {{champ.CharacterRanked2v2Losses}} </p>
    </div>
</div>

CSS

.horizontal {
    display: flex;
    justify-content: space-between;
}