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…..
- Angular 6 Folder Project Structure
- Angular 6 CLI Installation
- Angular 6 Module File
- Angular 6 Components
- Angular 6 Services
- Angular 6 Routing
- Angular 6 CSS
- Angular 6 Class Binding
- Angular 6 Animation
- Angular 6 Templating
- 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 applications – Insert, Fetch , Edit – update , Delete Operations
- Angular 6 CRUD
- Angular 6 and ASP.NET Core 2.0 Web API
- Angular 6 features
- Angular 6 Form Validation
- Angular 6 – User Registration and Login
- Angularjs 6 User Registration and Login Authentication
- Angular 6 CLI Installation Tutorial With Example
- Angular 6 Toast Message Notifications From Scratch
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.