Add,Edit and Delete Example Using ng2-smart Table With Angular 13 -Part II

This angular 13 tutorial is the extended part of Add, Edit and Delete Example Using Ng2-smart With Angular 13 -Part I.

We will add CRUD operation into this smart table tutorial. This angular 13 and smart table tutorial will Add records into the MySQL database, edit records and update data into MySQL and delete records from a smart table.

As I already discussed, I am using ng2-smart table plugin for angular.js 13 Grid, So You can bind this tutorial code with angular 2 as well.

I have already shared Smart Table Listing with pagination,sorting and searching Using Angular 1.4 and CRUD Functionality Angular 1.4 and Smart Table.

Let’s start smart table create, update and delete record functionality with angular 13. I am assuming you have read my previous tutorial and have all code.

How to Create Record In smart-table Using Angular 13

We have added setting parameters into a smart table to display create, update and delete buttons against each row so that users can add records to the table.

I am using POST type restful API call to add a record into the MySQL database, So I will create an Angular 13 HTTP request to post newly created data into a server via rest call on click of create button.

First created an event on create button,
(createConfirm)="addRecord($event)"

The smart table will call addRecord() method on the occurrence of the createConfirm event.

We will bind this method into smart table 2/4 setting params,

add:{
     confirmCreate:true
}

We will add the above JSON param just below the column JSON object.

We will create addRecord() method, this method will take events as a parameter that will have new user-entered data. We passed new data to POST request and resolve the smart table promise to update the table and hide create row div.

addRecord(event) {
    var data = {"name" : event.newData.employee_name,
                "salary" : event.newData.employee_salary,
                "age" : event.newData.employee_age
                };
	this.http.post('/api/v1/create', data).subscribe(
        res => {
          console.log(res);
          event.confirm.resolve(event.newData);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
  }

How to Update/Edit Record In smart table 13

We have added create new record functionality using rest API and update into MySQL database. We will implement edit data functionality with this tutorial. You can see the edit link associated with each smart table row, So when You clicked edit button then row all values become editable and the save button will enable.

We will add functionality to update data into the MySQL table on-click of the save button.

Create an event on the save button, that will fire the update button would be clicked.
(editConfirm)="updateRecord($event)"

The smart table will call updateRecord() method on the occurrence of editConfirm event.

We will bind this method into smart table 13 setting params,

edit:{
     confirmSave:true
    }

We will add the above JSON param just below the add JSON object.

We will create updateRecord()method, this method will take events as parameters that will have updated employee data. We will pass updated data to the PUT rest API request, and finally resolve the smart table promise to update the table and hide the editable row.

updateRecord(event) {
    console.log('ddddd');
    var data = {"name" : event.newData.employee_name,
                "salary" : event.newData.employee_salary,
                "age" : event.newData.employee_age,
                "id" : event.newData.id
                };
  this.http.put('/api/v1/update/'+event.newData.id, data).subscribe(
        res => {
          console.log(res);
          event.confirm.resolve(event.newData);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
  }

How to Delete Record from smart table 13

We have added created a new record and edit the existing record functionality using restful API. We will add delete record functionality with rest API, which will delete data from the smart table as well as from the MySQL database.

We will add functionality to delete data into the MySQL table on-click of the delete button.

Create an event on the delete button,
(deleteConfirm)="deleteRecord($event)"

The smart table will call deleteRecord() method on the occurrence of deleteConfirm event.

We will bind this method into smart table 2/4 setting params,

delete :{
   confirmDelete: true
 }

We will add the above JSON param just below the edit JSON object.

We will create deleteRecord() method, this method will take the employee id as a parameter that you want to delete. We will pass the id to the DELETE request and resolve the smart table promise to update the table.

deleteRecord(event){
     console.log(event.data);
    this.http.delete('/api/v1/delete/'+event.data.id).subscribe(
        res => {
          console.log(res);
          event.confirm.resolve(event.source.data);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
    //event.confirm.resolve(event.source.data);

  }

Conclusion:

We have learned ng2-smart table integration with angular 13. You can also follow the same process to integrate with smart table with angular 2 js framework. Created TODO list of employee module to add, edit and delete record using restful API.