How to remove underline of mat-select component

You can also use the appearance property on the <form-field> . Setting appearance="none" will remove the underline without any css hack. And you can also get rid of ::ng-deep which is not recommended.

So your code will be like this.

<mat-form-field appearance="none">
 <mat-select placeholder="Favorite food">
   <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

For more information on appearance, you can check here. https://material.angular.io/components/form-field/overview#form-field-appearance-variants

You can do this:

::ng-deep .mat-form-field-underline {
  display: none;
}

StackBlitz