Posted inTechnology / Ajax / AngularJS

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

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 Searching Sorting Pagination Tutorials
Angular 6 Searching Sorting Pagination Tutorials
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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype