#53: fix Error thrown when using *ngIf on the mat select search component

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.3.1
+* Bugfix: Error thrown when used together with `*ngIf` [#53](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/53)
+
+  Thanks to @rhyre for reporting
+
 ## 1.3.0
 * Enhancement: allow customization of the clear icon [#41](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/41)
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-mat-select-search",
   "description": "Library that provides an angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/app.component.html

@@ -48,7 +48,7 @@ <h3>Single selection with custom clear icon</h3>
   <p>
     <mat-form-field>
       <mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
-        <ngx-mat-select-search [formControl]="bankFilterCtrl">
+        <ngx-mat-select-search *ngIf="true" [formControl]="bankFilterCtrl">
           <mat-icon ngxMatSelectSearchClear>delete</mat-icon>
         </ngx-mat-select-search>
         <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">

src/app/app.component.spec.ts

@@ -26,6 +26,7 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));

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

@@ -233,10 +233,16 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
     this.setOverlayClass();
 
     // update view when available options change
-    this.matSelect.options.changes
-      .pipe(takeUntil(this._onDestroy))
-      .subscribe(() => {
-        this.changeDetectorRef.markForCheck();
+    this.matSelect.openedChange
+      .pipe(
+        take(1),
+        takeUntil(this._onDestroy)
+      ).subscribe(() => {
+        this.matSelect.options.changes
+          .pipe(takeUntil(this._onDestroy))
+          .subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+          });
       });
   }