How to create YouTube like chips slider with angular material

Question

i have created list of mat chips in my project and set it to overflow auto for scrolling. I want to create mat chips slider like YouTube. Here enter image description here

what i did so far HTML:

 <div class="chips">
    <mat-chip-list  aria-label="shop shopCategory">
      <div class="scrollable">
        
        <mat-chip  *ngFor="let chip of shopTab" selected  (click)="passCat(chip.id)" >
          <mat-chip-avatar>
            <img src="./assets/images/{{chip.img}}" />
        </mat-chip-avatar>
          {{chip.name}}
        </mat-chip>
      </div>
      </mat-chip-list> 
  </div>

CSS:

.scrollable {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  height: 72px;
  overflow-y: hidden;
}
.chips{
  margin-top: 10px;
}
.mat-chip{
  background-color: white !important;
  color: black !important;
  
}