Angular ngFor with 2 columns and rows aligning

Question

I have an Angular5 app and have an array of strings that I want to display in 2 columns. I have the following code:

<div *ngFor="let singleItem of sevices;">
    <div style="width: 45%; float: left;background-color:red">
        {{singleItem}}            
    </div>        
</div>

This works, however if the string is too long, it can cause what looks like an empty column in the left side of a row. I want to be able to have a left and right column appear in one row, and have the tops of each column align. Any ideas how to do this?

Answer 1

Simplest solution was to add the CSS class "column-count:2;" to my outer div.

Answer 2

use the text-overflow: ellipsis property.

<div *ngFor="let singleItem of sevices;>
    <div 
       style="width: 45%;
       float: left;
       background-color:red
       white-space: nowrap;
       overflow:hidden !important;
       text-overflow: ellipsis;">

        {{singleItem}}            
    </div>        
</div>

Answer 3

You can use bootstrap classes if you have included it into your app.

<div class="row" *ngFor="let singleItem of sevices;let i = index;">
    <div class="col-md-6 left-style" *ngIf="i%2 == 0">
        {{singleItem}}            
    </div>  
    <div class="col-md-6 right-style" *ngIf="i%2 != 0">
        {{singleItem}}            
    </div>  
</div>

You can now add your styles to given class to col-md-6 divs