fix(core): make MatOption generic

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

Fixes #19456.

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,10 +36,10 @@ import {MatOptgroup, _MatOptgroupBase, MAT_OPTGROUP} from './optgroup';
 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: MatOption,
+    public source: MatOption<T>,
     /** Whether the change in the option's value was a result of a user action. */
     public isUserInput = false) { }
 }
@@ -62,7 +62,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
 
 
 @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;
@@ -75,7 +75,7 @@ export class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDest
   get selected(): boolean { return this._selected; }
 
   /** The form value of the option. */
-  @Input() value: any;
+  @Input() value: T;
 
   /** The unique ID of the option. */
   @Input() id: string = `mat-option-${_uniqueIdCounter++}`;
@@ -90,7 +90,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>();
@@ -242,7 +242,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));
   }
 
   static ngAcceptInputType_disabled: BooleanInput;
@@ -273,7 +273,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.d.ts

@@ -10,7 +10,7 @@ export declare class _MatOptgroupBase extends _MatOptgroupMixinBase implements C
     static ɵfac: i0.ɵɵFactoryDef<_MatOptgroupBase, never>;
 }
 
-export declare class _MatOptionBase implements FocusableOption, AfterViewChecked, OnDestroy {
+export declare class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecked, OnDestroy {
     readonly _stateChanges: Subject<void>;
     get active(): boolean;
     get disableRipple(): boolean | undefined;
@@ -19,9 +19,9 @@ export declare class _MatOptionBase implements FocusableOption, AfterViewChecked
     readonly group: _MatOptgroupBase;
     id: string;
     get multiple(): boolean | undefined;
-    readonly onSelectionChange: EventEmitter<MatOptionSelectionChange>;
+    readonly onSelectionChange: EventEmitter<MatOptionSelectionChange<T>>;
     get selected(): boolean;
-    value: any;
+    value: T;
     get viewValue(): string;
     constructor(_element: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _parent: MatOptionParentComponent, group: _MatOptgroupBase);
     _getAriaSelected(): boolean | null;
@@ -38,8 +38,8 @@ export declare class _MatOptionBase implements FocusableOption, AfterViewChecked
     setActiveStyles(): void;
     setInactiveStyles(): void;
     static ngAcceptInputType_disabled: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatOptionBase, never, never, { "value": "value"; "id": "id"; "disabled": "disabled"; }, { "onSelectionChange": "onSelectionChange"; }, never>;
-    static ɵfac: i0.ɵɵFactoryDef<_MatOptionBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatOptionBase<any>, never, never, { "value": "value"; "id": "id"; "disabled": "disabled"; }, { "onSelectionChange": "onSelectionChange"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDef<_MatOptionBase<any>, never>;
 }
 
 export declare class AnimationCurves {
@@ -238,10 +238,10 @@ export declare class MatOptgroup extends _MatOptgroupBase {
     static ɵfac: i0.ɵɵFactoryDef<MatOptgroup, never>;
 }
 
-export declare class MatOption extends _MatOptionBase {
+export declare class MatOption<T = any> extends _MatOptionBase<T> {
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatOption, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
-    static ɵfac: i0.ɵɵFactoryDef<MatOption, [null, null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDef<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
 }
 
 export declare class MatOptionModule {
@@ -254,11 +254,11 @@ export interface MatOptionParentComponent {
     multiple?: boolean;
 }
 
-export declare class MatOptionSelectionChange {
+export declare class MatOptionSelectionChange<T = any> {
     isUserInput: boolean;
-    source: MatOption;
+    source: MatOption<T>;
     constructor(
-    source: MatOption,
+    source: MatOption<T>,
     isUserInput?: boolean);
 }