Angular 2/4/5/6/7-Custom Table component with Sort,Filter,Pagination with data from a complex JSON Array-Complete Guide(code snippet)

Image
Table GUI //step 1 install ngb bootstrap npm package npm install --save @ng-bootstrap/ng-bootstrap main.module.ts import { NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap/'; @NgModule({ declarations:[], imports: [ NgbPaginationModule.forRoot() ] }) sample.component.html <div class="row" style="padding-top:3px;"> <div class="col-sm-5"> <label class="control-label"> Records per page <label> <input [(ngModel)]="itemsPerPage" style="width:50px" class="form-control" type="text"> </label> </label> <label class="control-label"> Total records: <label class="info-text"> {{TotalCount}} </label> </label> </div> <div *ngIf="count > itemsPerPage" class="col-sm-7 "> <div class=" pull-right&q

Angular 2/3/4/5/6/7 global http error handling for Angular HTTP calls

http-error.service

import { Injectable, OnInit }
 from '@angular/core';
import { ErrorObservable } 
from 'rxjs/observable/ErrorObservable';
import { HttpErrorResponse } 
from '@angular/common/http';
import { Router }
 from '@angular/router';

@Injectable()
export class HttpErrorService {
constructor(private router:Router){

}
  errorMessage="Something bad happened;
 please try again later.";
 
  handleError(error: HttpErrorResponse) {

    if (error.error instanceof ErrorEvent) {
      // A client-side or network error 
        occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
      
    } else {
      // The backend returned
         an unsuccessful response code.
      // The response body may 
        contain clues as to what went wrong,
      let status=error.status;
      if(status==406 || status ==410 || status==401){
        this.errorMessage = "expired"
     

      }
      else if(status==403 ){
        this.errorMessage = "You are not 
       authorized to access this service."
      }
      else{
        this.errorMessage = "System Error.Please try again.
If the problem persists contact the admininstrator."
      }
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an ErrorObservable
      with a user-facing error message
    return new ErrorObservable(
      this.errorMessage);
  }
}
 

sample-http-call.service.ts

import { Injectable, OnInit } from '@angular/core'; import { HttpClient, HttpResponse } from '@angular/common/http'; import { HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { ErrorObservable } from 'rxjs/observable/ErrorObservable'; import { catchError } from 'rxjs/operators/catchError'; import { tap } from 'rxjs/operators/tap'; import { Router } from '@angular/router'; import { HttpErrorService } from './http-error.service'; @Injectable() export class HTTPService { constructor( private http: HttpClient, private httpError: HttpErrorService) { } getHeaders() { return { 'Accept': 'application/json', 'Content-Type': 'application/json', } } GetData(serviceName): Observable { return this.http.get ( serviceName, { headers: this.getHeaders() } ).pipe( tap(res => { // Your Logic goes here // }), //This will handel the Http error catchError(this.httpError.handleError) ); } Post(data: any, serviceName): Observable { return this.http.post ( serviceName, data, { headers: this.getHeaders() } ).pipe( tap(res => { // Your Logic goes here // }), catchError(this.httpError.handleError) ); }

Comments

Post a Comment

Popular posts from this blog

Angular 2/4/5/6/7-Custom Table component with Sort,Filter,Pagination with data from a complex JSON Array-Complete Guide(code snippet)

Angular 2/4/5/6/7-Reusable Custom Bootstrap Modal Dialog Angular Component(3 ways)

Angular 2/3/4/5/6/7 Filter a table based on multiple fields from a Array of complex JSON Object