ng для остановки автоматического перевода строки

Question

Есть ли способ остановить цикл ngFor, помещающий каждый элемент в новую строку?

Это код, который у меня сейчас

<div class="groups">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
       <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

Который производит это

Как сделать так, чтобы кнопки отображались в одной строке?

Answer 1

С помощью начальной загрузки это способ поместить его в строку.

<div class="groups row">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
     <div class="col-1">  
        <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

или используя простой CSS

<div class="groups">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
     <div style="display:inline-block;">  
        <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

Answer 2

Angular ng-container - это группирующий элемент, который не вмешиваться в стили или макет, потому что Angular не помещает его в DOM

<ng-container *ngFor="let group of groups; let i = index" class="group">
   <button (click)="changeGroup(i)">{{group}}{{i}}</button>
</ng-container>

Answer 3

Цикл ngFor находится на элементах div. Так как это блочные элементы, вы получите вертикальный стек div контейнеров, каждый из которых содержит кнопку.

Чтобы получить один блок со всеми кнопками внутри, поместите петлю ngFor на элемент button:

<div class="groups">
    <h3>Groups:</h3>
    <div class="group">
       <button *ngFor="let group of groups; let i = index" (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>