refactor: replace asObservable usages (#20165)

As discussed, replaces usages of the `asObservable` with a cast to `Observable` since the method is a little pointless, because people can easily get around it if they really want to.

Also cleans up a few getters that were returning observables.

Author: crisbeto

src/cdk-experimental/column-resize/column-resize-notifier.ts

@@ -56,7 +56,7 @@ export class ColumnResizeNotifierSource {
 @Injectable()
 export class ColumnResizeNotifier {
   /** Emits whenever a column is resized. */
-  readonly resizeCompleted: Observable<ColumnSize> = this._source.resizeCompleted.asObservable();
+  readonly resizeCompleted: Observable<ColumnSize> = this._source.resizeCompleted;
 
   constructor(private readonly _source: ColumnResizeNotifierSource) {}
 

src/cdk-experimental/dialog/dialog-ref.ts

@@ -133,12 +133,12 @@ export class DialogRef<T, R = any> {
 
   /** Gets an observable that emits when dialog begins opening. */
   beforeOpened(): Observable<void> {
-    return this._containerInstance._beforeEnter.asObservable();
+    return this._containerInstance._beforeEnter;
   }
 
   /** Gets an observable that emits when dialog is finished opening. */
   afterOpened(): Observable<void> {
-    return this._containerInstance._afterEnter.asObservable();
+    return this._containerInstance._afterEnter;
   }
 
   /** Gets an observable that emits when dialog begins closing. */

src/cdk-experimental/popover-edit/edit-ref.ts

@@ -21,11 +21,11 @@ import {EditEventDispatcher} from './edit-event-dispatcher';
 export class EditRef<FormValue> implements OnDestroy {
   /** Emits the final value of this edit instance before closing. */
   private readonly _finalValueSubject = new Subject<FormValue>();
-  readonly finalValue: Observable<FormValue> = this._finalValueSubject.asObservable();
+  readonly finalValue: Observable<FormValue> = this._finalValueSubject;
 
   /** Emits when the user tabs out of this edit lens before closing. */
   private readonly _blurredSubject = new Subject<void>();
-  readonly blurred: Observable<void> = this._blurredSubject.asObservable();
+  readonly blurred: Observable<void> = this._blurredSubject;
 
   /** The value to set the form back to on revert. */
   private _revertFormValue: FormValue;

src/cdk-experimental/popover-edit/focus-escape-notifier.ts

@@ -46,7 +46,7 @@ export class FocusEscapeNotifier extends FocusTrap {
   }
 
   escapes(): Observable<FocusEscapeNotifierDirection> {
-    return this._escapeSubject.asObservable();
+    return this._escapeSubject;
   }
 }
 

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -253,7 +253,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect() {
-    return this.data.asObservable();
+    return this.data;
   }
 
   disconnect() {}

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -247,7 +247,7 @@ export class FocusMonitor implements OnDestroy {
         cachedInfo.checkChildren = true;
       }
 
-      return cachedInfo.subject.asObservable();
+      return cachedInfo.subject;
     }
 
     // Create monitored element info.
@@ -259,7 +259,7 @@ export class FocusMonitor implements OnDestroy {
     this._elementInfo.set(nativeElement, info);
     this._registerGlobalListeners(info);
 
-    return info.subject.asObservable();
+    return info.subject;
   }
 
   /**

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -341,7 +341,7 @@ export class FocusTrap {
     if (this._ngZone.isStable) {
       fn();
     } else {
-      this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(fn);
+      this._ngZone.onStable.pipe(take(1)).subscribe(fn);
     }
   }
 }

src/cdk/drag-drop/directives/drag.spec.ts

@@ -2407,7 +2407,7 @@ describe('CdkDrag', () => {
       const itemInstance = fixture.componentInstance.dragItems.toArray()[1];
       const item = itemInstance.element.nativeElement;
       const spy = jasmine.createSpy('dropped spy');
-      const subscription = itemInstance.dropped.asObservable().subscribe(spy);
+      const subscription = itemInstance.dropped.subscribe(spy);
 
       // Do an initial drag and drop sequence.
       dragElementViaMouse(fixture, item, 50, 50);

src/cdk/drag-drop/directives/drag.ts

@@ -251,7 +251,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     // element to be in the proper place in the DOM. This is mostly relevant
     // for draggable elements inside portals since they get stamped out in
     // their original DOM position and then they get transferred to the portal.
-    this._ngZone.onStable.asObservable()
+    this._ngZone.onStable
       .pipe(take(1), takeUntil(this._destroyed))
       .subscribe(() => {
         this._updateRootElement();

src/cdk/drag-drop/drag-ref.ts

@@ -292,7 +292,7 @@ export class DragRef<T = any> {
     event: MouseEvent | TouchEvent;
     distance: Point;
     delta: {x: -1 | 0 | 1, y: -1 | 0 | 1};
-  }> = this._moveEvents.asObservable();
+  }> = this._moveEvents;
 
   /** Arbitrary data that can be attached to the drag item. */
   data: T;

src/cdk/overlay/overlay-directives.spec.ts

@@ -39,7 +39,7 @@ describe('Overlay directives', () => {
       declarations: [ConnectedOverlayDirectiveTest, ConnectedOverlayPropertyInitOrder],
       providers: [{provide: Directionality, useFactory: () => dir = {value: 'ltr'}},
         {provide: ScrollDispatcher, useFactory: () => ({
-          scrolled: () => scrolledSubject.asObservable()
+          scrolled: () => scrolledSubject
         })}
       ],
     });

src/cdk/overlay/overlay-ref.ts

@@ -127,7 +127,6 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     // before attempting to position it, as the position may depend on the size of the rendered
     // content.
     this._ngZone.onStable
-      .asObservable()
       .pipe(take(1))
       .subscribe(() => {
         // The overlay could've been detached before the zone has stabilized.
@@ -258,27 +257,27 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
 
   /** Gets an observable that emits when the backdrop has been clicked. */
   backdropClick(): Observable<MouseEvent> {
-    return this._backdropClick.asObservable();
+    return this._backdropClick;
   }
 
   /** Gets an observable that emits when the overlay has been attached. */
   attachments(): Observable<void> {
-    return this._attachments.asObservable();
+    return this._attachments;
   }
 
   /** Gets an observable that emits when the overlay has been detached. */
   detachments(): Observable<void> {
-    return this._detachments.asObservable();
+    return this._detachments;
   }
 
   /** Gets an observable of keydown events targeted to this overlay. */
   keydownEvents(): Observable<KeyboardEvent> {
-    return this._keydownEvents.asObservable();
+    return this._keydownEvents;
   }
 
   /** Gets an observable of pointer events targeted outside this overlay. */
   outsidePointerEvents(): Observable<MouseEvent> {
-    return this._outsidePointerEvents.asObservable();
+    return this._outsidePointerEvents;
   }
 
   /** Gets the current overlay configuration, which is immutable. */
@@ -510,7 +509,6 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
       // might still be animating. This stream helps us avoid interrupting the animation
       // by waiting for the pane to become empty.
       const subscription = this._ngZone.onStable
-        .asObservable()
         .pipe(takeUntil(merge(this._attachments, this._detachments)))
         .subscribe(() => {
           // Needs a couple of checks for the pane and host, because

src/cdk/overlay/position/connected-position-strategy.ts

@@ -49,9 +49,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   _preferredPositions: ConnectionPositionPair[] = [];
 
   /** Emits an event when the connection point changes. */
-  get onPositionChange(): Observable<ConnectedOverlayPositionChange> {
-    return this._positionStrategy.positionChanges;
-  }
+  readonly onPositionChange: Observable<ConnectedOverlayPositionChange>;
 
   constructor(
       originPos: OriginConnectionPosition, overlayPos: OverlayConnectionPosition,
@@ -68,6 +66,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
                                  .withViewportMargin(0);
 
     this.withFallbackPosition(originPos, overlayPos);
+    this.onPositionChange = this._positionStrategy.positionChanges;
   }
 
   /** Ordered list of preferred positions, from most to least desirable. */

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -128,8 +128,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _previousPushAmount: {x: number, y: number} | null;
 
   /** Observable sequence of position changes. */
-  positionChanges: Observable<ConnectedOverlayPositionChange> =
-      this._positionChanges.asObservable();
+  positionChanges: Observable<ConnectedOverlayPositionChange> = this._positionChanges;
 
   /** Ordered list of preferred positions, from most to least desirable. */
   get positions(): ConnectionPositionPair[] {

src/cdk/overlay/scroll/close-scroll-strategy.spec.ts

@@ -25,7 +25,7 @@ describe('CloseScrollStrategy', () => {
       imports: [OverlayModule, PortalModule, OverlayTestModule],
       providers: [
         {provide: ScrollDispatcher, useFactory: () => ({
-          scrolled: () => scrolledSubject.asObservable()
+          scrolled: () => scrolledSubject
         })},
         {provide: ViewportRuler, useFactory: () => ({
           getViewportScrollPosition: () => ({top: scrollPosition})

src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts

@@ -23,7 +23,7 @@ describe('RepositionScrollStrategy', () => {
       imports: [OverlayModule, PortalModule, OverlayTestModule],
       providers: [
         {provide: ScrollDispatcher, useFactory: () => ({
-          scrolled: () => scrolledSubject.asObservable()
+          scrolled: () => scrolledSubject
         })}
       ]
     });

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -103,7 +103,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
   @ViewChild('contentWrapper', {static: true}) _contentWrapper: ElementRef<HTMLElement>;
 
   /** A stream that emits whenever the rendered range changes. */
-  renderedRangeStream: Observable<ListRange> = this._renderedRangeSubject.asObservable();
+  renderedRangeStream: Observable<ListRange> = this._renderedRangeSubject;
 
   /**
    * The total size of all content (in pixels), including content that is not currently rendered.

src/cdk/testing/testbed/task-state-zone-interceptor.ts

@@ -35,7 +35,7 @@ export class TaskStateZoneInterceptor {
       this._lastState ? this._getTaskStateFromInternalZoneState(this._lastState) : {stable: true});
 
   /** Public observable that emits whenever the task state changes. */
-  readonly state: Observable<TaskState> = this._stateSubject.asObservable();
+  readonly state: Observable<TaskState> = this._stateSubject;
 
   constructor(private _lastState: HasTaskState|null) {}
 

src/cdk/text-field/autofill.ts

@@ -75,7 +75,7 @@ export class AutofillMonitor implements OnDestroy {
     const info = this._monitoredElements.get(element);
 
     if (info) {
-      return info.subject.asObservable();
+      return info.subject;
     }
 
     const result = new Subject<AutofillEvent>();
@@ -107,7 +107,7 @@ export class AutofillMonitor implements OnDestroy {
       }
     });
 
-    return result.asObservable();
+    return result;
   }
 
   /**

src/material-experimental/column-resize/column-resize.spec.ts

@@ -300,7 +300,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect() {
-    return this.data.asObservable();
+    return this.data;
   }
 
   disconnect() {}

src/material-experimental/mdc-chips/chip-option.ts

@@ -197,7 +197,6 @@ export class MatChipOption extends MatChip implements AfterContentInit {
     // that moves focus not the next item. To work around the issue, we defer marking the chip
     // as not focused until the next time the zone stabilizes.
     this._ngZone.onStable
-      .asObservable()
       .pipe(take(1))
       .subscribe(() => {
         this._ngZone.run(() => {

src/material-experimental/mdc-form-field/form-field.ts

@@ -481,7 +481,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     // Note that we have to run outside of the `NgZone` explicitly, in order to avoid
     // throwing users into an infinite loop if `zone-patch-rxjs` is included.
     this._ngZone.runOutsideAngular(() => {
-      this._ngZone.onStable.asObservable().pipe(takeUntil(this._destroyed)).subscribe(() => {
+      this._ngZone.onStable.pipe(takeUntil(this._destroyed)).subscribe(() => {
         if (this._needsOutlineLabelOffsetUpdateOnStable) {
           this._needsOutlineLabelOffsetUpdateOnStable = false;
           this._updateOutlineLabelOffset();

src/material-experimental/mdc-snack-bar/snack-bar-container.ts

@@ -147,7 +147,7 @@ export class MatSnackBarContainer extends BasePortalOutlet
   exit(): Observable<void> {
     this._exiting = true;
     this._mdcFoundation.close();
-    return this._onExit.asObservable();
+    return this._onExit;
   }
 
   /** Attach a component portal as content to this snack bar container. */

src/material-experimental/mdc-tabs/tab-header.spec.ts

@@ -44,7 +44,7 @@ describe('MDC-based MatTabHeader', () => {
       ],
       providers: [
         ViewportRuler,
-        {provide: Directionality, useFactory: () => ({value: dir, change: change.asObservable()})},
+        {provide: Directionality, useFactory: () => ({value: dir, change: change})},
       ]
     });
 

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -31,7 +31,7 @@ describe('MDC-based MatTabNavBar', () => {
       providers: [
         {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useFactory: () => globalRippleOptions},
         {provide: Directionality, useFactory: () =>
-            ({value: dir, change: dirChange.asObservable()})},
+            ({value: dir, change: dirChange})},
       ]
     });
 

src/material-experimental/popover-edit/popover-edit.spec.ts

@@ -174,7 +174,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect() {
-    return this.data.asObservable();
+    return this.data;
   }
 
   disconnect() {}

src/material/autocomplete/autocomplete-trigger.ts

@@ -322,7 +322,6 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
     // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
     // Return a stream that we'll replace with the real one once everything is in place.
     return this._zone.onStable
-        .asObservable()
         .pipe(take(1), switchMap(() => this.optionSelections));
   }) as Observable<MatOptionSelectionChange>;
 
@@ -472,7 +471,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
    * stream every time the option list changes.
    */
   private _subscribeToClosingActions(): Subscription {
-    const firstStable = this._zone.onStable.asObservable().pipe(take(1));
+    const firstStable = this._zone.onStable.pipe(take(1));
     const optionChanges = this.autocomplete.options.changes.pipe(
       tap(() => this._positionStrategy.reapplyLastPosition()),
       // Defer emitting to the stream until the next tick, because changing

src/material/autocomplete/autocomplete.spec.ts

@@ -1559,7 +1559,7 @@ describe('MatAutocomplete', () => {
       let spacer = document.createElement('div');
       let fixture = createComponent(SimpleAutocomplete, [{
         provide: ScrollDispatcher,
-        useValue: {scrolled: () => scrolledSubject.asObservable()}
+        useValue: {scrolled: () => scrolledSubject}
       }]);
 
       fixture.detectChanges();
@@ -2242,7 +2242,7 @@ describe('MatAutocomplete', () => {
       const fixture = createComponent(SimpleAutocomplete, [
         {
           provide: ScrollDispatcher,
-          useValue: {scrolled: () => scrolledSubject.asObservable()}
+          useValue: {scrolled: () => scrolledSubject}
         },
         {
           provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,

src/material/bottom-sheet/bottom-sheet-ref.ts

@@ -115,12 +115,12 @@ export class MatBottomSheetRef<T = any, R = any> {
 
   /** Gets an observable that is notified when the bottom sheet is finished closing. */
   afterDismissed(): Observable<R | undefined> {
-    return this._afterDismissed.asObservable();
+    return this._afterDismissed;
   }
 
   /** Gets an observable that is notified when the bottom sheet has opened and appeared. */
   afterOpened(): Observable<void> {
-    return this._afterOpened.asObservable();
+    return this._afterOpened;
   }
 
   /**

src/material/chips/chip.ts

@@ -424,7 +424,6 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
     // that moves focus not the next item. To work around the issue, we defer marking the chip
     // as not focused until the next time the zone stabilizes.
     this._ngZone.onStable
-      .asObservable()
       .pipe(take(1))
       .subscribe(() => {
         this._ngZone.run(() => {

src/material/core/datetime/date-adapter.ts

@@ -32,10 +32,10 @@ export const MAT_DATE_LOCALE_PROVIDER = {provide: MAT_DATE_LOCALE, useExisting:
 export abstract class DateAdapter<D> {
   /** The locale to use for all dates. */
   protected locale: any;
+  protected _localeChanges = new Subject<void>();
 
   /** A stream that emits when the locale changes. */
-  get localeChanges(): Observable<void> { return this._localeChanges; }
-  protected _localeChanges = new Subject<void>();
+  readonly localeChanges: Observable<void> = this._localeChanges;
 
   /**
    * Gets the year component of the given date.

src/material/datepicker/calendar-body.ts

@@ -193,7 +193,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
   /** Focuses the active cell after the microtask queue is empty. */
   _focusActiveCell(movePreview = true) {
     this._ngZone.runOutsideAngular(() => {
-      this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
+      this._ngZone.onStable.pipe(take(1)).subscribe(() => {
         const activeCell: HTMLElement | null =
             this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');