Categories

Saturday, October 16, 2021
therichposts@gmail.com
Angular6MaterialAngularMysqlPhp

Angular 6 Material Datatables example with Php Mysql data

Angular 6 Material Datatables example with Php Mysql data

Here is the updated for this post and please check this link as well:
https://therichpost.com/angular-9-material-datatable-with-php-mysql-data/

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 6 Material Datatables example with Php Mysql data.

Here I am showing the fresh and latest example of Angular 6 Material Datatables example with Php Mysql data and this is very interesting post.

Here is the working picture:

angular6-datatables-with-mysql-data

Here are the steps you need to follow for Angular 6 Material Datatables example with Php Mysql data:
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 , MatSortModule, MatPaginatorModule } 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} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
export interface Applications {
  id: number;
  email: string;
  username: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  posts: any;
  public const apps: Applications[] = new Array();
  title = 'my-angular-app';
  
  constructor(private http: HttpClient) {
  this.http.get('http://localhost/mypage.php').subscribe(data => {
  this.apps.push(data);
  this.displayedColumns = ['id', 'email', 'username'];
  this.dataSource = new MatTableDataSource(this.apps[0]);
    }, error => console.error(error));
  }
}
 4. After that, please add below code into your app.component.html file:
<div style="text-align:center">
  <h1>
    Angular6 Material Datatables example with Php Mysql data:
  </h1>
<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" -->

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

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

  <!-- Username Column -->
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Username </th>
    <td mat-cell *matCellDef="let app"> {{app.username}} </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;
}
 6. Here is the mypage.php file code:
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$conn = new mysqli('localhost','root','root','user');
$sql = "SELECT * FROM userdata";
$result = $conn->query($sql);
$myArr = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$myArr[] = $row;
}
} else {
echo "0 results";
}

$myJSON = json_encode($myArr);
echo $myJSON;

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

 

Ajay Malhotra
the authorAjay Malhotra
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 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

7 Comments

  • Brother there are 5 errors on app.component.ts file
    1) Line 16, A class member cannot have the ‘const’ keyword.ts(1248)
    2) Line 21, Argument of type ‘Object’ is not assignable to parameter of type ‘Applications’.
    The ‘Object’ type is assignable to very few other types. Did you mean to use the ‘any’ type instead?
    Type ‘Object’ is missing the following properties from type ‘Applications’: id, email, username
    3) Line 22, Property ‘displayedColumns’ does not exist on type ‘AppComponent’.ts(2339)
    4) Line 23,Property ‘dataSource’ does not exist on type ‘AppComponent’.ts(2339)
    5) Line 23, Argument of type ‘Applications’ is not assignable to parameter of type ‘unknown[]’.
    Type ‘Applications’ is missing the following properties from type ‘unknown[]’: length, pop, push, concat, and 26 more

Leave a Reply

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