Angular Material Datatables example with Laravel 5.6 API Data

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular Material Datatables example with Laravel 5.6 API Data.

I am doing this with Angular 6 and hope this will help other. By my point of view this is very interesting post for me. 

I also added bootstrap feature in it and you can bootstrap into your angular 6 by follow link:

 https://therichpost.com/add-bootstrap-4-to-angular-6

Angular and Laravel are both top of the charts now a days and I have shared my posts related to laravel and Angular below, please check the links:

 laravel

Angularjs

Angular 2

angular 4

Angular 6

Here is the working picture for Angular 6 Datatables With laravel 5.6 Api:

Here are following steps need to follow:

1. First you need to run below command into your terminal to include angular material into your angular 6 app:

npm install --save @angular/material @angular/cdk @angular/animations

2. After that, please add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from "@angular/material";
import {DataSource} from '@angular/cdk/table';
import { CdkTableModule } from '@angular/cdk/table';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  BrowserAnimationsModule,
  MatTableModule,
  HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 3. After that, please add below code into your app.component.ts file:

import {Component, OnInit, ViewChild, Inject} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import { HttpClient } from '@angular/common/http';
export interface Applications {
  name: string;
  domain: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public const apps: Applications[] = [];
  constructor(private http: HttpClient) {
  this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
  this.apps.push(data);
  this.displayedColumns = ['name', 'domain'];
  this.dataSource = new MatTableDataSource(this.apps);
    }, error => console.error(error));
  }
}

 4. After that, please add below code into your app.component.html file:

<div class="jumbotron text-center">
  <h3>Angular6 Material Datatables example with Laravel 5.6 API Data:</h3>
</div>
<div style="text-align:center">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Email Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let app"> {{app.name}} </td>
  </ng-container>

  <!-- Username Column -->
  <ng-container matColumnDef="domain">
    <th mat-header-cell *matHeaderCellDef> Domain </th>
    <td mat-cell *matCellDef="let app"> {{app.domain}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>

 5. Finally, please add below code into your app.component.css file:

table {
  width: 100%;
}
table th {
  text-align: center;
  font-size:26px;
}
table tr:hover{
  cursor: pointer;
  background:#000;
  color:#fff;
}

 6. Here is the laravel api  code anf you need to add this routes/api.php:

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

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

 And your done, if you have any query related to this post, then you can questions or comment below.