Today, We want to share with you Angular 6 Searching Sorting Pagination Tutorials.In this post we will show you Angular 6 Smart Table Example, hear for Angular 6 DataTable server side sorting,pagination and searching we will give you demo and example for implement.In this post, we will learn about Pagination Searching and Sorting of data table using Angular 6 PHP MySQL with an example.
Angular 6 Searching Sorting Pagination Tutorials
There are the Following The simple About Angular 6 Searching Sorting Pagination Tutorials Full Information With Example and source code.
As I will cover this Post with live Working example to develop Ajax Pagination with Search and Filter in Angular 6, so the some major files and Directory structures for this example is following below.
- Angular 6 Advance Table Example.
- Setup Angular 6 project.
- Setup the ng2-Advance-table library.
- Make a HTML Table Component.
- Make a backend server side.
- Simple Call initigrate HttpClient.
- Settings the Angular Advance Table.
Step 1: Install Angular 6 New Project.
Angular 6 installing Angular 6 CLI.
// npm install -g @angular/cli //create a new project ng new ngtable //start a server ng serve --open //setup and run npm i rxjs-compat --save
Step 2: Install Table library in Angular 6.
npm install --save ng2-smart-table
app.module.ts
// app.module.ts //Search Sort Pagination in Angular 6 Modules import { Ng2SmartTableModule } from 'ng2-smart-table'; @NgModule({ imports: [ // ... some modules Ng2SmartTableModule, // ...Angular 6 Smart Table Example ], declarations: [ ... ] }) // ...
Step 3: Make a HTMK Table Angular 6 Component.
Run this Following command.
ng g c table
app.component.ts
// app.component.ts import { Component } from '@angular/core'; import { TableComponent } from './table/table.component'; //Angular 6 Components @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }
app.component.html
Step 4: Make a backend server.
install json-server
npm install -g json-server //or yarn global add json-server
src directory called data >> db.json
// Angular 6 Smart Table Example JSON { "devlopers": [ { "id": "1", "name": "Hardik Patel", "salary": "45" }, { "id": "2", "name": "Lina Heady", "salary": "43" }, { "id": "3", "name": "ABP Asmita", "salary": "30" }, { "id": "4", "name": "Mamata Banerjee", "salary": "30" }, { "id": "5", "name": "Jignesh Mevani", "salary": "50" }] }
JSON server Start And Run
json-server --watch src/data/db.json --port 4000
Step 5: Setup Angular 6 HttpClient.
app.module.ts
// app.module.ts import { HttpClientModule } from '@angular/common/http'; //Angular Imports module imports: [ BrowserModule, Ng2SmartTableModule, HttpClientModule ],
Table.ts
// Table.ts export interface Table { id: Number; name: String; salary: Number; }
table.service.ts
// table.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class DevTblService { constructor(private http: HttpClient) { } url = 'http://localhost:4000'; getDevlopers() { return this .http .get(`${this.url}/devlopers`); } }
app.module.ts
Simple Sort Search and Pagination in Angular 6 with services.
// app.module.ts import { DevTblService } from './table/table.service'; providers: [DevTblService],
table.component.ts
// table.component.ts import { Component, OnInit } from '@angular/core'; import { DevTblService } from './table.service'; import { Table } from './Table'; //Angular 6 Component @Component({ selector: 'app-table', templateUrl: './table.component.html', styles: [] }) export class TableComponent implements OnInit { //Angular 6 Data Table Example devlopers: Table[]; constructor(private tservice: DevTblService) { } ngOnInit() { this .tservice .getDevlopers() .subscribe((data: Table[]) => { this.devlopers = data; }); } }
table.component.html
Angular 6 Grid Pagination, Sorting and Searching
ID | Devloper Name | Devloper Salary |
---|---|---|
{{ devloper.id }} | {{ devloper.name }} | {{ devloper.salary }} |
Step 6: Settings the Angular 6 Advance Table.
table.component.ts
//angularjs pagination tutorial // table.component.ts settings = { columns: { id: { title: 'ID' }, name: { title: 'Name' }, salary: { title: 'Salary' } } };
table.component.html
// table.component.html
Angular 6 Searching Sorting Pagination – Output

Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Search Sort and Pagination in Angular 6 Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.