Angular7DatatableLaravelLaravl 5.7

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

Show data in Angular 7 datatables with laravel Rest API

angular7
465Views

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:

 

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

 

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

Positive SSL