angular2+ primeng error callback

Question

I am using primeNG galleria to display images, the problem is some of the links might have already expired. I'd want to somehow put a fallback in case of error display some kind of default image (like onError event). Is there some undocumented way to do it?

You could add by making changes in library itself. But this would never be a recommended way — Pardeep Jain
I am aware of this one, I am looking for solution that would not require lib modification but thans! As for now I am running additional server request to check if image is available and does not return 404 but I don't really like that solution. — sniegoman

free free · Accepted Answer · 2018-05-21T16:30:48

When a server request is done with the httpclient it provides also a way to work with observables of reactive extensions (rx). These observables contains a catch method where you can handle the error.

I've used it to catch the errors from the server and show the errorinfo on the screen. Maybe you can write logic there to display a default image or something a like, here is the code.

import { Component, ViewChild, Input, OnInit, Injectable, Injector } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { URLSearchParams, QueryEncoder,Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import {ICustomer  } from '../components/table/Customer'
import { NotificationsService } from './notification.service';
import { IClientmessage } from './clientmessage';
import { DatabaseServiceIsbusy } from './databaseserviceIsbusy.service';

@Injectable()
export class CustomerserviceService {
    constructor(private http: HttpClient,private httpold: Http, private notificationService: NotificationsService, private databaseservice: DatabaseServiceIsbusy) {       
    }

    private baseUrlTask = 'http://localhost:4584/customer'

    private httpOptions = {
        headers: new HttpHeaders({ 
          'Access-Control-Allow-Origin':'*',
          'Content-Type': 'application/json',
        })
      };

    public addCustomer(customer: ICustomer):Observable<IClientmessage>{
        return this.http.post<IClientmessage>(this.baseUrlTask, customer,this.httpOptions).catch(error =>this.handleError(error));;
    }   

    private handleError(error: HttpErrorResponse): Observable<any> {
        console.error(error.error);
         let errormessage:IClientmessage= error.error
        this.notificationService.notify(errormessage.severity, errormessage.summary,errormessage.detail);
        this.databaseservice.displayLoader(false);
        return Observable.throw(error.error || 'Server error');
    }

angular2+ primeng error callback

1 Answers