Add, Edit and Delete Example Using Ng2-smart With Angular 13 -Part I

This is another smart table tutorial, I have already shared Smart Table Listing with pagination, sorting and searching Using Angular 1.4 and CRUD Functionality AngularJS 1.4 and Smart Table.

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

Now Angular version has updated and widely used angular12 and angular 12+.This smart table tutorial developed on angular 12+.We will create following function into this tutorials,

• Fetch records from server using rest API and Angular 4 HTTP client.
• Stored data into class variable and handle HTTP error using handler.
• Listing data into HTML table using ng2-smart-table.
• Enable sorting into smart table column.
• Enable and Disable Filtering into angular 4 smart table column.
• Adding Pagination into angular 4 smart table column.
• Actions Button for add, edit and delete row.

We will share CRUD operation with HTTP into next smart tutorial, We will use sample HTTP rest API to get data and display into angular 2/4 smart table tutorial.

I am using following files and folder

We will create and modify changes into below angularjs files.

• package.json : This file use to add third party libs like we will add bootstrap 4 package information.
• .angular-cli.json : Will add bootstrap css and js files path here.
• src/index.html : This file is use for html table container wrapper.
• src/models/app.employee.ts : We will define employee model interface.
• src/app/app.module.ts : We will use this file to import module.
• src/app/app.component.ts : We will use to define smart table component and configuration of them.

I am assuming, You have created a sample app of a smart table, if not please create and get help from Getting started with angular 13 tutorial.

We will open package.json and add bootstrap CSS package information into this file under 'dependencies' object:

"bootstrap": "^v4.0.0-alpha.6",
"ng2-smart-table": "^1.2.2"

We will run below command to install bootstrap 4 and ng2-smart table into modules folder,
npm update

We will add bootstrap css file into .angular-cli.json files,

"styles": [
	"styles.css",
	"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

We will inject ng2-smart and http client module into app.module.ts file.

import { HttpClientModule } from '@angular/common/http';
import { Ng2SmartTableModule } from 'ng2-smart-table';
....
imports: [
    BrowserModule,
	Ng2SmartTableModule,
	HttpClientModule
  ]

We will use ng2-smart table module in the component, We will include httpClient, employee Interface and HttpErrorResponse module in this file to access method/properties of module.

import {HttpClient} from '@angular/common/http';
import {HttpErrorResponse} from '@angular/common/http';
import { Employee } from '../models/app.employee';

HttpClient To Request Data

HttpClient is introduced in angular 4.3 and available into package @angular/common/http.The former name is HttpModule and new is re-implemented in HttpClient module. HttpClient is use to initiate Request and handle response in your application.

HttpClient will use the XMLHttpRequest browser API to execute HTTP request. You can use following type HTTP request using HttpClient module.

• GET
• POST
• PUT
• DELETE
• PATCH
• HEAD
• JSONP

We will create instance of HttpClient module and assigned in angular http variable in constructor method,

constructor(private https: HttpClient){
}

We will create HTTP get all associate data into variable,

data:any = [];
ngOnInit(): void {

      this.http.get<employee[]>('https://dummy.restapiexample.com/api/v1/employees').subscribe(
        data =&gt; {
          this.data = data;
          console.log(this.data);
      },
      (err: HttpErrorResponse) =&gt; {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
    }

I am using HttpErrorResponse module to handle HTTP errors, The HttpErrorResponse provides a more informative error on HTTP calls which will help to identify the root cause of Failed HTTP Call.

We will create employee Interface in app.module.ts file. We have used into HTTP get request to bind response with this.

import { Component } from '@angular/core';

export interface Employee {
      employee_name: string;
      employee_salary: number;
      employee_age: number;
    }

How to Use ng-smart-table with Angular 4

ng2-smart-table component help to create grid listing with sorting, filtering, pagination & CRUD(add/edit/delete) functionality.We will create smart table setting object that will have smart table configuration params like columns properties, sorting editable etc.

settings = {
  columns: {
    id: {
      title: 'ID',
      filter: false,
      editable: false,
      addable: false
    },
    employee_name: {
      title: 'Employee Name',
      filter: true
    },
    employee_age: {
      title: 'Age',
      filter: true
    },
    employee_salary: {
      title: 'Salary',
      filter: true
    }
  }
};

We will bind smart table component with app-root container.

@Component({
  selector: 'app-root',
  template: ''
})

Where
setting : This variable will have table and column level configuration parameters.
source : This variable will have source data records that will display in the smart table grid.

Conclusion:

We have integrated HTTP module to get data from rest api. We have also bind HTTP response with the interface to access data into the view file. ng2-smart table integrated with angular 4 and added pagination,sorting searching and filtering functionality.