[SOLVED] angular ngFor display 3 buttons per row

Issue

I am trying to display 3 buttons per div class="row". I am using *ngFor to iterate through the array to display the buttons with the correct button text.

below is a sample of my data:
[{"NODE_ID":21.0,"NODE_DESC":"TERMINAL ASSEMBLY","GRPSEQNO":1.0},
{"NODE_ID":22.0,"NODE_DESC":"DR CORE ASSEMBLY","GRPSEQNO":2.0},{"NODE_ID":23.0,"NODE_DESC":"WINDING","GRPSEQNO":3.0},{"NODE_ID":25.0,"NODE_DESC":"SOLDERING","GRPSEQNO":1.0},
{"NODE_ID":24.0,"NODE_DESC":"ARRANGING PROCESS BEFORE SOLDERING","GRPSEQNO":2.0},{"NODE_ID":29.0,"NODE_DESC":"HEIGHT INSPECTION","GRPSEQNO":3.0}]

the layout that i want to achieve is :
button layout

I cannot produce this layout. Please help. Thank you in advance.

I have created a stackblitz which I am currently doing
https://stackblitz.com/edit/angular-wipq2r?file=src/app/app.component.ts

Solution

Can you try this

In Productlist.html

  <div *ngFor="let item of procDesc; let i = index">
    <div class="row">
        <button  type="button"  class="btn btn-outline-primary btn-xs col-md-12 btn-block"
          style="margin-bottom:4px; word-wrap:break-word; color: white">
          <span style="font-size:smaller; color: white">{{ procDesc[i].NODE_DESC
          }}</span>
        </button>&nbsp;
        <!-- <button
          type="button"
          class="btn btn-outline-primary btn-xs col-md-12 btn-block"
          style="margin-bottom:4px; word-wrap:break-word; color: white">
          <span style="font-size:smaller; color: white">{{
            procDesc[i].NODE_DESC
          }}</span>
        </button>&nbsp;
        <button
          type="button"
          class="btn btn-outline-primary btn-xs col-md-12 btn-block"
          style="margin-bottom:4px; word-wrap:break-word; color: white">
          <span style="font-size:smaller; color: white">{{
            procDesc[i].NODE_DESC
          }}</span>
        </button> -->
    </div>
  </div>

and in productlist.css

.btn {
  white-space: normal !important;
  padding: 0.5;
  width: 150px;
  height: 100px;
}
:host {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  width: 600px;
}

Let me know if this works for you?

Answered By – mak15

Answer Checked By – David Goodson (BugsFixing Volunteer)