python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
angular-6-datatable

angular-6-datatable [Pagination, Sorting in Angular 6]

The “angular-6-datatable” will provide the table component with sorting and pagination for Angular 6. If you want to use the datatable in Angular 6 applications, try the following steps.

Install -
npm i angular-6-datatable --save

The Example -

app.module.ts -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { UserListComponent } from './user-list/user-list.component';

import {DataTableModule} from "angular-6-datatable";

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    DataTableModule,
    FormsModule,
    RouterModule.forRoot([
      { path: 'user-link', component: UserComponent },
      { path: 'user-list', component: UserListComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


user-list.component.ts -
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  public data : any
 
  constructor() {   }

  ngOnInit() {
    this.data = [{'name':'Anil', '[email protected]' :'ssd', 'age' :'34', 'city':'Noida, UP, India' },
    {'name':'Anil', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'Sunil', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'Alok', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'Tinku', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'XYZ', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'asas', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'erer', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' },
    {'name':'jhjh', 'email' :'[email protected]', 'age' :'34', 'city':'Noida' }
   ]
  }
}


user-list.component.html -

<table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
  <thead>
  <tr>
      <th style="width: 20%">
          <mfDefaultSorter by="name">UserName</mfDefaultSorter>
      </th>
      <th style="width: 50%">
          <mfDefaultSorter by="email">UserEmail</mfDefaultSorter>
      </th>
      <th style="width: 10%">
          <mfDefaultSorter by="age">Age</mfDefaultSorter>
      </th>
      <th style="width: 20%">
          <mfDefaultSorter by="city">User City</mfDefaultSorter>
      </th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of mf.data">
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
      <td class="text-right">{{user.age}}</td>
      <td>{{user.city | uppercase}}</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
      <td colspan="4">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
      </td>
  </tr>
  </tfoot>
</table>

user-list.component.css -
@import "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";

Result
Reference - https://www.npmjs.com/package/angular-6-datatable
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions