Apply two different classes with panel class depending on the condition in Angular material

I am using mat-select of Angular material. It has panelclass property that can be used to apply class. In parent component I have to style the drop down. The issue is :- I have to apply dynamic class to panelclass but type of panel class is string.

<mat-select panelClass="customClass ? customClass : select-position"> 
</mat-select>

I want to do something like this but its is not working and in DOM showing complete things inside "" as string

I have attcahed screenshot of generated HTML

Could you try the notation with the square brackets and the class names in quotes like this:

<mat-select [panelClass]="customClass ? 'customClass' : 'select-position'"> </mat-select>

You can use it in 2 ways to bind the values:

1. Using property binding (Wrapping the panelClass with square brackets [])

<mat-select [panelClass]="customClass ? 'customClass' : 'select-position'"> 
</mat-select>

2. Using interpolation (Wrapping the condition in {{}})

<mat-select panelClass="{{ customClass ? 'customClass' : 'select-position' }}"> </mat-select>