{"id":2730,"date":"2018-10-22T21:37:00","date_gmt":"2018-10-22T16:07:00","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=2730"},"modified":"2026-09-29T22:30:03","modified_gmt":"2026-09-29T17:00:03","slug":"how-to-create-a-signup-form-and-edit-the-details-using-angular2","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-create-a-signup-form-and-edit-the-details-using-angular2\/","title":{"rendered":"How to Create a Signup Form and Edit User Details Using Angular"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Post Date:<\/strong> October 22, 2018<br><strong>Last Updated:<\/strong> September 29, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Signup and profile forms are common requirements in web applications. A typical application needs to collect user information through a frontend form, send that data to a backend API, store it in a database, and allow users or administrators to edit the saved information later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The original version of this article demonstrated this workflow using <strong>Angular 2, the deprecated <code>@angular\/http<\/code> module, direct DOM access, PHP, and MySQL<\/strong>. Modern Angular applications use <strong>Reactive Forms and <code>HttpClient<\/code><\/strong>, while the backend should validate incoming data and use <strong>prepared SQL statements<\/strong> to protect the database.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this updated tutorial, we will build a simple user signup and edit workflow using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular<\/li>\n\n\n\n<li>Angular Reactive Forms<\/li>\n\n\n\n<li>Angular <code>HttpClient<\/code><\/li>\n\n\n\n<li>PHP<\/li>\n\n\n\n<li>MySQL<\/li>\n\n\n\n<li>REST-style API endpoints<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The example collects the following information:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name<\/li>\n\n\n\n<li>Gender<\/li>\n\n\n\n<li>Email<\/li>\n\n\n\n<li>Qualification<\/li>\n\n\n\n<li>Hobbies<\/li>\n\n\n\n<li>Phone number<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before starting, make sure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js and npm installed<\/li>\n\n\n\n<li>Angular CLI installed<\/li>\n\n\n\n<li>A supported Angular development environment<\/li>\n\n\n\n<li>PHP installed<\/li>\n\n\n\n<li>MySQL installed<\/li>\n\n\n\n<li>A web server such as Apache or Nginx with PHP support<\/li>\n\n\n\n<li>Basic knowledge of Angular, PHP, and SQL<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> Angular is continuously updated. The commands and APIs below follow the modern Angular approach rather than the Angular 2 APIs used in the original 2018 article.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Part 1: Create the Angular Application<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Create a New Angular Project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new Angular application:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng new user-management\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Move into the project directory:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd user-management\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Start the development server:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng serve\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Open the application in your browser:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">http:\/\/localhost:4200\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Generate the Signup Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a component for the user form:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng generate component signup\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This creates the component files under:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/app\/signup\/\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The main files include:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">signup.component.ts\nsignup.component.html\nsignup.component.css\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2: Create the Signup Form<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Configure Reactive Forms<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For a modern Angular application, Reactive Forms are preferable to directly reading values from HTML elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on your Angular project structure, import <code>ReactiveFormsModule<\/code> into the appropriate application\/module configuration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a standalone Angular application, the component can import the required functionality directly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { Component } from '@angular\/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular\/forms';\nimport { HttpClient } from '@angular\/common\/http';\n\n@Component({\n  selector: 'app-signup',\n  standalone: true,\n  imports: [ReactiveFormsModule],\n  templateUrl: '.\/signup.component.html'\n})\nexport class SignupComponent {\n\n  signupForm: FormGroup;\n\n  constructor(\n    private fb: FormBuilder,\n    private http: HttpClient\n  ) {\n    this.signupForm = this.fb.group({\n      name: ['', Validators.required],\n      gender: ['', Validators.required],\n      mail: ['', [Validators.required, Validators.email]],\n      qualification: ['', Validators.required],\n      hobbies: [''],\n      phone: ['', Validators.required]\n    });\n  }\n\n  submitForm(): void {\n    if (this.signupForm.invalid) {\n      this.signupForm.markAllAsTouched();\n      return;\n    }\n\n    this.http.post(\n      'http:\/\/localhost\/api\/signup.php',\n      this.signupForm.value\n    ).subscribe({\n      next: response => {\n        console.log('User created successfully', response);\n      },\n      error: error => {\n        console.error('Error creating user', error);\n      }\n    });\n  }\n}\n<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important:<\/strong> <code>HttpClient<\/code> replaces the old <code>@angular\/http<\/code> implementation used in Angular 2 applications.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Create the HTML Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Update <code>signup.component.html<\/code>:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1>Welcome to Our Website&lt;\/h1>\n\n&lt;h2>Please Enter Your Details&lt;\/h2>\n\n&lt;form [formGroup]=\"signupForm\" (ngSubmit)=\"submitForm()\">\n\n  &lt;div>\n    &lt;label for=\"name\">Name&lt;\/label>\n    &lt;input\n      id=\"name\"\n      type=\"text\"\n      formControlName=\"name\"\n    >\n  &lt;\/div>\n\n  &lt;div>\n    &lt;label for=\"gender\">Gender&lt;\/label>\n    &lt;input\n      id=\"gender\"\n      type=\"text\"\n      formControlName=\"gender\"\n    >\n  &lt;\/div>\n\n  &lt;div>\n    &lt;label for=\"mail\">Email&lt;\/label>\n    &lt;input\n      id=\"mail\"\n      type=\"email\"\n      formControlName=\"mail\"\n    >\n  &lt;\/div>\n\n  &lt;div>\n    &lt;label for=\"qualification\">Qualification&lt;\/label>\n    &lt;input\n      id=\"qualification\"\n      type=\"text\"\n      formControlName=\"qualification\"\n    >\n  &lt;\/div>\n\n  &lt;div>\n    &lt;label for=\"hobbies\">Hobbies&lt;\/label>\n    &lt;input\n      id=\"hobbies\"\n      type=\"text\"\n      formControlName=\"hobbies\"\n    >\n  &lt;\/div>\n\n  &lt;div>\n    &lt;label for=\"phone\">Phone Number&lt;\/label>\n    &lt;input\n      id=\"phone\"\n      type=\"tel\"\n      formControlName=\"phone\"\n    >\n  &lt;\/div>\n\n  &lt;button type=\"submit\">\n    Submit\n  &lt;\/button>\n\n&lt;\/form>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This approach allows Angular to manage the form state instead of using <code>document.getElementById()<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Part 3: Configure HttpClient<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Enable HttpClient<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Angular application needs <code>HttpClient<\/code> to communicate with the PHP backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a standalone Angular application, configure the application with <code>provideHttpClient()<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { ApplicationConfig } from '@angular\/core';\nimport { provideHttpClient } from '@angular\/common\/http';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient()\n  ]\n};\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The exact application configuration can vary depending on the Angular version and project structure.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 4: Create the MySQL Database<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Create the Database<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open MySQL:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mysql -u root -p\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Create the database:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">CREATE DATABASE user_management;\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Select the database:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">USE user_management;\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Create the Users Table<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a table for storing the signup information:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">CREATE TABLE users (\n    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,\n    name VARCHAR(100) NOT NULL,\n    gender VARCHAR(30) NOT NULL,\n    mail VARCHAR(255) NOT NULL,\n    qualification VARCHAR(150) NOT NULL,\n    hobbies VARCHAR(255),\n    phone VARCHAR(30),\n    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For a production application, additional constraints, indexes, and normalization may be appropriate depending on the application requirements.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 5: Create the PHP API<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Create the API Directory<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create an API directory on the PHP server:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">api\/\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">api\/\n\u251c\u2500\u2500 config.php\n\u251c\u2500\u2500 signup.php\n\u2514\u2500\u2500 update-user.php\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 9: Create the Database Connection<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">config.php\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Add:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\n$servername = \"localhost\";\n$dbname = \"user_management\";\n$username = \"app_user\";\n$password = \"CHANGE_THIS_PASSWORD\";\n\n$conn = new mysqli(\n    $servername,\n    $username,\n    $password,\n    $dbname\n);\n\nif ($conn->connect_error) {\n    http_response_code(500);\n    die(\"Database connection failed.\");\n}\n\n$conn->set_charset(\"utf8mb4\");\n<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Security Note:<\/strong> Do not commit database passwords to Git repositories. Production credentials should be stored securely through environment variables or a protected configuration mechanism.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 6: Create the Signup API<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Step 10: Create <code>signup.php<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">signup.php\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Add:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nheader('Content-Type: application\/json');\n\nrequire_once 'config.php';\n\n$data = json_decode(file_get_contents('php:\/\/input'), true);\n\n$name = trim($data['name'] ?? '');\n$gender = trim($data['gender'] ?? '');\n$mail = trim($data['mail'] ?? '');\n$qualification = trim($data['qualification'] ?? '');\n$hobbies = trim($data['hobbies'] ?? '');\n$phone = trim($data['phone'] ?? '');\n\nif ($name === '' || $gender === '' || $mail === '' || $qualification === '') {\n    http_response_code(400);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Required fields are missing.'\n    ]);\n\n    exit;\n}\n\nif (!filter_var($mail, FILTER_VALIDATE_EMAIL)) {\n    http_response_code(400);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Invalid email address.'\n    ]);\n\n    exit;\n}\n\n$stmt = $conn->prepare(\n    \"INSERT INTO users\n    (name, gender, mail, qualification, hobbies, phone)\n    VALUES (?, ?, ?, ?, ?, ?)\"\n);\n\n$stmt->bind_param(\n    \"ssssss\",\n    $name,\n    $gender,\n    $mail,\n    $qualification,\n    $hobbies,\n    $phone\n);\n\nif ($stmt->execute()) {\n\n    echo json_encode([\n        'success' => true,\n        'message' => 'User created successfully.',\n        'id' => $stmt->insert_id\n    ]);\n\n} else {\n\n    http_response_code(500);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Unable to create user.'\n    ]);\n}\n\n$stmt->close();\n$conn->close();\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The important difference from the original article is the use of a <strong>prepared statement<\/strong> rather than directly inserting user-controlled values into an SQL query.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 7: Edit Existing User Details<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating the signup form is only part of the workflow. Applications commonly need an edit operation so that existing user information can be updated.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 11: Create the Update API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">update-user.php\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nheader('Content-Type: application\/json');\n\nrequire_once 'config.php';\n\n$data = json_decode(file_get_contents('php:\/\/input'), true);\n\n$id = (int) ($data['id'] ?? 0);\n$name = trim($data['name'] ?? '');\n$gender = trim($data['gender'] ?? '');\n$mail = trim($data['mail'] ?? '');\n$qualification = trim($data['qualification'] ?? '');\n$hobbies = trim($data['hobbies'] ?? '');\n$phone = trim($data['phone'] ?? '');\n\nif ($id &lt;= 0) {\n    http_response_code(400);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Invalid user ID.'\n    ]);\n\n    exit;\n}\n\nif ($name === '' || $gender === '' || $mail === '' || $qualification === '') {\n    http_response_code(400);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Required fields are missing.'\n    ]);\n\n    exit;\n}\n\nif (!filter_var($mail, FILTER_VALIDATE_EMAIL)) {\n    http_response_code(400);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Invalid email address.'\n    ]);\n\n    exit;\n}\n\n$stmt = $conn->prepare(\n    \"UPDATE users\n     SET name = ?,\n         gender = ?,\n         mail = ?,\n         qualification = ?,\n         hobbies = ?,\n         phone = ?\n     WHERE id = ?\"\n);\n\n$stmt->bind_param(\n    \"ssssssi\",\n    $name,\n    $gender,\n    $mail,\n    $qualification,\n    $hobbies,\n    $phone,\n    $id\n);\n\nif ($stmt->execute()) {\n\n    echo json_encode([\n        'success' => true,\n        'message' => 'User details updated successfully.'\n    ]);\n\n} else {\n\n    http_response_code(500);\n\n    echo json_encode([\n        'success' => false,\n        'message' => 'Unable to update user details.'\n    ]);\n}\n\n$stmt->close();\n$conn->close();\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 8: Update the Angular Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The same Angular form can be reused for both creating and editing a user.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For an edit operation, populate the form with the existing user information:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">this.signupForm.patchValue({\n  name: user.name,\n  gender: user.gender,\n  mail: user.mail,\n  qualification: user.qualification,\n  hobbies: user.hobbies,\n  phone: user.phone\n});\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">When updating an existing user, include the user ID in the request:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const payload = {\n  id: userId,\n  ...this.signupForm.value\n};\n\nthis.http.put(\n  'http:\/\/localhost\/api\/update-user.php',\n  payload\n).subscribe({\n  next: response => {\n    console.log('User updated successfully', response);\n  },\n  error: error => {\n    console.error('Update failed', error);\n  }\n});\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 9: Handle CORS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If Angular and PHP are running on different origins during development, the browser may block the API request because of <strong>Cross-Origin Resource Sharing (CORS)<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Angular:\nhttp:\/\/localhost:4200\n\nPHP API:\nhttp:\/\/localhost\/api\/\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The PHP API can return an appropriate CORS header:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">header('Access-Control-Allow-Origin: http:\/\/localhost:4200');\nheader('Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS');\nheader('Access-Control-Allow-Headers: Content-Type, Authorization');\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For production, do not use:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Access-Control-Allow-Origin: *\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">unless it is intentionally required and appropriate for the application&#8217;s security model.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Restrict API access to the required trusted origins.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 10: Test the Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Start the Angular application:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng serve\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure the PHP API and MySQL service are also running.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">http:\/\/localhost:4200\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Enter the user information and submit the form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then verify the database:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">SELECT * FROM users;\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You should see the newly created record.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Angular Cannot Reach the PHP API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Check:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PHP web server status<\/li>\n\n\n\n<li>API URL<\/li>\n\n\n\n<li>Browser developer console<\/li>\n\n\n\n<li>Network tab<\/li>\n\n\n\n<li>CORS configuration<\/li>\n\n\n\n<li>PHP error logs<\/li>\n\n\n\n<li>Firewall rules<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Test the PHP endpoint directly:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">curl -i http:\/\/localhost\/api\/signup.php\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Database Connection Fails<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Check:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MySQL service status<\/li>\n\n\n\n<li>Database name<\/li>\n\n\n\n<li>Database username<\/li>\n\n\n\n<li>Database password<\/li>\n\n\n\n<li>MySQL permissions<\/li>\n\n\n\n<li>PHP MySQL extension<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php -m | grep mysqli\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CORS Error in the Browser<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If the browser reports a CORS error, verify that the PHP API returns the required CORS headers and that the Angular application&#8217;s origin is allowed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do not solve CORS issues by blindly allowing every origin in production.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Form Data Is Not Being Submitted<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Check the browser&#8217;s developer console and Network tab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verify that the Angular form contains:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[formGroup]=\"signupForm\"\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">and that the submit button is inside the form:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button type=\"submit\">\n  Submit\n&lt;\/button>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Also confirm that the form is valid before sending the request.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Security Recommendations<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">A signup or profile form handles user-provided information and should not rely only on frontend validation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validate Data on the Server<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular validation improves the user experience, but all important validation must also happen on the backend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use Prepared Statements<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Always use prepared SQL statements for user-controlled values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$sql = \"INSERT INTO users VALUES ('$name')\";\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Use prepared statements instead:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$stmt = $conn->prepare(\n    \"INSERT INTO users (name) VALUES (?)\"\n);\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Protect Database Credentials<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Do not commit credentials to Git:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">username = \"app_user\"\npassword = \"production-password\"\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Use environment variables or a protected server-side configuration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use HTTPS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Production applications should use HTTPS so that form submissions and API requests are encrypted in transit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Implement Authentication and Authorization<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The example demonstrates the form and API workflow only. A real profile-editing system should authenticate the user and verify that the authenticated user has permission to modify the requested record.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do not allow an unauthenticated API request to modify arbitrary user IDs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Modern Angular vs. the Original Angular 2 Implementation<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">The original article used several APIs and patterns that are no longer appropriate for modern Angular applications.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Original approach<\/th><th>Modern approach<\/th><\/tr><\/thead><tbody><tr><td>Angular 2<\/td><td>Current supported Angular releases<\/td><\/tr><tr><td><code>@angular\/http<\/code><\/td><td><code>@angular\/common\/http<\/code><\/td><\/tr><tr><td><code>Http<\/code><\/td><td><code>HttpClient<\/code><\/td><\/tr><tr><td>Direct <code>document.getElementById()<\/code><\/td><td>Reactive Forms<\/td><\/tr><tr><td>Manually building form parameters<\/td><td>Form model \/ JSON payload<\/td><\/tr><tr><td>Raw SQL values<\/td><td>Prepared statements<\/td><\/tr><tr><td>Client-side-only validation<\/td><td>Client + server validation<\/td><\/tr><tr><td>Hard-coded database credentials<\/td><td>Protected configuration<\/td><\/tr><tr><td>Simple PHP script<\/td><td>Validated API endpoint<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conclusion<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">The original Angular 2 example demonstrated the basic concept of collecting signup information and sending it to a PHP\/MySQL backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For modern applications, the same workflow should be implemented using <strong>Angular Reactive Forms, <code>HttpClient<\/code>, server-side validation, PHP APIs, and MySQL prepared statements<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The architecture can then be extended with authentication, authorization, user listing, profile editing, pagination, API error handling, audit logging, and stronger security controls.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Can I still use Angular 2 for this project?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular 2 is obsolete and should not be selected for a new application. Existing legacy applications should be evaluated for migration to a currently supported Angular version.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Why should I use Reactive Forms?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Reactive Forms provide structured form state and validation and are easier to maintain as an application becomes more complex.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Why was <code>document.getElementById()<\/code> removed from the example?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular applications should generally manage UI state through Angular&#8217;s component and form APIs rather than directly manipulating DOM elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Why should I use prepared statements?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Prepared statements separate SQL instructions from user-provided values and significantly reduce the risk of SQL injection.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Can Angular connect directly to MySQL?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. A browser-based Angular application should not connect directly to a MySQL database. A backend API should handle database communication.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Can the same form be used for signup and editing?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. The form can be populated with an existing user&#8217;s data using <code>patchValue()<\/code> and submitted to an update endpoint.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Related Articles<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-create-a-signup-form-and-edit-the-details-using-angular2\/\">How to create a Signup form and edit the details using Angular2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/laravel-angular2-setup-shows-empty-page-nginx\/\">How to Fix an Empty Angular Page with Laravel and Nginx<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Pheonix Solutions Can Help<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Need help modernizing a legacy Angular application or building a secure web application from the ground up? Pheonix Solutions can help with Angular development, API integration, PHP and MySQL development, application modernization, security, testing, cloud deployment, automation, and ongoing application support.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/pheonixsolutions.com\/contact\/\" data-type=\"link\" data-id=\"https:\/\/pheonixsolutions.com\/contact\/\">Connect with our technology expert<\/a>s<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: October 22, 2018Last Updated: September 29, 2026 Introduction Signup and profile forms are common requirements in web applications. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[453,452],"class_list":["post-2730","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-angular-signup","tag-signup-form-angular","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-I2","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=2730"}],"version-history":[{"count":1,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2730\/revisions"}],"predecessor-version":[{"id":12017,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2730\/revisions\/12017"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=2730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=2730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=2730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}