diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index d840b3198d46..0abc62c9d840 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 8ad70fc9d2dd..355d0c810e38 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, RxChain, startWith, takeUntil} from '@angular/cdk/rxjs';
+import {filter, first, map, RxChain, startWith, takeUntil} from '@angular/cdk/rxjs';
import {
AfterContentInit,
Attribute,
@@ -402,13 +402,46 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
}
/** Event emitted when the select has been opened. */
- @Output() onOpen: EventEmitter = new EventEmitter();
+ @Output() openedChange: EventEmitter = new EventEmitter();
+
+ /** Event emitted when the select has been opened. */
+ @Output('opened')
+ get _openedStream(): Observable {
+ return RxChain.from(this.openedChange)
+ .call(filter, o => o)
+ .call(map, () => {})
+ .result();
+ }
/** Event emitted when the select has been closed. */
- @Output() onClose: EventEmitter = new EventEmitter();
+ @Output('closed')
+ get _closedStream(): Observable {
+ return RxChain.from(this.openedChange)
+ .call(filter, o => !o)
+ .call(map, () => {})
+ .result();
+ }
+
+ /**
+ * Event emitted when the select has been opened.
+ * @deprecated Use `openedChange` instead.
+ */
+ @Output() onOpen: Observable = this._openedStream;
+
+ /**
+ * 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() change: EventEmitter = new EventEmitter();
+ @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
@@ -640,9 +673,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();
@@ -864,7 +897,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();
}