fix: infinity scrolling not working correctly when selecting a value not available in the initial batch (#255)

* fix: infinity scrolling not working correctly when selecting a value not available in the initial batch

#253

* fixup! fix: infinity scrolling not working correctly when selecting a value not available in the initial batch

* fixup! fix: infinity scrolling not working correctly when selecting a value not available in the initial batch

Author: macjohnny

package-lock.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.27",
-    "@angular-extensions/lint-rules": "^1.1.1",
+    "@angular-extensions/lint-rules": "^1.2.0",
     "@angular/animations": "^8.2.14",
     "@angular/cdk": "^8.2.3",
     "@angular/cli": "^8.3.27",

package.json

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin-bottom: 200px;
+}

src/app/app.component.css

@@ -6,7 +6,8 @@ import { MatSelectSearchVersion } from './mat-select-search/ngx-mat-select-searc
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html'
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss']
 })
 export class AppComponent {
 

src/app/app.component.scss

@@ -1,25 +1,28 @@
-<h3>Integration with <a href="https://github.com/orizens/ngx-infinite-scroll" target="_blank">ngx-infinite-scroll</a></h3>
+<h3>Integration with <a href="https://github.com/HaidarZ/ng-mat-select-infinite-scroll" target="_blank">ng-mat-select-infinite-scroll</a>
+</h3>
 
 <p>
-  Selected Bank: {{ctrl?.value}}
+  Selected Bank: {{bankCtrl?.value}}
 </p>
 
 <mat-form-field>
-  <mat-select #matSelectInfiniteScroll msInfiniteScroll (infiniteScroll)="getNextBatch()"
-    [formControl]="ctrl"
-    placeholder="Select Something"
-    (valueChange)="onChange($event)">
-      <mat-option>
-        <!--disableScrollToActiveOnOptionsChanged should be set to true-->
-          <ngx-mat-select-search
-              [formControl]="searchCtrl"
-              placeholderLabel="search"
-              [disableScrollToActiveOnOptionsChanged]="true"
-              noEntriesFoundLabel="No entry matches">
-          </ngx-mat-select-search>
-      </mat-option>
-      <mat-option *ngFor="let option of options$ | async" [value]="option">
-          {{option}}
-      </mat-option>
+  <mat-select #matSelectInfiniteScroll
+              msInfiniteScroll
+              (infiniteScroll)="getNextBatch()"
+              [formControl]="bankCtrl"
+              placeholder="Select Something">
+    <mat-option>
+      <!--disableScrollToActiveOnOptionsChanged should be set to true-->
+      <ngx-mat-select-search
+        [formControl]="searchCtrl"
+        placeholderLabel="search"
+        [disableScrollToActiveOnOptionsChanged]="true"
+        noEntriesFoundLabel="No entry matches">
+      </ngx-mat-select-search>
+    </mat-option>
+    <mat-option *ngFor="let bank of filteredBatchedData$ | async"
+                [value]="bank.id">
+      {{bank.name}}
+    </mat-option>
   </mat-select>
 </mat-form-field>