Geting out of observables hell

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { HttpClientModule }    from '@angular/common/http';
 
@@ -17,7 +18,8 @@ import { SubsystemItemComponent } from './method-list/subsystem-item/subsystem-i
   ],
   imports: [
     BrowserModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/method-list/method-list.component.ts

@@ -13,11 +13,13 @@ export class MethodListComponent implements OnInit {
   constructor(private methodsService: MethodsService) { }
 
   ngOnInit() {
-    this.getMethods();
+    // Service will tell when updated data is available!
+    this.methodsService.subsystemsUpdated.subscribe(signal => {
+      this.getMethods();
+    });
   }
 
   getMethods(): void {
-    this.methodsService.getMethods()
-      .subscribe(subsystems => this.subsystems = subsystems.slice(0, 50));
+    this.subsystems = this.methodsService.getMethods();
   }
 }

src/app/methods.service.ts

-import { Injectable } from '@angular/core';
+import { Injectable, Output, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -11,25 +11,44 @@ export class MethodsService {
 
   //private apiUrlBase = 'https://www.x-tee.ee/catalogue/EE/wsdls/';
   public apiUrlBase = 'http://localhost/';
+  private limit: number = 15;
+  private offset: number = 0;
   private apiService = 'index.json';
   private apiUrl = this.apiUrlBase + this.apiService;
   private subsystems: Subsystem[];
-  private observable: Observable<Subsystem[]>;
+
+  @Output() subsystemsUpdated: EventEmitter<any> = new EventEmitter();
 
   constructor(private http: HttpClient) {
-    this.observable = this.http.get<Subsystem[]>(this.apiUrl)
+    this.http.get<Subsystem[]>(this.apiUrl)
     .pipe(
       catchError(this.handleError('getMethods', []))
-    );
-    this.observable.subscribe(subsystems => this.subsystems = subsystems);
+    ).subscribe(subsystems => {
+      this.subsystems = subsystems;
+      this.signalRefresh();
+    })
+  }
+
+  private signalRefresh() {
+    this.subsystemsUpdated.emit(null);
+  }
+
+  private filtered(data: Subsystem[]): Subsystem[] {
+    return data.slice(this.offset, this.limit);
+  }
+
+  getMethods(): Subsystem[] {
+    return this.filtered(this.subsystems);
   }
 
-  getMethods (): Observable<Subsystem[]> {
-    if (this.subsystems) {
-      return of(this.subsystems)
+  filterNonEmpty(checked: boolean) {
+    console.log(checked)
+    if (checked) {
+      this.limit = 5;
     } else {
-      return this.observable;
+      this.limit = 10;
     }
+    this.signalRefresh();
   }
 
 

src/app/search/search.component.html

@@ -4,8 +4,9 @@
   </div>
   <div class="card-body">
     <div class="form-group form-check">
-      <input type="checkbox" class="form-check-input" id="exampleCheck1">
-      <label class="form-check-label" for="exampleCheck1">Check me out</label>
+      <input type="checkbox" class="form-check-input" id="exampleCheck1" 
+      [(ngModel)]="nonEmpty" (change)="methodsService.filterNonEmpty(nonEmpty)">
+      <label class="form-check-label" for="exampleCheck1">Show only nonempty subsystems</label>
     </div>
   </div>
 </div>

src/app/search/search.component.ts

 import { Component, OnInit } from '@angular/core';
+import { MethodsService } from '../methods.service';
 
 @Component({
   selector: 'app-search',
@@ -7,7 +8,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SearchComponent implements OnInit {
 
-  constructor() { }
+  nonEmpty: boolean = false
+
+  constructor(private methodsService: MethodsService) { }
 
   ngOnInit() {
   }