CODEWITHSUNDEEP
htmlcssangular
rja
rja

Reputation: 169

Apply bootstrap grid style for HTML div

In my angular app, I am trying to apply bootstrap grid style based on the number of items in an array. For example:

If the length of array in for loop is 5. I want to set first and second item in a row, 3rd and 4th in a row with col-md-6 or width 50. And I want to set the 5th item to full width 100%.

If the length of the array in for loop is 2, I want to set first and second item in a row with 50% width. If only 1 item exists, I want to set it to full width. How can I achieve this?

HTML

<div class="col-md-12">
<div class="row">
<div class="test" *ngFor="let item of array">
<label>test</label>
</div>
</div>
</div>

Upvotes: 1

Views: 54

Answers (1)

Mohammed Aamier
Mohammed Aamier

Reputation: 188

use ngClass

[ngClass]="{'col-6': array.length === 5, 'col-12': array.length === 4}"

try like this

Upvotes: 1

Related Questions