Using Angular2 Fill DataTable With Fillter,Globle Serach n Pagination

Note:- Using PrimeNg DataTable
(https://www.primefaces.org/primeng/#/)

-----------------------------------------HTML CODE---------------------------------------------------


<div class="ui-widget-header" style=" padding: 15px 20px !important;
    margin-top: 10px;">
    <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
    <input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>

<p-dataTable [loading]="loading" [value]="_GenericClass.Data"  resizableColumns="true" [globalFilter]="gb"
    #dt selectionMode="single" (onRowSelect)="onRowSelect($event)">
    <p-column *ngFor="let col of cols.cols" [field]="col.field" [header]="col.header" [hidden]="col.hidden" [sortable]="col.sortable"
        filterPlaceholder={{col.filterPlace}} dateFormat="dd.mm.yy" [style]="{'overflow':'visible'}" [filter]="col.filter" filterMatchMode="equals">
        <ng-template *ngIf="col.DataType === 'Date'" pTemplate="filter">
            <p-calendar id="col.field" class="col.field" selectionMode="range" readonlyInput="true"></p-calendar>
        </ng-template>
    </p-column>
</p-dataTable>
<p-paginator rows="10" totalRecords="50" (onPageChange)="paginate($event)" pageLinkSize="3" [rowsPerPageOptions]="[10,100,500,1000]"></p-paginator>

------------------------------------Component.ts--------------------------------------------------------
import { Component, OnInit } from '@angular/core'
import { GetService, GenericClass,Pagination } from '../../shared'
@Component({

    selector: 'master-head',
    templateUrl: './head.component.html',
    styleUrls: ['./head.component.css']
})
export class headmastercomponent implements OnInit {

    _GenericClass: GenericClass;
    loading: boolean;
    cols: Table_Col;
   
    _Pagination:Pagination;
 
    constructor(private __GetService: GetService) {
 
        this._GenericClass = new GenericClass();
 
        this.cols = new Table_Col();     

        this._Pagination=new Pagination();

        this._Pagination.CurrentPage=1;

        this._Pagination.PageSize=10;
    }
    ngOnInit() {
        this.loading = true;
        this._GetService.GetHeadDetails("GETHEADDETAILS", "",this._Pagination).subscribe(
            data => { console.log(data); this._GenericClass = data; this.loading = false; })
    }
 
    paginate(event) {
        this._Pagination.PageSize=event.rows;
        this._Pagination.CurrentPage=event.page+1;     
        this._HeadService.GetHeadDetails("GETHEADDETAILS", "",this._Pagination).subscribe(
            data => { console.log(data); this._GenericClass = data; this.loading = false; })
     
    }
}