When using *ngFor to display multiple buttons, all buttons appear in one column. I want to have only 2 buttons in a row: the green buttons in one line, and the red buttons in the next line. How can I achieve this?
Here is what I have tried:
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>
css
.actionButton {
width: 200px;
display: inline-block;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis
}