Therichpost

Categories

Sunday, December 22, 2024
#919814419350 therichposts@gmail.com
Therichpost
Therichpost

The best tech and code magazine.

Angular7Jquery

Angular 7 Datatables Working Example

therichpostNovember 13, 2018
posted on

Angular 7 Datatables Working Example

Hello to all, welcome to therichpost.com. 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
http://localhost:4200/

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

 

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 ngx-bootstrap bootstrap --save

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

 

...
"styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

 

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

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

  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">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

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

Thank you,

jatt budhi,

Therichpost

 

 

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.
All posts bytherichpost

28 Comments

Leave a Reply

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

You Might Also Like