Nice way of displaying messages for the user - Angular Toastr - Angular 2/6

gistfile1.txt

Install  Angular Toastr - follow steps described here:
https://github.com/scttcper/ngx-toastr
https://scttcper.github.io/ngx-toastr/

1) To display a message for the User you need create a private 'toast.service'. Example here:
import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
// If we would like to show error connected with http response: import { HttpErrorResponse } from '@angular/common/http';

@Injectable()
export class ToastService {
  constructor(private toast: ToastrService) {
    // If we would like to show error connected with http response: this.toast.toastrConfig.enableHtml = true;
    this.toast.toastrConfig.maxOpened = 2;
    this.toast.toastrConfig.positionClass = 'toast-bottom-full-width';
  }

  showSuccessToast(
    title: string,
    msg: string,
    values?: { msgValues?: {}; titleValues?: {} }
  ) {
    this.toast.success(msg, title);
  }

  showErrorToast(
    title: string,
    msg: string,
    values?: { msgValues?: {}; titleValues?: {} }
  ) {
    this.toast.error(msg, title);
  }

  // If we would like to show error connected with http response:
  // TODO: Uncomment and use when needed
  // showErrorToastHttp(err: any) {
  //   this.toast.error(this.createErrorMessage(err), 'Error!', {
  //     tapToDismiss: true,
  //     disableTimeOut: true
  //   });
  // }

  // createErrorMessage(err: HttpErrorResponse) {
  //   if (err.error) {
  //     const e = err.error;
  //     if (e && e.errorMessage) {
  //       return e.errorMessage;
  //     }
  //   }
  //   switch (err.status) {
  //     case 409:
  //       return 'HTTP.CONFLICT';
  //     case 400:
  //       return 'HTTP.BAD_REQUEST';
  //     case 401:
  //       return 'HTTP.UNAUTHORIZED';
  //     default:
  //       return 'Unknown error';
  //   }
  // }
}

2) And Then add the message to the 'effects' file:
@Injectable()
export class SettingsEffects {
  constructor(
    private action$: Actions,
    private _settingService: SettingsService,
    private toast: ToastService,
    private router: Router,
    private store: Store<SettingDto[]>
  ) {}

  /** Load settings from the database using SettingService */
  @Effect()
  loadSettings$ = this.action$.pipe(
    ofType<LoadRequestAction>(SettingsActionTypes.LoadRequest),
    switchMap(() =>
      this._settingService.listSettings().pipe(
        map(data => {
          return new LoadSuccessAction(data);
        }),
        catchError(err => {
          this.toast.showErrorToast(
            'BŁĄD',
            'Nie udało sie pobrać informacji z serwera'
          );
          // If we would like to show error connected with http response: this.toast.showErrorToastHttp(err);
          return of(new LoadFailureAction(err));
        })
      )
    )
  );

  /** Save settings to the database using a SettingsService */
  @Effect()
  saveSettings$ = this.action$.pipe(
    ofType<SaveRequestAction>(SettingsActionTypes.SaveRequest),
    // If we would like to get values from the store:  withLatestFrom(this.store.select(SETTINGS_STORE_ID)),
    switchMap(action =>
      this._settingService.saveAllSettings(action.tosave).pipe(
        map(data => {
          this.toast.showSuccessToast('SUKCES', 'Zapisano zmiany');
          return new SaveSuccessAction(action.tosave);
        }),
        catchError(err => {
          this.toast.showErrorToast('BŁĄD', 'Nie udało sie zapisać zmian');
          return of(new SaveFailureAction(err));
        })
      )
    )
  );
}