From 91672f0ef8bc5a04dfa6a420f00ce6792e80b2b3 Mon Sep 17 00:00:00 2001
From: Esteban Marin <esteban.marin@bithost.ch>
Date: Thu, 30 Aug 2018 18:07:22 +0200
Subject: [PATCH] #53: fix Error thrown when using *ngIf on the mat select
 search component, set version to 1.3.1

---
 CHANGELOG.md                                       |  5 +++++
 package-lock.json                                  |  2 +-
 package.json                                       |  2 +-
 src/app/app.component.html                         |  2 +-
 src/app/app.component.spec.ts                      |  1 +
 .../mat-select-search.component.ts                 | 14 ++++++++++----
 6 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e45fffb..8675d2d 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/package-lock.json b/package-lock.json
index 451dced..84aa828 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-select-search",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 584b294..e468103 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a301fb1..efe6abd 100755
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 015e7d3..c666542 100644
--- a/src/app/app.component.spec.ts
+++ b/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();
   }));
diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts
index 1196913..db8f243 100755
--- a/src/app/mat-select-search/mat-select-search.component.ts
+++ b/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();
+          });
       });
   }