2

In Angular 11, in node_modules@angular\material\select there is a variable:

/**
     * Overlay pane containing the options.
     * @deprecated To be turned into a private API.
     * @breaking-change 10.0.0
     * @docs-private
     */
    overlayDir: CdkConnectedOverlay;

that in Angular 12 has now been changed to:

/** Overlay pane containing the options. */
    protected _overlayDir: CdkConnectedOverlay;

This of course breaks all of my usage of overlayDir For example:

let selectionOverlay = this.quickFiltersSelect
              .overlayDir as CdkConnectedOverlay;

Gives me the TS error: Property 'overlayDir' does not exist on type 'MatSelect' ...Which makes sense. Now it's protected. So I change .overlayDir to ._overlayDir and now get the TS error:

Property '_overlayDir' is protected and only accessible within class '_MatSelectBase<C>' and its subclasses.

I then imported _MatSelectBase but I am not sure what to replace it with, or if I should be accessing protected properties in this manner. I think _MatSelectBase is a generic, so it is looking for _MatSelectBase<C> but I am no longer sure I am on the right path.

Can anyone tell me where I have gone wrong, and what the solution might be?

Thank you.

Khepf
  • 352
  • 1
  • 4
  • 24

1 Answers1

0

Here is the official response:

https://github.com/angular/components/issues/23625

"We're moving away from positioning the dropdown on top of the select. You can try our new select based on top of MDC's styles. The API and behavior is exactly the same since it shares the same base class as the current select, but the CSS will be slightly different and the dropdown is only positioned above/below. You can try it by importing MatSelectModule from @angular/material-experimental/mdc-select instead of @angular/material/select."

So, the answer is, there is no answer using the actual select component. For now, we'll have to use the experimental component if we don't want the options right on top of the select.

Khepf
  • 352
  • 1
  • 4
  • 24