How does mat-autocomplete classList Input work?

Question

According to the MatAutocomplete documentation, there is a classList input to style the panel.

@Input('class') classList: string | string[]

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

When I do <mat-autocomplete #auto="matAutocomplete" classList="test-class"> I expected that I would see the test-class added to the mat-autocomplete-panel? But this does not work.

Can someone please explain how this input is to be used?

Stackblitz

Pieter Buys · Accepted Answer · 2021-12-01T08:27:53.777

15

I figured it out. The docs say that it takes classes "set on the host mat-autocomplete".

That's the part I missed. You need to set class="test-class" as well

<mat-autocomplete #auto="matAutocomplete" class = "test-class" classlist="test-class">

I also realized that the css must be in your app's base styles.css file and not in your component css file for it to work. It's probably because your panel will be inside an overlay outside of your component

Working stackblitz

Edit

OR as Ankit Singh pointed out in his answer, you can use ::ng-deep if you still want to do it in the component css file...

::ng-deep .test-class {
  background-color: blue;
}

edited Dec 01 '21 at 08:27

answered Jan 20 '21 at 10:13

Pieter Buys

1,280
1
10
20

1

Clutch for putting it in the global .css file. For some reason, some of my classes will apply when in mat-option or mat-autocomplete, but some will only apply when they are in the global styles file. Not sure why. Thanks for this solution. – SauerTrout Jun 10 '21 at 15:04
I don't get why styling `mat-select` panels and `mat-autocomplete` panels don't just work the same... – Elias Strehle Oct 25 '21 at 08:30
The `bindingPropertyName` of `classList` input is `class`. No need to use `classList` on `mat-autocomplete`. – Serene Abraham Mathew Dec 13 '21 at 08:57

score 1 · Answer 2 · answered May 15 '21 at 10:23

1

As per Pieter Buys Anwser i would to add

you can ng-deep

in .css file if you want you css to be encapsulated

Working stackblitz

answered May 15 '21 at 10:23

Ankit Singh

45
6

score 0 · Answer 3 · answered Oct 08 '21 at 11:24

0

If you want to customize (without classlist and still with encapsulation), in your style.css

.mat-autocomplete-panel:hover {
  .mat-option:hover {
    background: blue;
    color: white;
  }
}

answered Oct 08 '21 at 11:24

ackuser

5,681
5
40
48

How does mat-autocomplete classList Input work?

3 Answers3

Edit