diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index f1fbe1ef28dd..6eaa22e7ff63 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -3390,7 +3390,7 @@ class NgIfSelect {
selector: 'select-with-change-event',
template: `
-
+
{{ food }}
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 9ca633252822..739afb49756c 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -18,7 +18,7 @@ import {
ScrollStrategy,
ViewportRuler,
} from '@angular/cdk/overlay';
-import {filter, first, startWith, takeUntil} from 'rxjs/operators';
+import {filter, first, map, startWith, takeUntil} from 'rxjs/operators';
import {
AfterContentInit,
Attribute,
@@ -401,14 +401,41 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
return merge(...this.options.map(option => option.onSelectionChange));
}
- /** Event emitted when the select has been opened. */
- @Output() onOpen: EventEmitter = new EventEmitter();
+ /** Event emitted when the select has been opened. */
+ @Output() openedChange: EventEmitter = new EventEmitter();
+
+ /** Event emitted when the select has been opened. */
+ @Output('opened')
+ get _openedStream(): Observable {
+ return this.openedChange.pipe(filter(o => o), map(() => {}));
+ }
/** Event emitted when the select has been closed. */
- @Output() onClose: EventEmitter = new EventEmitter();
+ @Output('closed')
+ get _closedStream(): Observable {
+ return this.openedChange.pipe(filter(o => !o), map(() => {}));
+ }
+
+ /**
+ * Event emitted when the select has been opened.
+ * @deprecated Use `openedChange` instead.
+ */
+ @Output() onOpen: Observable = this._openedStream;
- /** Event emitted when the selected value has been changed by the user. */
- @Output() change: EventEmitter = new EventEmitter();
+ /**
+ * Event emitted when the select has been closed.
+ * @deprecated Use `openedChange` instead.
+ */
+ @Output() onClose: Observable = this._closedStream;
+
+ /** Event emitted when the selected value has been changed by the user. */
+ @Output() selectionChange: EventEmitter = new EventEmitter();
+
+ /**
+ * Event emitted when the selected value has been changed by the user.
+ * @deprecated Use `selectionChange` instead.
+ */
+ @Output() change: EventEmitter = this.selectionChange;
/**
* Event that emits whenever the raw value of the select changes. This is here primarily
@@ -637,9 +664,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
_onPanelDone(): void {
if (this.panelOpen) {
this._scrollTop = 0;
- this.onOpen.emit();
+ this.openedChange.emit(true);
} else {
- this.onClose.emit();
+ this.openedChange.emit(false);
this._panelDoneAnimating = false;
this.overlayDir.offsetX = 0;
this._changeDetectorRef.markForCheck();
@@ -859,7 +886,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
this._value = valueToEmit;
this._onChange(valueToEmit);
- this.change.emit(new MatSelectChange(this, valueToEmit));
+ this.selectionChange.emit(new MatSelectChange(this, valueToEmit));
this.valueChange.emit(valueToEmit);
this._changeDetectorRef.markForCheck();
}