Categories

Thursday, November 14, 2024
#919814419350 therichposts@gmail.com
Angular6MaterialAngularMysqlPhp

Open Modal Popup with dynamic data On click event Angular Material Datatable Row

Open Modal Popup in Onclick Angular Material Datatable Row - The Rich Post

Hello to all, welcome to therichpost.com. In this post, I will tell you, how to Open Modal Popup in Onclick Angular Material Datatable Row? and I am doing this in Angular 6 and php mysql data

I am also covering the mysql data to Angular Material Datatable.

Here is the working Picture:

open-modal-popup-onclick-angularmaterial-datatable-angular6

Here are the following steps you 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 , MatSortModule, MatPaginatorModule, MatDialogModule } 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,
  MatDialogModule
  ],
  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 {MatSort, MatTableDataSource, MatDialog} 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 {
  htmlContent: string = "<p>Content goes here</p>";
  posts: any;
  public const apps: Applications[] = [];
  public rowID;
  constructor(private http: HttpClient, public dialog: MatDialog) {
  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));
  }
  selectRow(templateRef, row) {
   this.rowID = row['id'];
   const dialogRef = this.dialog.open(templateRef,{
     height: '200px',
     width: '250px',
   left:'100px'
     });
  }
}
 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 (click)="selectRow(mytemplate, row)" *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<ng-template #mytemplate>
<h2>Row ID = {{rowID}}</h2>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>
</ng-template>
</div>
 5. Finally, please add below code into your app.component.css file:
table {
  width: 100%;
}
table th {
  text-align: center;
}
table td{
  cursor: pointer;
}
 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.

therichpost
the authortherichpost
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 19, MedusaJs, Next.js, 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.