Wednesday, June 12, 2024
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

Hello to all, welcome to 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 --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:

Will add bootstrap and datatables libraries on your project:

"styles": [
            "scripts": [


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

  declarations: [
  imports: [
  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';
  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 => {;

    }, 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">
   <tr *ngFor="let group of data">


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

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,


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.