update to angular 14.0.0-rc.1

package.json

@@ -12,34 +12,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.0.0-next.1",
-    "@angular/cdk": "^14.0.0-next.1",
-    "@angular/common": "14.0.0-next.1",
-    "@angular/compiler": "14.0.0-next.1",
-    "@angular/core": "14.0.0-next.1",
-    "@angular/forms": "14.0.0-next.1",
-    "@angular/material": "^14.0.0-next.1",
-    "@angular/platform-browser": "14.0.0-next.1",
-    "@angular/platform-browser-dynamic": "14.0.0-next.1",
-    "@angular/router": "14.0.0-next.1",
+    "@angular/animations": "14.0.0-rc.2",
+    "@angular/cdk": "^14.0.0-rc.1",
+    "@angular/common": "14.0.0-rc.2",
+    "@angular/compiler": "14.0.0-rc.2",
+    "@angular/core": "14.0.0-rc.2",
+    "@angular/forms": "14.0.0-rc.2",
+    "@angular/material": "^14.0.0-rc.1",
+    "@angular/platform-browser": "14.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "14.0.0-rc.2",
+    "@angular/router": "14.0.0-rc.2",
     "core-js": "^2.6.1",
     "ngx-mat-select-search": "^4.1.1",
     "rxjs": "6.5.4",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.0.0-next.0",
+    "@angular-devkit/build-angular": "~14.0.0-rc.2",
     "@angular/cli": "^14.0.0-next.0",
-    "@angular/compiler-cli": "14.0.0-next.1",
-    "@angular/language-service": "14.0.0-next.1",
+    "@angular/compiler-cli": "14.0.0-rc.2",
+    "@angular/language-service": "14.0.0-rc.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.6",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
-    "typescript": "4.4.4"
+    "typescript": "4.7.2"
   }
-}
+}

src/app/examples/01-single-selection-example/single-selection-example.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatSelect } from '@angular/material/select';
 import { ReplaySubject, Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
@@ -18,10 +18,10 @@ export class SingleSelectionExampleComponent implements OnInit, AfterViewInit, O
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank */
-  public bankCtrl: FormControl = new FormControl();
+  public bankCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for the MatSelect filter keyword */
-  public bankFilterCtrl: FormControl = new FormControl();
+  public bankFilterCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** list of banks filtered by search keyword */
   public filteredBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);

src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ReplaySubject, Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { MatSelect } from '@angular/material/select';
@@ -17,10 +17,10 @@ export class MultipleSelectionExampleComponent implements OnInit, AfterViewInit,
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank for multi-selection */
-  public bankMultiCtrl: FormControl = new FormControl();
+  public bankMultiCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for the MatSelect filter keyword multi-selection */
-  public bankMultiFilterCtrl: FormControl = new FormControl();
+  public bankMultiFilterCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** list of banks filtered by search keyword */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);

src/app/examples/04-option-groups-example/option-groups-example.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ReplaySubject, Subject } from 'rxjs';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 
 import { BankGroup, BANKGROUPS } from '../demo-data';
@@ -17,10 +17,10 @@ export class OptionGroupsExampleComponent implements OnInit, OnDestroy {
   protected bankGroups: BankGroup[] = BANKGROUPS;
 
   /** control for the selected bank for option groups */
-  public bankGroupsCtrl: FormControl = new FormControl();
+  public bankGroupsCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for the MatSelect filter keyword for option groups */
-  public bankGroupsFilterCtrl: FormControl = new FormControl();
+  public bankGroupsFilterCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** list of bank groups filtered by search keyword for option groups */
   public filteredBankGroups: ReplaySubject<BankGroup[]> = new ReplaySubject<BankGroup[]>(1);

src/app/examples/05-server-side-search-example/server-side-search-example.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ReplaySubject, Subject } from 'rxjs';
 import {debounceTime, delay, tap, filter, map, takeUntil} from 'rxjs/operators';
 
@@ -17,10 +17,10 @@ export class ServerSideSearchExampleComponent implements OnInit, OnDestroy {
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank for server side filtering */
-  public bankServerSideCtrl: FormControl = new FormControl();
+  public bankServerSideCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for filter for server side. */
-  public bankServerSideFilteringCtrl: FormControl = new FormControl();
+  public bankServerSideFilteringCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** indicate search operation is in progress */
   public searching = false;

src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ReplaySubject, Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { MatSelect } from '@angular/material/select';
@@ -20,10 +20,10 @@ export class MultipleSelectionSelectAllExampleComponent implements OnInit, After
   public allBanksSize = BANKS.length;
 
   /** control for the selected bank for multi-selection */
-  public bankMultiCtrl: FormControl = new FormControl();
+  public bankMultiCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for the MatSelect filter keyword multi-selection */
-  public bankMultiFilterCtrl: FormControl = new FormControl();
+  public bankMultiFilterCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** list of banks filtered by search keyword */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);

src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ReplaySubject, Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { MatSelect } from '@angular/material/select';
@@ -17,10 +17,10 @@ export class TooltipSelectAllExampleComponent implements OnInit, AfterViewInit,
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank for multi-selection */
-  public bankMultiCtrl: FormControl = new FormControl();
+  public bankMultiCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for the MatSelect filter keyword multi-selection */
-  public bankMultiFilterCtrl: FormControl = new FormControl();
+  public bankMultiFilterCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** list of banks filtered by search keyword */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);

src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { combineLatest, merge, Observable, Subject } from 'rxjs';
 import { map, mapTo, scan, startWith, takeUntil } from 'rxjs/operators';
 import { MatSelect } from '@angular/material/select';
@@ -25,10 +25,10 @@ export class InfiniteScrollExampleComponent implements OnInit, OnDestroy {
   }));
 
   /** control for the selected bank */
-  bankCtrl: FormControl = new FormControl();
+  bankCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** control for the search input value */
-  searchCtrl: FormControl = new FormControl();
+  searchCtrl: UntypedFormControl = new UntypedFormControl();
 
   /** list of data corresponding to the search input */
   private filteredData$: Observable<Bank[]> = this.searchCtrl.valueChanges.pipe(