fix(material/core): make MatOption generic (#20242)

Makes `MatOption` generic so that consumers can type its `value` to something different from `any`.

Fixes #19456.

(cherry picked from commit 74099a0)

Author: crisbeto

src/material-experimental/mdc-core/option/option.ts

@@ -48,7 +48,7 @@ import {MatOptgroup} from './optgroup';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatOption extends _MatOptionBase {
+export class MatOption<T = any> extends _MatOptionBase<T> {
   constructor(
     element: ElementRef<HTMLElement>,
     changeDetectorRef: ChangeDetectorRef,

src/material/core/option/option.ts

@@ -36,17 +36,17 @@ import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-pa
 let _uniqueIdCounter = 0;
 
 /** Event object emitted by MatOption when selected or deselected. */
-export class MatOptionSelectionChange {
+export class MatOptionSelectionChange<T = any> {
   constructor(
     /** Reference to the option that emitted the event. */
-    public source: _MatOptionBase,
+    public source: _MatOptionBase<T>,
     /** Whether the change in the option's value was a result of a user action. */
     public isUserInput = false,
   ) {}
 }
 
 @Directive()
-export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDestroy {
+export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecked, OnDestroy {
   private _selected = false;
   private _active = false;
   private _disabled = false;
@@ -63,7 +63,7 @@ export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDest
   }
 
   /** The form value of the option. */
-  @Input() value: any;
+  @Input() value: T;
 
   /** The unique ID of the option. */
   @Input() id: string = `mat-option-${_uniqueIdCounter++}`;
@@ -84,7 +84,7 @@ export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDest
 
   /** Event emitted when the option is selected or deselected. */
   // tslint:disable-next-line:no-output-on-prefix
-  @Output() readonly onSelectionChange = new EventEmitter<MatOptionSelectionChange>();
+  @Output() readonly onSelectionChange = new EventEmitter<MatOptionSelectionChange<T>>();
 
   /** Emits when the state of the option changes and any parents have to be notified. */
   readonly _stateChanges = new Subject<void>();
@@ -237,7 +237,7 @@ export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDest
 
   /** Emits the selection change event. */
   private _emitSelectionChangeEvent(isUserInput = false): void {
-    this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));
+    this.onSelectionChange.emit(new MatOptionSelectionChange<T>(this, isUserInput));
   }
 }
 
@@ -266,7 +266,7 @@ export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDest
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatOption extends _MatOptionBase {
+export class MatOption<T = any> extends _MatOptionBase<T> {
   constructor(
     element: ElementRef<HTMLElement>,
     changeDetectorRef: ChangeDetectorRef,

tools/public_api_guard/material/core.md

@@ -266,16 +266,16 @@ export class _MatOptgroupBase extends _MatOptgroupMixinBase implements CanDisabl
 }
 
 // @public
-export class MatOption extends _MatOptionBase {
+export class MatOption<T = any> extends _MatOptionBase<T> {
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption, [null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
 }
 
 // @public (undocumented)
-export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDestroy {
+export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecked, OnDestroy {
     constructor(_element: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _parent: MatOptionParentComponent, group: _MatOptgroupBase);
     get active(): boolean;
     deselect(): void;
@@ -296,19 +296,19 @@ export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDest
     ngAfterViewChecked(): void;
     // (undocumented)
     ngOnDestroy(): void;
-    readonly onSelectionChange: EventEmitter<MatOptionSelectionChange>;
+    readonly onSelectionChange: EventEmitter<MatOptionSelectionChange<T>>;
     select(): void;
     get selected(): boolean;
     _selectViaInteraction(): void;
     setActiveStyles(): void;
     setInactiveStyles(): void;
     readonly _stateChanges: Subject<void>;
-    value: any;
+    value: T;
     get viewValue(): string;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatOptionBase, never, never, { "value": "value"; "id": "id"; "disabled": "disabled"; }, { "onSelectionChange": "onSelectionChange"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatOptionBase<any>, never, never, { "value": "value"; "id": "id"; "disabled": "disabled"; }, { "onSelectionChange": "onSelectionChange"; }, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatOptionBase, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatOptionBase<any>, never>;
 }
 
 // @public (undocumented)
@@ -332,12 +332,12 @@ export interface MatOptionParentComponent {
 }
 
 // @public
-export class MatOptionSelectionChange {
+export class MatOptionSelectionChange<T = any> {
     constructor(
-    source: _MatOptionBase,
+    source: _MatOptionBase<T>,
     isUserInput?: boolean);
     isUserInput: boolean;
-    source: _MatOptionBase;
+    source: _MatOptionBase<T>;
 }
 
 // @public