Best way to loop the angular 4 with bootstrap columns?

Question

I want to loop my list in bootstrap columns.

In the first row, I would like to show three columns
In the second row, I would like to show two columns
In the third row, I would like to show only one column

The code is below.

<div *ngFor="let watch of List;let i = index;" >  
    <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

It is displaying each column in a single row. Not showing like three, two and one.

@Robert If we define the row before ngFor all the columns are displaying in a single row. — PrabakarK
– PrabakarK, Commented Jan 21, 2019 at 8:01

Roberto Zvjerković · Accepted Answer · 2019-01-21 08:45:34Z

3

"If we define the row before ngFor all the columns are displaying in a single row."

Not if you add [ngClass] to the same element that is being iterated:

<div class="row">  
    <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

You also don't need those rowType fields, you could do something like this:

[ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 < 1)

answered Jan 21, 2019 at 8:45

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PrabakarK Over a year ago

[ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 < 1) for three columns it will work and the two and single columns can we use this?

Roberto Zvjerković Over a year ago

Well sure, I was just making an example. You can change the condition a bit, I'm on a mobile now so can't really code properly.

MullisS · Accepted Answer · 2019-01-21 08:32:04Z

0

Hello you are missing the class "row" in you *ngFor-div:

<div class="row" *ngFor="let watch of List;let i = index;" >  
   <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
     style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
</div>
   <div>{{watch.value}}</div>
</div>

answered Jan 21, 2019 at 8:32

MullisS

2782 silver badges11 bronze badges

Comments

KonchenayaTvar · Accepted Answer · 2019-01-21 09:25:24Z

0

May be div with {{watch.value}} should be inside <div [ngClass]=" like this?

            <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
                 style="text-align:center; background-color:rgb(0, 183, 255);">
                 <div>{{watch.name}}<div>
                 <div>{{watch.value}}</div>
            </div>

answered Jan 21, 2019 at 9:25

KonchenayaTvar

834 bronze badges

Collectives™ on Stack Overflow

Best way to loop the angular 4 with bootstrap columns?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related