lm-angular-tools

Observable Helper

Helper method to handle loading and error messages in an angular app.

How it works

Pass an Observable to the ObservableHelper. This will return the observable you parsed to the function on success and handles will call startLoading() and stopLoading() of your loadingService.

If an error occurs this helper will call the showError() method of your messageService.

constructor(private messageService: MessageService, private loadingService: LoadingService) { }

const observable = ObservableHelper.getObservable(
                      <the observable>,
                      this.messageService,
                      this.loadingService
                      );

Note: this is just a helper function. The logic should be in your service.

Example

@Injectable({
  providedIn: 'root'
})
export class MovieService {
    constructor(private messageService: MessageService, private loadingService: LoadingService) { }
    
    getMovie(movieId: number): Observable<Movie> {
        return ObservableHelper.getObservable(
          this.http.get<Movie>('movie/' + movieId),
          this.messageService,
          this.loadingService);
      }
}

Requirements

Your messageService has to implement the IMessageService interface. Therefore your messageService has to implement a showError method which handles appearing error by e.g. showing a error message.

Your LoadingService has to extend the AbstractLoadingService which brings the startLoading(), stopLoading() and getLoading() functions.

• startLoading - begins the loading
• stopLoading - stops the loading
• getLoading - returns true if the app is loading otherwise false

Exampels

@Injectable({
  providedIn: 'root'
})
export class LoadingService extends AbstractLoadingService {

  constructor() {
    super();
  }

}

declare var $: any;

@Injectable({
 providedIn: 'root'
})
export class MessageService implements IMessageService{

 constructor() { }

 public showError(message: string): void {
   $('#errorModalBody').html(message);
   $('#errorModal').modal({focus: true, show: true});
 }

}