Categories

Friday, October 22, 2021
therichposts@gmail.com
Angular 8Angular 9MysqlPhp

Angular 9 Php Mysql Database Crud Part 3 – Delete User

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

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.

2 Comments

Leave a Reply

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