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

Question

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

did you try [ngCLass](https://angular.io/api/common/NgClass) ? — Kaneki21, May 17 '23 at 06:52
Just wrap the `panelClass` in the [square brackets](https://angular.io/guide/property-binding#binding-to-a-property), otherwise right-hand side won't be treated as expression but as a string. e.g. `[panelClass]="isCustom ? 'custom' : 'select-position'"` — TotallyNewb, May 17 '23 at 07:05

score 2 · Answer 1 · answered May 17 '23 at 07:04

2

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>

answered May 17 '23 at 07:04

Leonardum

444
4
8

score 1 · Answer 2 · answered May 17 '23 at 13:21

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

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

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

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

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

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

2 Answers2