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?
CaptainMorgan :
Simplest solution was to add the CSS class \"column-count:2;\" to my outer div.",
2017-11-30T04:08:03
Kishan :
You can use bootstrap classes if you have included it into your app. \n\n\r\n\r\n<div class=\"row\" *ngFor=\"let singleItem of sevices;let i = index;\">\r\n <div class=\"col-md-6 left-style\" *ngIf=\"i%2 == 0\">\r\n {{singleItem}} \r\n </div> \r\n <div class=\"col-md-6 right-style\" *ngIf=\"i%2 != 0\">\r\n {{singleItem}} \r\n </div> \r\n</div>",
2017-11-30T04:06:21