Class MatSelect

src/material/select/select.ts:185–1434

  imports: [CdkOverlayOrigin, CdkConnectedOverlay],
})
export class MatSelect
  implements
    AfterContentInit,
    OnChanges,
    OnDestroy,
    OnInit,
    DoCheck,
    ControlValueAccessor,
    MatFormFieldControl<any>
{
  protected _viewportRuler = inject(ViewportRuler);
  protected _changeDetectorRef = inject(ChangeDetectorRef);
  readonly _elementRef = inject(ElementRef);
  private _dir = inject(Directionality, {optional: true});
  private _idGenerator = inject(_IdGenerator);
  private _renderer = inject(Renderer2);
  protected _parentFormField = inject<MatFormField>(MAT_FORM_FIELD, {optional: true});
  ngControl = inject(NgControl, {self: true, optional: true})!;
  private _liveAnnouncer = inject(LiveAnnouncer);
  protected _defaultOptions = inject(MAT_SELECT_CONFIG, {optional: true});
  protected _animationsDisabled = _animationsDisabled();
  protected _popoverLocation: FlexibleOverlayPopoverLocation | null;
  private _initialized = new Subject();
  private _cleanupDetach: (() => void) | undefined;

  /** All of the defined select options. */
  @ContentChildren(MatOption, {descendants: true}) options!: QueryList<MatOption>;

  // TODO(crisbeto): this is only necessary for the non-MDC select, but it's technically a
  // public API so we have to keep it. It should be deprecated and removed eventually.
  /** All of the defined groups of options. */
  @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups!: QueryList<MatOptgroup>;

  /** User-supplied override of the trigger element. */
  @ContentChild(MAT_SELECT_TRIGGER) customTrigger!: MatSelectTrigger;

  /**
   * This position config ensures that the top "start" corner of the overlay
   * is aligned with with the top "start" of the origin by default (overlapping
   * the trigger completely). If the panel cannot fit below the trigger, it
   * will fall back to a position above the trigger.
   */
  _positions: ConnectedPosition[] = [
    {
      originX: 'start',
      originY: 'bottom',
      overlayX: 'start',
      overlayY: 'top',
    },
    {
      originX: 'end',
      originY: 'bottom',
      overlayX: 'end',
      overlayY: 'top',
    },
    {
      originX: 'start',
      originY: 'top',