where to put toaster on http service calls typescript

1 testApi(viewData: any): Observable<any> {
2
3    return this.http
4      .delete<any[]>(URL, viewData)
5      .pipe(
6        map((res: any) => {
7		  // add snackbar or toast function here;
8          return res;
9        })
10      )
11      .pipe(
12        catchError((error: any) => {
13          // add snackbar or toast function here;
14          return throwError(error);
15        })
16      );
17  }

1@Injectable()
2export class HttpInterceptor implements HttpInterceptor {
3constructor(public toasterService: ToastrService) {}
4
5intercept(
6    req: HttpRequest<any>,
7    next: HttpHandler
8  ): Observable<HttpEvent<any>> {
9
10    return next.handle(req).pipe(
11        tap(evt => {
12            if (evt instanceof HttpResponse) {
13                if(evt.body && evt.body.success)
14                    this.toasterService.success(evt.body.success.message, evt.body.success.title, { positionClass: 'toast-bottom-center' });
15            }
16        }),
17        catchError((err: any) => {
18            if(err instanceof HttpErrorResponse) {
19                try {
20                    this.toasterService.error(err.error.message, err.error.title, { positionClass: 'toast-bottom-center' });
21                } catch(e) {
22                    this.toasterService.error('An error occurred', '', { positionClass: 'toast-bottom-center' });
23                }
24                //log error 
25            }
26            return of(err);
27        }));
28  }
29}
30