fix(select): MatOption state change stream not being completed (#10540)

Completes the `MatOption._stateChanges` stream on destroy.

Author: crisbeto

src/lib/core/option/option.spec.ts

@@ -13,6 +13,20 @@ describe('MatOption component', () => {
     }).compileComponents();
   }));
 
+  it('should complete the `stateChanges` stream on destroy', () => {
+    const fixture = TestBed.createComponent(OptionWithDisable);
+    fixture.detectChanges();
+
+    const optionInstance: MatOption =
+        fixture.debugElement.query(By.directive(MatOption)).componentInstance;
+    const completeSpy = jasmine.createSpy('complete spy');
+    const subscription = optionInstance._stateChanges.subscribe(undefined, undefined, completeSpy);
+
+    fixture.destroy();
+    expect(completeSpy).toHaveBeenCalled();
+    subscription.unsubscribe();
+  });
+
   describe('ripples', () => {
     let fixture: ComponentFixture<OptionWithDisable>;
     let optionDebugElement: DebugElement;

src/lib/core/option/option.ts

@@ -23,6 +23,7 @@ import {
   InjectionToken,
   Inject,
   AfterViewChecked,
+  OnDestroy,
 } from '@angular/core';
 import {MatOptgroup} from './optgroup';
 
@@ -83,7 +84,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatOption implements AfterViewChecked {
+export class MatOption implements AfterViewChecked, OnDestroy {
   private _selected = false;
   private _active = false;
   private _disabled = false;
@@ -241,6 +242,10 @@ export class MatOption implements AfterViewChecked {
     }
   }
 
+  ngOnDestroy() {
+    this._stateChanges.complete();
+  }
+
   /** Emits the selection change event. */
   private _emitSelectionChangeEvent(isUserInput = false): void {
     this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));