![Angular-6-datatable [Pagination, Sorting In Angular 6]](https://cdn.blogarama.com/images/posts_thumbs_site_id/3289/328924-594110582.jpg "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 -
npmi 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]
})
exportclass 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']
})
exportclass UserListComponentimplements OnInit{
public data: any
constructor() { }
ngOnInit() {
]
}
}
user-list.component.html -
tableclass="table table-striped" [mfData]="data"#mf="mfDataTable"[mfRowsOnPage]="5">
thead>
tr>
th style="width: 20%">
mfDefaultSorterby="name">UserNamemfDefaultSorter>
th>
th style="width: 50%">
mfDefaultSorterby="email">UserEmailmfDefaultSorter>
th>
th style="width: 10%">
mfDefaultSorterby="age">AgemfDefaultSorter>
th>
th style="width: 20%">
mfDefaultSorterby="city">User CitymfDefaultSorter>
th>
tr>
thead>
tbody>
tr *ngFor=
