Loading

ngFor Loop - Display over 2 Bootstrap columns

ngFor Loop - Display over 2 Bootstrap columns

Michael Seery

I have an ngFor that loops over a list of roles that displays check boxes in a list in one column.

What I want to do is display this list over 2 columns.

I have the following code that prduces the single column list.

class="form-check" *ngFor="let role of roles">
class="row">
class="col-6">
class="form-check-input"
type="checkbox"
value="role.name"
[checked]="role.checked"
(change)="role.checked = !role.checked && (supplier = true)"
[disabled]="
role.name === 'Administrator' && user.userName === 'Admin'"
/>
{{ role.name }}

I tried removing the row div in the hope that the div with col-6 would place them side by side and then wrap to a new line but it didn't work.

Any help would be very much appreciated.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Michael Seery6y ago
I just figured it out. I needed to move the ngFor loop from the form-check div to the col-6 div
<div class="form-check">
          <div class="row">
            <div class="col-6" *ngFor="let role of availableRoles">
              <input
                class="form-check-input"
                type="checkbox"
                value="role.name"
                [checked]="role.checked"
              />
              <label>{{ role.name }}label>
            div>
          div>
        div>
0
Michael Seery6y ago
Hi Jay,

What changes did you make to my code?
I just noticed that the opening DIV tags are missing on my post.
<div class="form-check" *ngFor="let role of roles">
<div class="row">
<div class="col-6">
  <input
class="form-check-input"
type="checkbox"
value="role.name"
[checked]="role.checked"
/>
<label>{{ role.name }}label>
  div>
div>
div>
0
Jay Krishna Reddy6y ago
1. class="form-check" *ngFor="let role of roles">
2. class="row">
3. class="col-6">
5. class="form-check-input"
6. type="checkbox"
7. value="role.name"
8. [checked]="role.checked"
9. (change)="role.checked = !role.checked && (supplier = true) && (Buyer = true)"
10. [disabled]="
11. role.name === 'Administrator' && user.userName === 'Admin'"
12. />
13. {{ role.name }}
0