fix(select): make @output names consistent #6677 (#8052)

Author: amcdnl

src/lib/select/select.spec.ts

@@ -3390,7 +3390,7 @@ class NgIfSelect {
   selector: 'select-with-change-event',
   template: `
     <mat-form-field>
-      <mat-select (change)="changeListener($event)">
+      <mat-select (selectionChange)="changeListener($event)">
         <mat-option *ngFor="let food of foods" [value]="food">{{ food }}</mat-option>
       </mat-select>
     </mat-form-field>

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<void> = new EventEmitter<void>();
+   /** Event emitted when the select has been opened. */
+   @Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+   /** Event emitted when the select has been opened. */
+   @Output('opened')
+   get _openedStream(): Observable<void> {
+    return this.openedChange.pipe(filter(o => o), map(() => {}));
+  }
 
   /** Event emitted when the select has been closed. */
-  @Output() onClose: EventEmitter<void> = new EventEmitter<void>();
+  @Output('closed')
+  get _closedStream(): Observable<void> {
+    return this.openedChange.pipe(filter(o => !o), map(() => {}));
+  }
+
+  /**
+   * Event emitted when the select has been opened.
+   * @deprecated Use `openedChange` instead.
+   */
+  @Output() onOpen: Observable<void> = this._openedStream;
 
-  /** Event emitted when the selected value has been changed by the user. */
-  @Output() change: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
+  /**
+   * Event emitted when the select has been closed.
+   * @deprecated Use `openedChange` instead.
+   */
+  @Output() onClose: Observable<void> = this._closedStream;
+
+   /** Event emitted when the selected value has been changed by the user. */
+  @Output() selectionChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
+
+  /**
+   * Event emitted when the selected value has been changed by the user.
+   * @deprecated Use `selectionChange` instead.
+   */
+  @Output() change: EventEmitter<MatSelectChange> = 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();
   }