I am trying to make animation work: Basically there's a drop down box and a button When a user makes new selection of the drop down, the button background color will change accordingly. This part works. However, I'd like to add an animation effect that whenever a new selection is made in drop down, the background color of the color will change accordingly and flash for 3 times. The reason is that this animation will show that new selection is accepted and handled.

I'm using Angular type script.

Here's the drop down list for user to select an option

<mat-select>
    <mat-option (onSelectionChange)="setButtonColor($event)" *ngFor="let opt of Opts" [value]="Opts">
      {{ opt }}
    </mat-option>
  </mat-select>

Here's how button is created in the html

<button mat-raised-button class="mt-status-button"
        [ngStyle]="{'background-color': bgColor[0], 'color': 'white', 'width': '120px', 'margin': '10px 5px 5px 50px'}">
  item1
</button>

Here's the setButtonColor triggered by new option selection and it will change the backcolor of the button (changing the values of bgColor[0]) and hopefully the newly changed background color will flash

Right now the color change is successfully but I cannot make it flash upon selection of the drop down list.

  setButtonColor(event) {
    if (event.isUserInput) {
        var colorStr:string;
        <==== Is there a way to trigger button background color flash for 3 times in here?