How to show data in Angular 7 datatables with laravel Rest API?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to show data in Angular 7 datatables with laravel Rest API?

Guys, you can find many posts related to Laravel 5.7 and Angular 7 on my blog.

Here is the workingpicture:

Here are the working and tested code need to follow:

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

Install latest Angular 7 version on your machine:

$ npm install -g @angular/cli 
$ ng new angulardatatables //Install Angular Project
$ cd angulardatatables // Go to project folder
$ ng serve //Run Project
http://localhost:4200/ //Run On local server

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

This will install fresh datatables, bootstrap versions also:

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:

Will add bootstrap and datatables libraries on your project:

...
"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 below code into your app.module.ts file:

Add datatables and httpclient api modules:

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import {DataTablesModule} from 'angular-datatables';

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

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

Execute datatable and get data for datatables from laravel rest api:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [];
  title = 'angulardatatables';
  constructor(private http: HttpClient) {
  this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
    this.data.push(data);
    //console.log(this.data);

    }, error => console.error(error));
  }
  dtOptions: DataTables.Settings = {};
  ngOnInit() {

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

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

Will give final output:

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Domain</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.domain}}</td>
     </tr>
  </tbody>
</table>

7. Now you need to add below code into your laravel project routes/api.php file:

This laravel api file code which Sends data to Angular 7 app:

Route::get('sample-restful-apis', function()
{
return response()->json([
'name' => 'test',
'domain' => 'test.com'
]);
});

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

Notes: My main purpose is, share the code and help other and feel happy. I know my blog users are from around the world but I am an Indian my english is simple and some guys make fun of my english but anyways just enjoy the code.

Happy Coding,

Thank you,

Jatt Nation,

TheRichPost