Angular 9 Php Mysql Database Crud Part 3 – Delete User

Hello to all, welcome on therichpost.com. In this post, I will tell you, Angular 9 Php Mysql Database Crud Part 3 – Delete User.

First here are the Part1 and Part2 tutorial links. To understand delete functionality, please check Part1 and Part2.

In this post, I will show you, how to delete user in angular 9.

Please use code snippet carefully:

1. Here is the code, you just need to replace into your user.component.ts file:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/mypage.php').subscribe(data => {
  
    this.data.push(data);
    console.log(this.data);
   
    
    }, error => console.error(error));
  
  }
  
  refresh()
  {
  this.data.length=0;
   this.http.get('http://localhost/mypage.php').subscribe(data => {
  this.data.push(data);
    
    console.log(this.data);
   
    
    }, error => console.error(error));
  }
  deleteuser(id)
  {
    var myFormData = new FormData();
      myFormData.append('id', id);
    return this.http.post('http://localhost/mypage.php', myFormData).subscribe((res: Response) => {
      
      
      alert("User has been deleted successfully.");
      this.refresh();
        
    });
  }
  ngOnInit(): void {
  }

}

2. Here is the code, you just need to replace into your user.component.html file:

<table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
    <th>Phone</th>
    <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let mydata of data[0]">
        <td>{{mydata.id}}</td>
        <td>{{mydata.firstname}}</td>
    <td>{{mydata.email}}</td>
    <td>{{mydata.mobile}}</td>
    <td><button class="btn btn-danger" (click)="deleteuser(mydata.id)">Delete</button></td>
      </tr>
    </tbody>
  </table>

3. Here is php file updated code for delete query and you can replace the all file code with this:

<?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','','user');
if(isset($_POST['name']))
{
  $sql = "INSERT INTO userdata (firstname, email, mobile)
  VALUES ('".$_POST['name']."', '".$_POST['email']."', ".$_POST['phone'].")";

  if ($conn->query($sql) === TRUE) {
    $myJSON = json_encode("New user created successfully");
  } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
  }
}
elseif(isset($_POST['id']))
{
  // sql to delete a record
  $sql = "DELETE FROM userdata WHERE id=".$_POST['id'];

  if ($conn->query($sql) === TRUE) {
    $myJSON = json_encode("Record deleted successfully");
  } else {
    echo "Error deleting record: " . $conn->error;
  }
}
else
{
$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;
}

If you have any kind of query the please do comment below.

Jassa

Thanks