Monday, May 20, 2024

Angular 7 Datatables Working Example

Angular 7 Datatables Working Example

Hello to all, welcome to In this post, I will tell you, Angular 7 Datatables Working Example.

Angular 7 has just launched and it is in very high in demand. Angular 7 increased his performance speed.

I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture:


Angular 7 Datatables Working Example


I will hope that, this will help you in rendering json data in datatables.

Here are the working steps, you need to follow:


1. Very first, you need to run below commands to set  your Angular 7 application:


$ npm install -g @angular/cli 
$ ng new angulardatatables
$ cd angulardatatables
$ ng serve

2. After, it run below commands to add datatable and bootstrap into Angular Application:


npm install jquery --save
npm install --save
npm install --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/ --save-dev
$ npm install ngx-bootstrap bootstrap --save

3. Now add below code into your angular.json file:


"styles": [
            "scripts": [

4. Now add code into app.module.ts file:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

5. Now add below code into app.component.ts file:


import { Component, OnInit } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  public data = [
    {name: 'therichpost', email: '', website:''},
    {name: 'therichpost', email: '', website:''},
    {name: 'therichpost', email: '', website:''},
    {name: 'therichpost', email: '', website:''},

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true

6. Now add below code into app.component.html file:


<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
   <tr *ngFor="let group of data">

If you have any query related to this post, then please do comment below or asl question.

Thank you,

jatt budhi,




the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.