title: How to create carousel in angular 8 using Angular Material?
body: <p>The first image is what I am getting currently and second is what I actually want
  <br/></p>
  
  <blockquote>
    <p><strong>First:-</strong></p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/JKSGU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JKSGU.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>Second:-</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/XoSFi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XoSFi.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;mat-card class="carousel-data"&gt;
      &lt;mat-grid-list cols="2" rowHeight="30px" class="carousel-data" *ngFor="let data of resource let i = index;" (click)="showdata()" &gt;
  
          &lt;mat-grid-tile&gt;     
             &lt;img class="m-t-0 m-b-0 "[src]="data.img" alt="" width="24"&gt;
              &lt;div class="prof-left" style="margin-left: 10px;"&gt;
                  &lt;p class="m-t-0 m-b-0 bank-name"&gt;{{ data.bank_name}}&lt;/p&gt;
                  &lt;p class="m-t-0 m-b-0 bank-account"&gt;{{ data.account_number }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/mat-grid-tile&gt;
          &lt;mat-grid-tile&gt;
              &lt;div class="prof-right"&gt;
                  &lt;p class="m-t-0 m-b-0 total-bal"&gt;Total Bal&lt;/p&gt;
                  &lt;p class="m-t-0 m-b-0 total-amount"&gt;{{ data.amount }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/mat-grid-tile&gt;
      &lt;/mat-grid-list&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9Tinf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Tinf.png" alt="enter image description here"></a></p>