refactor(multiple): resolve rxjs 7 compilation errors (#22566)

Fixes a few places that will become compilation errors in rxjs version 7. All of the changes are backwards-compatible so we can merge them now so that we have less issues to resolve once we make the switch.

Author: crisbeto

src/cdk-experimental/combobox/combobox-panel.ts

@@ -33,7 +33,7 @@ export class CdkComboboxPanel<T = unknown> {
 
   /** Tells the parent combobox to close the panel and sends back the content value. */
   closePanel(data?: T | T[]) {
-    this.valueUpdated.next(data);
+    this.valueUpdated.next(data || []);
   }
 
   // TODO: instead of using a focus function, potentially use cdk/a11y focus trapping

src/cdk-experimental/menu/context-menu.ts

@@ -31,7 +31,7 @@ import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion';
 import {Subject, merge} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {CdkMenuPanel} from './menu-panel';
-import {MenuStack, MenuStackItem} from './menu-stack';
+import {MenuStack} from './menu-stack';
 import {throwExistingMenuStackError} from './menu-errors';
 import {isClickInsideMenuOverlay} from './menu-item-trigger';
 
@@ -271,7 +271,7 @@ export class CdkContextMenuTrigger implements OnDestroy {
 
   /** Subscribe to the menu stack close events and close this menu when requested. */
   private _setMenuStackListener() {
-    this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe((item: MenuStackItem) => {
+    this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
       if (item === this._menuPanel._menu && this.isOpen()) {
         this.closed.next();
         this._overlayRef!.detach();

src/cdk-experimental/menu/menu-bar.ts

@@ -199,33 +199,35 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
   private _subscribeToMenuStack() {
     this._menuStack.closed
       .pipe(takeUntil(this._destroyed))
-      .subscribe((item: MenuStackItem) => this._closeOpenMenu(item));
+      .subscribe(item => this._closeOpenMenu(item));
 
     this._menuStack.emptied
       .pipe(takeUntil(this._destroyed))
-      .subscribe((event: FocusNext) => this._toggleOpenMenu(event));
+      .subscribe(event => this._toggleOpenMenu(event));
   }
 
   /**
    * Close the open menu if the current active item opened the requested MenuStackItem.
    * @param item the MenuStackItem requested to be closed.
    */
-  private _closeOpenMenu(menu: MenuStackItem) {
+  private _closeOpenMenu(menu: MenuStackItem | undefined) {
     const trigger = this._openItem;
     const keyManager = this._keyManager;
     if (menu === trigger?.getMenuTrigger()?.getMenu()) {
-      trigger.getMenuTrigger()?.closeMenu();
+      trigger?.getMenuTrigger()?.closeMenu();
       // If the user has moused over a sibling item we want to focus the element under mouse focus
       // not the trigger which previously opened the now closed menu.
-      keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger);
+      if (trigger) {
+        keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger);
+      }
     }
   }
 
   /**
    * Set focus to either the current, previous or next item based on the FocusNext event, then
    * open the previous or next item.
    */
-  private _toggleOpenMenu(event: FocusNext) {
+  private _toggleOpenMenu(event: FocusNext | undefined) {
     const keyManager = this._keyManager;
     switch (event) {
       case FocusNext.nextItem:

src/cdk-experimental/menu/menu-stack.ts

@@ -34,20 +34,20 @@ export class MenuStack {
   private readonly _elements: MenuStackItem[] = [];
 
   /** Emits the element which was popped off of the stack when requested by a closer. */
-  private readonly _close: Subject<MenuStackItem> = new Subject();
+  private readonly _close: Subject<MenuStackItem | undefined> = new Subject();
 
   /** Emits once the MenuStack has become empty after popping off elements. */
-  private readonly _empty: Subject<FocusNext> = new Subject();
+  private readonly _empty: Subject<FocusNext | undefined> = new Subject();
 
   /** Observable which emits the MenuStackItem which has been requested to close. */
-  readonly closed: Observable<MenuStackItem> = this._close;
+  readonly closed: Observable<MenuStackItem | undefined> = this._close;
 
   /**
    * Observable which emits when the MenuStack is empty after popping off the last element. It
    * emits a FocusNext event which specifies the action the closer has requested the listener
    * perform.
    */
-  readonly emptied: Observable<FocusNext> = this._empty;
+  readonly emptied: Observable<FocusNext | undefined> = this._empty;
 
   /** @param menu the MenuStackItem to put on the stack. */
   push(menu: MenuStackItem) {
@@ -64,7 +64,7 @@ export class MenuStack {
    */
   close(lastItem: MenuStackItem, focusNext?: FocusNext) {
     if (this._elements.indexOf(lastItem) >= 0) {
-      let poppedElement;
+      let poppedElement: MenuStackItem | undefined;
       do {
         poppedElement = this._elements.pop();
         this._close.next(poppedElement);

src/cdk-experimental/menu/menu.ts

@@ -261,30 +261,32 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
   private _subscribeToMenuStack() {
     this._menuStack.closed
       .pipe(takeUntil(this.closed))
-      .subscribe((item: MenuStackItem) => this._closeOpenMenu(item));
+      .subscribe(item => this._closeOpenMenu(item));
 
     this._menuStack.emptied
       .pipe(takeUntil(this.closed))
-      .subscribe((event: FocusNext) => this._toggleMenuFocus(event));
+      .subscribe(event => this._toggleMenuFocus(event));
   }
 
   /**
    * Close the open menu if the current active item opened the requested MenuStackItem.
    * @param item the MenuStackItem requested to be closed.
    */
-  private _closeOpenMenu(menu: MenuStackItem) {
+  private _closeOpenMenu(menu: MenuStackItem | undefined) {
     const keyManager = this._keyManager;
     const trigger = this._openItem;
     if (menu === trigger?.getMenuTrigger()?.getMenu()) {
-      trigger.getMenuTrigger()?.closeMenu();
+      trigger?.getMenuTrigger()?.closeMenu();
       // If the user has moused over a sibling item we want to focus the element under mouse focus
       // not the trigger which previously opened the now closed menu.
-      keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger);
+      if (trigger) {
+        keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger);
+      }
     }
   }
 
   /** Set focus the either the current, previous or next item based on the FocusNext event. */
-  private _toggleMenuFocus(event: FocusNext) {
+  private _toggleMenuFocus(event: FocusNext | undefined) {
     const keyManager = this._keyManager;
     switch (event) {
       case FocusNext.nextItem:

src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts

@@ -1,6 +1,5 @@
 import {SelectionChange} from '@angular/cdk-experimental/selection';
-import {Component, OnDestroy} from '@angular/core';
-import {ReplaySubject} from 'rxjs';
+import {Component} from '@angular/core';
 
 /**
  * @title CDK Selection Column on a CDK table.
@@ -10,18 +9,11 @@ import {ReplaySubject} from 'rxjs';
   templateUrl: 'cdk-selection-column-example.html',
   styleUrls: ['cdk-selection-column-example.css'],
 })
-export class CdkSelectionColumnExample implements OnDestroy {
-  private readonly _destroyed = new ReplaySubject(1);
-
+export class CdkSelectionColumnExample {
   displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
   dataSource = ELEMENT_DATA;
   selected: string[] = [];
 
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
   selectionChanged(event: SelectionChange<PeriodicElement>) {
     this.selected = event.after.map((select) => select.value.name);
   }

src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts

@@ -1,6 +1,5 @@
 import {SelectionChange} from '@angular/cdk-experimental/selection';
-import {Component, OnDestroy} from '@angular/core';
-import {ReplaySubject} from 'rxjs';
+import {Component} from '@angular/core';
 
 /**
  * @title CDK Selection on a simple list.
@@ -9,26 +8,18 @@ import {ReplaySubject} from 'rxjs';
   selector: 'cdk-selection-list-example',
   templateUrl: 'cdk-selection-list-example.html',
 })
-export class CdkSelectionListExample implements OnDestroy {
-  private readonly _destroyed = new ReplaySubject(1);
-
+export class CdkSelectionListExample {
   data = ELEMENT_NAMES;
-
   selected1: string[] = [];
   selected2: string[] = [];
   selected3: string[] = [];
   selected4: string[] = [];
 
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
   getCurrentSelected(event: SelectionChange<string>) {
     return event.after.map((select) => select.value);
   }
 
-  trackByFn(index: number, value: string) {
+  trackByFn(index: number) {
     return index;
   }
 

src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts

@@ -1,6 +1,5 @@
-import {Component, OnDestroy} from '@angular/core';
+import {Component} from '@angular/core';
 import {SelectionChange} from '@angular/material-experimental/selection';
-import {ReplaySubject} from 'rxjs';
 
 /**
  * @title Table that uses `matSelectionColumn` which allows users to select rows.
@@ -10,18 +9,11 @@ import {ReplaySubject} from 'rxjs';
   templateUrl: 'mat-selection-column-example.html',
   styleUrls: ['mat-selection-column-example.css'],
 })
-export class MatSelectionColumnExample implements OnDestroy {
-  private readonly _destroyed = new ReplaySubject(1);
-
+export class MatSelectionColumnExample {
   displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
   dataSource = ELEMENT_DATA;
   selected: string[] = [];
 
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
   selectionChanged(event: SelectionChange<PeriodicElement>) {
     this.selected = event.after.map((select) => select.value.name);
   }

src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts

@@ -1,6 +1,5 @@
 import {SelectionChange} from '@angular/cdk-experimental/selection';
-import {Component, OnDestroy} from '@angular/core';
-import {ReplaySubject} from 'rxjs';
+import {Component} from '@angular/core';
 
 /**
  * @title Mat Selection on a simple list.
@@ -9,21 +8,13 @@ import {ReplaySubject} from 'rxjs';
   selector: 'mat-selection-list-example',
   templateUrl: 'mat-selection-list-example.html',
 })
-export class MatSelectionListExample implements OnDestroy {
-  private readonly _destroyed = new ReplaySubject(1);
-
+export class MatSelectionListExample {
   data = ELEMENT_NAMES;
-
   selected1: string[] = [];
   selected2: string[] = [];
   selected3: string[] = [];
   selected4: string[] = [];
 
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
   getCurrentSelected(event: SelectionChange<string>) {
     return event.after.map((select) => select.value);
   }

src/material/datepicker/datepicker-toggle.ts

@@ -23,7 +23,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import {MatButton} from '@angular/material/button';
-import {merge, of as observableOf, Subscription} from 'rxjs';
+import {merge, Observable, of as observableOf, Subscription} from 'rxjs';
 import {MatDatepickerIntl} from './datepicker-intl';
 import {MatDatepickerControl, MatDatepickerPanel} from './datepicker-base';
 
@@ -132,7 +132,7 @@ export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDe
     this._stateChanges.unsubscribe();
     this._stateChanges = merge(
       this._intl.changes,
-      datepickerStateChanged,
+      datepickerStateChanged as Observable<void>,
       inputStateChanged,
       datepickerToggled
     ).subscribe(() => this._changeDetectorRef.markForCheck());

src/material/menu/menu-trigger.ts

@@ -39,7 +39,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
-import {asapScheduler, merge, of as observableOf, Subscription} from 'rxjs';
+import {asapScheduler, merge, Observable, of as observableOf, Subscription} from 'rxjs';
 import {delay, filter, take, takeUntil} from 'rxjs/operators';
 import {MenuCloseReason, _MatMenuBase} from './menu';
 import {throwMatMenuMissingError, throwMatMenuRecursiveError} from './menu-errors';
@@ -504,7 +504,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       filter(() => this._menuOpen)
     ) : observableOf();
 
-    return merge(backdrop, parentClose, hover, detachments);
+    return merge(backdrop, parentClose as Observable<MenuCloseReason>, hover, detachments);
   }
 
   /** Handles mouse presses on the trigger. */

src/material/menu/menu.ts

@@ -277,8 +277,8 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
     // is internal and we know that it gets completed on destroy.
     this._directDescendantItems.changes.pipe(
       startWith(this._directDescendantItems),
-      switchMap(items => merge<MatMenuItem>(...items.map((item: MatMenuItem) => item._focused)))
-    ).subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem));
+      switchMap(items => merge(...items.map((item: MatMenuItem) => item._focused)))
+    ).subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem as MatMenuItem));
   }
 
   ngOnDestroy() {

src/material/tabs/paginated-tab-header.ts

@@ -180,7 +180,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
   }
 
   ngAfterContentInit() {
-    const dirChange = this._dir ? this._dir.change : observableOf(null);
+    const dirChange = this._dir ? this._dir.change : observableOf('ltr');
     const resize = this._viewportRuler.change(150);
     const realign = () => {
       this.updatePagination();

src/material/tree/data-source/nested-data-source.ts

@@ -26,10 +26,8 @@ export class MatTreeNestedDataSource<T> extends DataSource<T> {
   private readonly _data = new BehaviorSubject<T[]>([]);
 
   connect(collectionViewer: CollectionViewer): Observable<T[]> {
-    return merge(...[collectionViewer.viewChange, this._data])
-      .pipe(map(() => {
-        return this.data;
-      }));
+    return merge(...[collectionViewer.viewChange, this._data] as Observable<unknown>[])
+      .pipe(map(() => this.data));
   }
 
   disconnect() {