Let's say we need three columns to show the trending keywords, recorded news, and the ranked news. The simple HTML structure for that scenario could be as follows:
<div class="row"> <div class="col-md-3"> <h3>Hot Trends</h3> <ul> <li *ngFor="let trend of trends"> {{trend.keyword}} ({{trend.rank}}) </li> </ul> </div> <div class="col-md-4"> <h3>Collected News (Collector Component)</h3> <div *ngFor="let item of collectedNews|async; let o=odd;"> <div [style.backgroundColor]="o ? 'Khaki':'ivory'"> {{item.description}} </div> </div> </div> <div class="col-md-5"> <h3>Ranked News (Rating Component)</h3> <div *ngFor="let item of ratedNews"> {{item.title}} - {{item.rank}} - <a href="{{item.link}}">more</a> </div> </div>...