by DuttaluruVijayakumar 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:

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

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

by DuttaluruVijayakumar Updated : Apr 29, 2021 in Angular

dtoptions in angular10 datatable

Related Posts: