Updated : Apr 29, 2021 in Angular

dtoptions in angular10 datatable

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:

  1. Run the basic commands 
  2. Adding the required .css,js files
  3. Importing the DataTableModule in your app.modules.ts file
  4. 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 

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x