Currently in my Angular application, I am working on rendering buttons within the view using the *ngFor directive. My goal is to have the rendered buttons appear side by side. While I have achieved this, I now want to dynamically resize each button based on the total number of buttons being rendered.
Here is what I aim for with button widths:
- If there are 4 buttons, each should take up 25% width
- If there are 2 buttons, each should occupy 50% width
- If only 1 button exists, it should span the entire 100% width
I require guidance on how to implement this functionality efficiently. Any suggestions would be greatly appreciated.
Below is a snippet from my HTML and CSS files:
<nb-card>
<div class="col-md-12">
<div class="col-md-3 pt-5" *ngFor="let data of TestData">
<nb-card class="testCard">
<input type="text" class="form-control" [value]="data.test[0]" readonly>
<div>
<input type="button" *ngFor="let ts of data.test[1]" class="form-control testButton" (click)="onClick(ts.id)" [value]="ts.foo" readonly>
</div>
</nb-card>
</div>
</div>
</nb-card>
.testButton {
display: inline-block;
width: 25%;
/* By specifying width as 25%, the buttons render side by side properly. */
}