use ngClass for styling matautocomplete

Question

I'm trying to style a mat-autocomplete element with ngClass and I can't get it to work!

In my CSS I wrote:

::ng-deep .default .mat-autocomplete-panel {
  background-color: white !important;  
  border: 1px solid #e4e9f2; 
  border-radius: 0.25rem;
  font-family: exo; 
  font-weight: 400;
  margin-top: 5px;
}

::ng-deep .dark .mat-autocomplete-panel {
      background-color: black !important;  
      border: 1px solid #e4e9f2; 
      border-radius: 0.25rem;
      font-family: exo; 
      font-weight: 400;
      margin-top: 5px;
    }

In my HTML I wrote:

  <mat-autocomplete [ngClass]="{ 'dark' : currentTheme == 'dark', 'default' : currentTheme != 'dark' }"> 
                    <mat-option *ngFor="let option of filteredOptions | async" [value]="option"> 
                      {{option}}
                     </mat-option>
              </mat-autocomplete>

If I use only one class, it works fine.. but I want to conditionally change the style of the mat-autocomplete-panel. How should I do this??

Answer 1

It works for me using a property string CSSClasses: string | string[] = 'customAutocomplete';, then in the matAutocomplete component put that property in class with <mat-autocomplete class="{{ CSSClasses }}">.

Like this

Good luck!