emilioberto / RxJSLoadingOperator

⌛ RxJS loading handler pipeable operator

⌛ RxJS Loading handler operator ⌛

Sets isLoading variable to true on subscription and to false on completion.

Without handleLoading pipeable operator 😒:

this.isLoading = true;
this.service.getData()
  .pipe(finalize(() => this.isLoading = false))
  .subscribe(
    res => {},
    err => {}
  );

With handleLoading pipeable operator 🎉:

this.service.getData()
  .pipe(handleLoading(this))
  .subscribe(
    res => {},
    err => {}
  );

Angular2 Usage example

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends BaseComponent implements OnInit {

  public constructor(private service: ExampleService) { }

  onInit(): void {
      this.service.getData()
        .pipe(handleLoading(this))
        .subscribe(
          res => {},
          err => {}
        );
  }

}

<div class="container">
  <lib-load-indicator *ngIf="isLoading; else myAmazingContent"></lib-load-indicator>
  <ng-template #myAmazingContent>
    Hello
  </ng-template>
</div>