refactor: remove deprecated Observable.create usages (#14789)

Replaces the `Observable.create` usages by using the `Observable` constructor directly, because `Observable.create` is being deprecated in the latest RxJS version.

Fixes #14785.

Author: crisbeto

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -70,7 +70,7 @@ export class ItemSizeAverager {
 /** Virtual scrolling strategy for lists with items of unknown or dynamic size. */
 export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   /** @docs-private Implemented as part of VirtualScrollStrategy. */
-  scrolledIndexChange = Observable.create(() => {
+  scrolledIndexChange = new Observable<number>(() => {
     // TODO(mmalerba): Implement.
     throw Error('cdk-virtual-scroll: scrolledIndexChange is currently not supported for the' +
         ' autosize scroll strategy');

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

@@ -146,7 +146,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
    * because this event will fire for every pixel that the user has dragged.
    */
   @Output('cdkDragMoved') moved: Observable<CdkDragMove<T>> =
-      Observable.create((observer: Observer<CdkDragMove<T>>) => {
+      new Observable((observer: Observer<CdkDragMove<T>>) => {
         const subscription = this._dragRef.moved.pipe(map(movedEvent => ({
           source: this,
           pointerPosition: movedEvent.pointerPosition,

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

@@ -249,7 +249,7 @@ export class DragRef<T = any> {
     pointerPosition: {x: number, y: number};
     event: MouseEvent | TouchEvent;
     delta: {x: -1 | 0 | 1, y: -1 | 0 | 1};
-  }> = Observable.create((observer: Observer<any>) => {
+  }> = new Observable((observer: Observer<any>) => {
     const subscription = this._moveEvents.subscribe(observer);
     this._moveEventSubscriptions++;
 

src/cdk/observers/observe-content.ts

@@ -65,7 +65,7 @@ export class ContentObserver implements OnDestroy {
   observe(elementOrRef: Element | ElementRef<Element>): Observable<MutationRecord[]> {
     const element = coerceElement(elementOrRef);
 
-    return Observable.create((observer: Observer<MutationRecord[]>) => {
+    return new Observable((observer: Observer<MutationRecord[]>) => {
       const stream = this._observeElement(element);
       const subscription = stream.subscribe(observer);
 

src/cdk/overlay/overlay-ref.ts

@@ -43,7 +43,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
   private _previousHostParent: HTMLElement;
 
   private _keydownEventsObservable: Observable<KeyboardEvent> =
-      Observable.create((observer: Observer<KeyboardEvent>) => {
+      new Observable((observer: Observer<KeyboardEvent>) => {
         const subscription = this._keydownEvents.subscribe(observer);
         this._keydownEventSubscriptions++;
 

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

@@ -123,7 +123,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
   /** Observable sequence of position changes. */
   positionChanges: Observable<ConnectedOverlayPositionChange> =
-      Observable.create((observer: Observer<ConnectedOverlayPositionChange>) => {
+      new Observable((observer: Observer<ConnectedOverlayPositionChange>) => {
         const subscription = this._positionChanges.subscribe(observer);
         this._positionChangeSubscriptions++;
 

src/cdk/scrolling/scroll-dispatcher.ts

@@ -86,7 +86,7 @@ export class ScrollDispatcher implements OnDestroy {
       return observableOf<void>();
     }
 
-    return Observable.create((observer: Observer<CdkScrollable|void>) => {
+    return new Observable((observer: Observer<CdkScrollable|void>) => {
       if (!this._globalSubscription) {
         this._addGlobalListener();
       }

src/cdk/scrolling/scrollable.ts

@@ -47,7 +47,7 @@ export type ExtendedScrollToOptions = _XAxis & _YAxis & ScrollOptions;
 export class CdkScrollable implements OnInit, OnDestroy {
   private _destroyed = new Subject();
 
-  private _elementScrolled: Observable<Event> = Observable.create((observer: Observer<Event>) =>
+  private _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
       this.ngZone.runOutsideAngular(() =>
           fromEvent(this.elementRef.nativeElement, 'scroll').pipe(takeUntil(this._destroyed))
               .subscribe(observer)));

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

@@ -71,7 +71,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
   // performance.
   /** Emits when the index of the first element visible in the viewport changes. */
   @Output() scrolledIndexChange: Observable<number> =
-      Observable.create((observer: Observer<number>) =>
+      new Observable((observer: Observer<number>) =>
         this._scrollStrategy.scrolledIndexChange.subscribe(index =>
             Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
 

src/lib/tabs/tab-group.spec.ts

@@ -777,7 +777,7 @@ class AsyncTabsTestApp implements OnInit {
 
   ngOnInit() {
     // Use ngOnInit because there is some issue with scheduling the async task in the constructor.
-    this.tabs = Observable.create((observer: any) => {
+    this.tabs = new Observable((observer: any) => {
       setTimeout(() => observer.next(this._tabs));
     });
   }

src/material-examples/tab-group-async/tab-group-async-example.ts

@@ -18,7 +18,7 @@ export class TabGroupAsyncExample {
   asyncTabs: Observable<ExampleTab[]>;
 
   constructor() {
-    this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
+    this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
       setTimeout(() => {
         observer.next([
           {label: 'First', content: 'Content 1'},