Set strictNullChecks to true and fix all errors (#475)

Co-authored-by: Esteban Gehring <esteban.gehring@bithost.ch>

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

@@ -18,10 +18,10 @@ export class SingleSelectionExampleComponent implements OnInit, AfterViewInit, O
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank */
-  public bankCtrl: FormControl<Bank> = new FormControl<Bank>(null);
+  public bankCtrl: FormControl<Bank | null> = new FormControl<Bank | null>(null);
 
   /** control for the MatSelect filter keyword */
-  public bankFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** 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

@@ -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<Bank[]> = new FormControl<Bank[]>([]);
+  public bankMultiCtrl: FormControl<Bank[]> = new FormControl<Bank[]>([], {nonNullable: true});
 
   /** control for the MatSelect filter keyword multi-selection */
-  public bankMultiFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankMultiFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** 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

@@ -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<Bank> = new FormControl<Bank>(null);
+  public bankGroupsCtrl: FormControl<Bank | null> = new FormControl<Bank | null>(null);
 
   /** control for the MatSelect filter keyword for option groups */
-  public bankGroupsFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankGroupsFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** list of bank groups filtered by search keyword for option groups */
   public filteredBankGroups: ReplaySubject<BankGroup[]> = new ReplaySubject<BankGroup[]>(1);
@@ -75,7 +75,7 @@ export class OptionGroupsExampleComponent implements OnInit, OnDestroy {
   }
 
   protected copyBankGroups(bankGroups: BankGroup[]) {
-    const bankGroupsCopy = [];
+    const bankGroupsCopy: BankGroup[] = [];
     bankGroups.forEach(bankGroup => {
       bankGroupsCopy.push({
         name: bankGroup.name,

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

@@ -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<Bank> = new FormControl<Bank>(null);
+  public bankServerSideCtrl: FormControl<Bank | null> = new FormControl<Bank | null>(null);
 
   /** control for filter for server side. */
-  public bankServerSideFilteringCtrl: FormControl<string> = new FormControl<string>('');
+  public bankServerSideFilteringCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** 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

@@ -17,10 +17,10 @@ export class MultipleSelectionSelectAllExampleComponent implements OnInit, After
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank for multi-selection */
-  public bankMultiCtrl: FormControl<Bank[]> = new FormControl<Bank[]>([]);
+  public bankMultiCtrl: FormControl<Bank[]> = new FormControl<Bank[]>([], {nonNullable: true});
 
   /** control for the MatSelect filter keyword multi-selection */
-  public bankMultiFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankMultiFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** 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

@@ -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<Bank[]> = new FormControl<Bank[]>([]);
+  public bankMultiCtrl: FormControl<Bank[]> = new FormControl<Bank[]>([], {nonNullable: true});
 
   /** control for the MatSelect filter keyword multi-selection */
-  public bankMultiFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankMultiFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** 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

@@ -25,10 +25,10 @@ export class InfiniteScrollExampleComponent implements OnInit, OnDestroy {
   }));
 
   /** control for the selected bank id */
-  public bankCtrl: FormControl<string> = new FormControl<string>(null);
+  public bankCtrl: FormControl<string | null> = new FormControl<string | null>(null);
 
   /** control for the MatSelect filter keyword */
-  public bankFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** list of data corresponding to the search input */
   private filteredData$: Observable<Bank[]> = this.bankFilterCtrl.valueChanges.pipe(

src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.ts

@@ -16,10 +16,10 @@ export class CustomNoEntriesFoundExampleComponent implements OnInit, AfterViewIn
   protected banks: Bank[] = BANKS;
 
   /** control for the selected bank */
-  public bankCtrl: FormControl<Bank> = new FormControl<Bank>(null);
+  public bankCtrl: FormControl<Bank | null> = new FormControl<Bank | null>(null);
 
   /** control for the MatSelect filter keyword */
-  public bankFilterCtrl: FormControl<string> = new FormControl<string>('');
+  public bankFilterCtrl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** list of banks filtered by search keyword */
   public filteredBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);

src/app/mat-select-search/mat-select-search.component.spec.ts

@@ -125,8 +125,8 @@ export class MatSelectSearchTestComponent implements OnInit, OnDestroy, AfterVie
   /** list of banks filtered by search keyword for multi-selection */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
 
-  public initialSingleSelection: Bank = null;
-  public initialSingleSelectionMatOption: Bank = null;
+  public initialSingleSelection: Bank;
+  public initialSingleSelectionMatOption: Bank;
   public initialMultiSelection: Bank[] = [];
 
 

src/app/mat-select-search/mat-select-search.component.ts

@@ -213,7 +213,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
   get value(): string {
     return this._formControl.value;
   }
-  private _lastExternalInputValue: string;
+  private _lastExternalInputValue?: string;
 
   onTouched: Function = (_: any) => { };
 
@@ -224,9 +224,9 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
   public get _options(): QueryList<MatOption> {
     return this._options$.getValue();
   }
-  public _options$: BehaviorSubject<QueryList<MatOption>> = new BehaviorSubject<QueryList<MatOption>>(null);
+  public _options$: BehaviorSubject<QueryList<MatOption>> = new BehaviorSubject<QueryList<MatOption>>(null as any);
 
-  private optionsList$: Observable<MatOption[]> = this._options$.pipe(
+  private optionsList$: Observable<MatOption[] | null> = this._options$.pipe(
     switchMap(_options => _options ?
       _options.changes.pipe(
         map(options => options.toArray()),
@@ -242,15 +242,15 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
   /** Previously selected values when using <mat-select [multiple]="true">*/
   private previousSelectedValues: any[];
 
-  public _formControl: FormControl<string> = new FormControl<string>('');
+  public _formControl: FormControl<string> = new FormControl<string>('', {nonNullable: true});
 
   /** whether to show the no entries found message */
   public _showNoEntriesFound$: Observable<boolean> = combineLatest([
     this._formControl.valueChanges,
     this.optionsLength$
   ]).pipe(
-    map(([value, optionsLength]) => this.noEntriesFoundLabel && value
-      && optionsLength === this.getOptionsLengthOffset())
+    map(([value, optionsLength]) => !!(this.noEntriesFoundLabel && value
+      && optionsLength === this.getOptionsLengthOffset()))
   );
 
   /** Subject that emits when the component has been destroyed. */
@@ -262,14 +262,14 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
   constructor(@Inject(MatSelect) public matSelect: MatSelect,
     public changeDetectorRef: ChangeDetectorRef,
     private _viewportRuler: ViewportRuler,
-    @Optional() @Inject(MatOption) public matOption: MatOption = null,
-    @Optional() @Inject(MatFormField) public matFormField: MatFormField = null,
+    @Optional() @Inject(MatOption) public matOption: MatOption,
+    @Optional() @Inject(MatFormField) public matFormField: MatFormField,
     @Optional() @Inject(MAT_SELECTSEARCH_DEFAULT_OPTIONS) defaultOptions?: MatSelectSearchOptions
   ) {
     this.applyDefaultOptions(defaultOptions);
   }
 
-  private applyDefaultOptions(defaultOptions: MatSelectSearchOptions) {
+  private applyDefaultOptions(defaultOptions?: MatSelectSearchOptions) {
     if (!defaultOptions) {
       return;
     }
@@ -355,7 +355,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
                 // Indiciates we should set it as active and scroll to the top.
                 if (firstOptionIsChanged
                   || !keyManager.activeItem
-                  || !options.find(option => this.matSelect.compareWith(option.value, keyManager.activeItem.value))) {
+                  || !options.find(option => this.matSelect.compareWith(option.value, keyManager.activeItem?.value))) {
                   keyManager.setActiveItem(this.getOptionsLengthOffset());
                 }
 
@@ -537,6 +537,10 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
     // because the option is not available while we are currently filtering
     this.previousSelectedValues = this.matSelect.ngControl.value;
 
+    if (!this.matSelect.ngControl.valueChanges) {
+      return;
+    }
+
     this.matSelect.ngControl.valueChanges
       .pipe(takeUntil(this._onDestroy))
       .subscribe((values) => {
@@ -575,9 +579,10 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
     if (!this.innerSelectSearch || !this.innerSelectSearch.nativeElement) {
       return;
     }
-    let element: HTMLElement = this.innerSelectSearch.nativeElement;
-    let panelElement: HTMLElement;
-    while (element = element.parentElement) {
+    let element: HTMLElement | null = this.innerSelectSearch.nativeElement;
+    let panelElement: HTMLElement | null = null;
+    while (element && element.parentElement) {
+      element = element.parentElement;
       if (element.classList.contains('mat-select-panel')) {
         panelElement = element;
         break;

tsconfig.json

@@ -8,6 +8,7 @@
     "declaration": false,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"