Welcome to www.tutorialshelper.com, in this article we will learn about how to bind data to table by using dtoptions in angular10 datatable.
Steps:
- Run the basic commands
- Adding the required .css,js files
- Importing the DataTableModule in your app.modules.ts file
- Implementing the component for datatable
Step1:Run the basic commands for datatable:
Install the given below basic commands in your project
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
npm install bootstrap --save
Step2: Adding the required .css, js files in your Angular.json file
After installation you have to add the given css,js file in your Angular.json file, go to your project search for the angular.json file then after add the given below references for dtoptions in angular10 datatable.
"styles": [
...
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
...
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
Step3: Importing the DataTableModule
Go to your src/app/app.module.ts file and import the DataTableModule from datatable and then we add on the declarations part.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DataTablesModule } from 'angular-datatables';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DataTablesModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step4: Implementing the component for datatable
Create a component for implementing the angular datatable with dtoptions
And add the following given source code in your file or got to your src/app/app.componenet.ts and add the given below source code
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'datatables';
dtOptions: DataTables.Settings = {};
posts;
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5,
processing: true
};
this.http.get('your API here ')
.subscribe(posts => {
this.posts = posts;
});
}
}
Step 5: implementing the ui page
Go to your src/app/app.componenet.html and implement the page as following the given source code
<h1>dtoptions in angular10 datatable - www.tutorialshelper.com</h1>
<table datatable [dtOptions]="dtOptions" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>location</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of posts">
<td>{{ post.id }}</td>
<td>{{ post.name }}</td>
<td>{{ post.location }}</td>
</tr>
</tbody>
</table>
Lets run the your angular application with the following given command ng serve
- how to create ASP.NET Core 3 Web API Project - January 21, 2022
- JWT Authentication using OAUTH - January 10, 2022
- Ado.net database Transactions - January 9, 2022