Angular 6 Smart Table with Sorting Searching and Pagination

Today, We want to share with you Angular 6 Smart Table with Sorting Searching and Pagination.In this post we will show you AngularJS 6 Table with search, sort, filter & paging, hear for Smart table Server side pagination with angular 6 we will give you demo and example for implement.In this post, we will learn about Angular 6 Smart Table Example with Pagination, Search and Sorting with an example.

Angular 6 Smart Table with Sorting Searching and Pagination

There are the Following The simple About Angular 6 Smart Table with Sorting Searching and Pagination Full Information With Example and source code.

As I will cover this Post with live Working example to develop , so the some major files and Directory structures for this example is following below.

  • Angular 6 Smart Table
  • Setup Angular 6 Application
  • .

  • Setup the Angular 6 libs ng2-smart-table.
  • Make a HTML Table Component.
  • make a backend (Server side) server.
  • Settings HttpClient.
  • Settings the Angular Smart Table.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client
Read Also:  Loop Binding in Vue.js With V-for

Angular 6 Table with Sorting, Searching and Pagination

Step 1: Setup Angular 6 project

Angular 6 Smart Table Example. Setup Angular 6 project.

npm install -g @angular/cli


//make a new Angular 6 application
ng new ngtable

//Go >> project Folder
cd ngtable


//Start the server(angular 6 table)
ng serve --open


//Angular 6 install third-party packages
npm i rxjs-compat --save

Step 2: Setup the Angular 6 libs ng2-smart-table.

npm install --save ng2-smart-table

app.module.ts

import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  imports: [
    // some source code...
    
    Ng2SmartTableModule,
    
    // some source code ...
  ],
  declarations: [ ... ]
})

Step 3: Make a HTML Table Component.

generate the angular 6 component

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

<b>Angular Table with Sorting, Searching and Pagination</b>
<app-table></app-table>

Step 4: Make a backend server.

Simple a called json-server

yarn global add json-server

#### Onther Way ##########

npm install -g json-server

db.json

{
    "players": [
    {
        "id": "1",
        "name": "Virat Kohali",
        "age": "45"
    },
    {
        "id": "2",
        "name": "Sachin Tendulkar",
        "age": "43"
    },
    {
        "id": "3",
        "name": "Dinesh Karthik",
        "age": "30"
    },
    {
        "id": "4",
        "name": "Suresh Raina",
        "age": "30"
    },
    {
        "id": "5",
        "name": "Hardik Pandya",
        "age": "50"
    }]
}

using Commands start the JSON server

//Run JSON Server
json-server --watch src/data/db.json --port 4000

Step 5: Angular 6 Settings HttpClient.

app.module.ts

//Import HttpClientModule
import { HttpClientModule } from '@angular/common/http';

//Required Some Angular 6 Smart Table Example
imports: [
    BrowserModule,
    Ng2SmartTableModule,
    HttpClientModule
 ],

Table.ts

//Angular 6 Smart Table Include Interface
export interface Table {
    id: Number;
    name: String;
    age: Number;
}

table.service.ts

// table.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TableService {
  constructor(private http: HttpClient) { }
  //Run this app-table
  url = 'http://localhost:4000';
  getPlayers() {
    return this
            .http
            .get(`${this.url}/players`);
        }
}

app.module.ts

//Angular 6 app.module.ts

import { TableService } from './table/table.service';

providers: [TableService],

table.component.ts

//Angular 6 table.component.ts

import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Table } from './Table';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styles: []
})
export class TableComponent implements OnInit {

  players: Table[];

  constructor(private tservice: TableService) { }

  ngOnInit() {
    this
      .tservice
      .getPlayers()
      .subscribe((data: Table[]) => {
        this.players = data;
    });
  }

}

table.component.htm

<h2>Angular 6 Smart Table Example</h2>
<b>Angular Table with Sorting, Searching and Pagination</b>
<table>
    <thead>
      <tr>
        <th>player ID</th>
        <th>player Name</th>
        <th>player Age</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let player of players">
        <td>{{ player.id }}</td>
        <td>{{ player.name }}</td>
        <td>{{ player.age }}</td>
      </tr>
    </tbody>
</table>

Step 6: Settings the Angular 6 Smart Table.

table.component.ts

//Simple Data Headers table.component.ts

settings = {
    columns: {
      id: {
        title: 'ID'
      },
      name: {
        title: 'Name'
      },
      age: {
        title: 'Age'
      }
    }
  };

Angular 6 ng-smart-table

table.component.html

//Angular 6 table.component.html

<ng2-smart-table 
    [settings]="settings" 
    [source]="players">
</ng2-smart-table>

Read Also:  Google adsense Remove Yellow Background box in wordpress
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 Angular 6 Smart Table with Sorting Searching and Pagination.
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.