Angular 6 Searching Sorting Pagination Tutorials

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

Read Also:  Drag And Drop Multiple File Uploading using DropzoneJS and PHP Example

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

<h1>Angular 6 Grid Pagination, Sorting and Searching</h1>
<table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Devloper Name</th>
        <th>Devloper Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{ devloper.id }}</td>
        <td>{{ devloper.name }}</td>
        <td>{{ devloper.salary }}</td>
      </tr>
    </tbody>
</table>

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 Searching Sorting Pagination Tutorials
Angular 6 Searching Sorting Pagination Tutorials
Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Image Overlay Hover Effects With CSS3 Transitions

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.