Show data in a table using Http get method from an web Api with search filter & pagination

Hey guys 🙌 

Grab your coffee and lets read blog❤

Let's start our project in an angular 8.0.0 version(Angular 2+).

To create a new project, open your terminal to create a new project with the help of angular CLI.

1:- To create a new project type (ng new table) in terminal(Table is project folder name). It will create a new project in your system(To create a project it will take some time)

2:- As we know angular is component-based. To create a new component in terminal type- ng g c tablecomponent

3:- After creating a component, you will see there is a new folder added in your project i.e. (tablecomponent). It will contain 4 files, A template file(tablecomponent.html), a CSS file where we will write our CSS for the template(tablecomponent.css), a typescript file where we will write our logic(tablecomponent.ts) & a spec.ts file (which we will use for unit testing).

Create a service

1:- To create a service in terminal type: ng g s tableservice (tableservice is the service file name).

first of all import HttpClient from angularCore.

import { HttpClient } from ‘@angular/common/http’;

code for tableSevice

import { Injectable } from ‘@angular/core’;

import { HttpClient } from ‘@angular/common/http’;

@Injectable({

providedIn: ‘root’

})

export class TableService {

constructor(private http: HttpClient) { }

arpanrequest(){

let baseUrl = “http://dummy.restapiexample.com/api/v1/employees";

return this.http.get(baseUrl);

}

}

Typescript File(tablecomponent.ts)

To use tableService we have to import it in our typescript file.

import { Component, OnInit } from ‘@angular/core’;

import {TableService} from ‘../table.service’;

@Component({

selector: ‘app-tablecomponent’,

templateUrl: ‘./tablecomponent.html,

styleUrls: [‘./tablecomponent.css’]

})

export class TableComponent implements OnInit {

tableData: Object;

constructor(private httpService :TableService) { }

ngOnInit() {

this.httpService.arpanrequest()

.subscribe(data =>{

this.tableData = data;

console.log(this.tableData);

})

}

}

Create a template for our project

Here I’m going to use bootstrap 4. To use bootstrap in an angular project, go to bootstrap official site, copy the bootstrap 4 CDN and paste it in index.html file.

Now we can create a table and bind data to the table using *ngFor

<table class=”table”>

<thead>

<tr>

<th>Id</th>

<th>Employee_name</th>

<th>Employee_salary</th>

<th>Employee_age</th>

</tr>

</thead>

<tbody *ngFor=”let tableData of tableData”>

<tr>

<td>{{tableData.id}}</td>

<td>{{tableData.employee_name}}</td>

<td>{{tableData.employee_salary}}</td>

<td>{{tableData.employee_age}}</td>

</tr>

</tbody>

</table>

Now we are implementing a search filter for our table

For search filter, I’m using ng2-search-filter

For install ng2-search-filter (npm i ng2-search-filter) type in your terminal & import (Ng2SearchPipeModule) in app.modules.ts file

For pagination in a table here, I’m using ngx-pagination

For install ngx-pagination (npm i ngx-pagination)type in your terminal & import {NgxPaginationModule} from ‘ngx-pagination’ it in app.modules.ts file.

After adding ngxPegination & ng2-search-filter template file is look like this.

<input type=”text” [(ngModel)]=”term” class=”form-control” placeholder=”Search here” style=”width:40%;margin:30px 40px;float:right;”>

<table class=”table”>

<thead>

<tr>

<th>Id</th>

<th>Employee_name</th>

<th>Employee_salary</th>

<th>Employee_age</th>

</tr>

</thead>

<tbody *ngFor=”let tableData of tableData |filter:term| paginate: { itemsPerPage: 7, currentPage: p }; let i = index”>

<tr>

<td>{{tableData.id}}</td>

<td>{{tableData.employee_name}}</td>

<td>{{tableData.employee_salary}}</td>

<td>{{tableData.employee_age}}</td>

</tr>

</tbody>

<pagination-controls (pageChange)=”p = $event”></pagination-controls>

</table>

& set currentPage (page: number = 1) in typescript file.

In the end, our component should look like this

 

Happy Coding😄