Posted inTechnology / AngularJS

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

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

Angular Table with Sorting, Searching and Pagination

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

Angular 6 Smart Table Example

Angular Table with Sorting, Searching and Pagination
player ID player Name player Age
{{ player.id }} {{ player.name }} {{ player.age }}

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



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.

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