Posts

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...
6 comments
Read more

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

-
//step 1 install ngb bootstrap npm package npm install --save @ng-bootstrap/ng-bootstrap main.module.ts import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap/'; import { ModalComponent} from '/modal-dialog.component'; @NgModule({ declarations:[ModalComponent], imports: [ NgbModalModule.forRoot() ] }) modal-dialog.component.ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';@Component({ selector: 'modal-dialog', template: ` <div class="confirm" [handle]="modalHandle" *ngIf="show" ngDraggable> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header cursor" #modalHandle> <button type="button" class="close" data-dismiss="modal" (click)="closePopUp()" aria-hidden=...
3 comments
Read more

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" ...
2 comments
Read more

Angular 2/3/4/5/6/7 Sort a table with data from a Array of complex JSON Object

-
Sort-Filter.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sortFilter' }) export class SortFilterPipe implements PipeTransform { key: string; transform(items: Array , key: string, asc: boolean) { this.key = key; if (items) { if (asc) { return items.sort((item1: any, item2: any) => { if (!item2[this.key]) return -1 else if (!item1[this.key]) return 1 else if (item1[this.key] > item2[this.key]) return 1 else if (item1[this.key] === item2[this.key]) return 0 else return -1 }) } else { return items.sort((item1: any, item2: any) => { if (!item2[this.key]) return 1 else if (!item1[this.key]) return -1 else if (item1[this.key] Componentt.ts import { sortFilterPipe } from '../../../shared/sort-filter.pipe'; export class component implemen...
2 comments
Read more

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

-
Search-Filter.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchFilter' }) export class SearchFilterPipe implements PipeTransform { transform(items: Array , filter: { [key: string]: any }): Array { if (items) { return items.filter(item => { let match: boolean = true; for (var k in filter) { if (filter[k] && filter[k] != '') { if (typeof (item[k]) == "boolean") { let val: boolean = (filter[k] == "true"); if (item[k] != val) { match = false; } } else { if (item[k] && item[k] !="" && item[k].toString().toLowerCase().indexOf (filter[k].toString(). toLowerCase()) == -1) match = false; } } } return match; }); } } } Componentt.ts import { SearchFilterPipe } from '../../../shared/search-filter.pipe'; export class component implements O...
2 comments
Read more