ngFor.html

<div class="new-area">
  <div class="row news-main" *ngFor="let article of articles | slice:0:1;">
     <div class="col-md-12">
       <div class="card card-inverse">
         <img class="img-card img-fluid" src="{{article.urlToImage}}" alt="Card image">
         <div class="card-img-overlay col-md-12">
           <div class="card-content">
             <h4 class="card-title">{{article.title}}</h4>
             <p class="card-text">{{article.description}}</p>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div class="row news-sub-main">
     <div [ngClass]="{'col-lg-6 col-md-8':i==1, 'col-lg-3 col-md-4':i!= 1}" *ngFor="let article of articles| slice:0:3; let i=index">
       <div class="card card-inverse" *ngIf="i == 1">
         <img class="img-card img-fluid" src="{{article.urlToImage}}" alt="Card image">
         <div class="card-img-overlay bottom-align-text col-md-12">
           <div class="card-content">
             <h4 class="card-title">{{article.title}}</h4>
             <p class="card-text">{{article.description}}</p>
           </div>
         </div>
       </div>
       <div class="card" *ngIf="i != 1">
         <img class="img-fluid card-img-top" src="{{article.urlToImage}}" alt="Card image cap">
         <div class="card-block">
           <h4 class="card-title">{{article.title}}</h4>
           <p class="card-text">{{article.description}}</p>
         </div>
       </div>
     </div>
   </div>
   <div class="row news-sub-items">
     <div class="col-md-4 col-sm-6 col-lg-3" *ngFor="let article of articles | slice:4">
       <div class="card">
         <img class="img-fluid card-img-top" src="{{article.urlToImage}}" alt="Card image cap">
         <div class="card-block">
           <h4 class="card-title">{{article.title}}</h4>
           <p class="card-text">{{article.description}}</p>
         </div>
       </div>
     </div>
   </div>
 </div>