Simplest Angular 4 CRUD Example [With Bootstrap 4 DataTable]

0

This article will help you to create a simple Angular 4 CRUD example with an integration of bootstrap 4 datatable.

Bootstrap 4 datatable provides almost every feature that you require to build a traditional CRUD app with Angular 4.

Bootstrap 4 is a latest version of bootstrap (a front-end web framework) that provides a tons of UI components to use in your web application.

So, let’s get started with a simple Angular 4 CRUD example.

Install and Setup Angular 4 App

First of all, let’s create a simple Angular 4 app.

I assume that you already have setup with Angular 4 if not, you should visit and set up your First Angular 4 Hello World app.

Note: Here please make sure that you’re using an Angular CLI version which is 1.4.x.

You can check Angular CLI version using command.

ng --version

Now, let’s create a new app using Angular CLI.

ng new angular4-crud-bootstrap-datatable

Related: Build Angular Apps Using Angular CLI

Now, you’re ready with the setup of your angular 4 app.

Install Bootstrap 4 In Angular 4 App

To install bootstrap 4 in our Angular 4 app, we need to install the bootstrap 4 NPM package.

cd angular4-crud-bootstrap-datatable
npm install bootstrap@4.0.0-beta.2

Also, by using bootstrap 4 you’ll be able to perform or add other native bootstrap components like Alerts, Progressbar, Forms, Tables and many more.

Moreover, below command is used to install the dependencies.

npm install

Next, let’s add the bootstrap CSS in index.html

<!--In head section Bootstrap and Font awesome CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Now, there’re few more bootstrap 4 dependencies that require adding in index.html

<!--In head section-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!--Popper js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<!--Bootstrap js-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

That’s it, now you’re ready to use Bootstrap 4 in your Angular 4 app.

Install Bootstrap 4 Datatable

Next, let’s install the bootstrap 4 datatable in our Angular 4 app.

npm install angular-4-data-table-bootstrap-4 --save

Next, we need to import DataTableModule and other needed dependencies in our main module to start using the datatable.

/src/app/app.module.ts

//Other dependencies..
import { CommonModule } from '@angular/common';
//Import forms module
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//Import datatable module
import { DataTableModule } from 'angular-4-data-table-bootstrap-4';

Here, don’t forget to add these modules in import sections as well.

@NgModule({
	declarations: [
    	AppComponent
  	],
	imports: [
    	BrowserModule,
    	CommonModule,
		FormsModule,
		ReactiveFormsModule,
		DataTableModule
  	],
	providers: [],
  	bootstrap: [AppComponent]
})
export class AppModule { }

All set, to use DataTable in your app now.

Now, just run your app once, to make sure the everything works fine.

ng serve

Now, let’s move to the actual example that provides CRUD operations with Angular 4.

Angular 4 CRUD Example

Here, we’re going to perform CRUD operations with Angular 4 app by integrating the bootstrap 4 datatable.

Note: Here, to make it a simple example, I’ve taken a static array and CRUD will be performed on that data only. These data are not going to interact with the database.

So, let’s get started with Angular 4 CRUD example.

First of all, we’ll define our app component to get ready with simple static array of data will be rendered to the datatable.

/src/app/app.component.ts

Now, let’s have the needed dependencies import in our app component.

//Import core modules
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
//Import form related modules
import { FormGroup, FormControl, Validators} from '@angular/forms';
//Import datatable resource
import { DataTableResource } from 'angular-4-data-table-bootstrap-4';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Next, let’s defined class with the static array of values.

In below class, you can see that we’ve taken a array as a persons. We’ll render this data in datatable.

Also, you can see few default datatable methods in the class.

export class AppComponent implements OnInit {
  title = 'Angular 4 CRUD Example Using Bootstrap Datatable';
  //Static data, you can change as per your need
  persons: any[] = [
	    {"id": "1", "name": "Aaron 2Moore", "jobTitle": "Regional Configuration Producer"},
	    { "id": "2","name": "Yvonne Conroy Mrs.", "jobTitle": "Global Mobility Orchestrator" },
	    { "id": "3","name": "Laron Padberg", "jobTitle": "Senior Directives Supervisor" },
	    { "id": "4","name": "Dr. Maryam Spinka", "jobTitle": "Dynamic Mobility Associate"},
	    { "id": "5","name": "Kiley Baumbach", "jobTitle": "Principal Metrics Orchestrator"},
	    { "id": "6","name": "Hollis MacGyver", "jobTitle": "Direct Markets Assistant"},
	    { "id": "7","name": "Axel McLaughlin", "jobTitle": "Forward Mobility Architect" },
	    { "id": "8","name": "Ricardo Botsford", "jobTitle": "Direct Quality Consultant"},
	    { "id": "10","name": "Corbin Funk Mrs.", "jobTitle": "Human Configuration Manager"},
	    { "id": "11","name": "Rosalind Paucek", "jobTitle": "Future Creative Supervisor"},
	    { "id": "12","name": "Henderson Moore", "jobTitle": "Internal Accountability Director"},
	    { "id": "13","name": "Kelli Schoen", "jobTitle": "National Accountability Architect" },
	    { "id": "14","name": "Kenna Fritsch", "jobTitle": "Legacy Response Administrator"},
	    { "id": "15","name": "Judge Marquardt", "jobTitle": "Human Program Specialist"},
	    { "id": "16","name": "Kurtis Hane", "jobTitle": "International Optimization Director" },
	    { "id": "17","name": "Nicolette Lind", "jobTitle": "Legacy Marketing Facilitator"},
	    { "id": "18","name": "Idella Green", "jobTitle": "Dynamic Division Orchestrator" },
	    { "id": "19","name": "Mackenzie Bartell", "jobTitle": "National Directives Associate" },
	    { "id": "20","name": "Mose Kohler", "jobTitle": "Lead Implementation Executive"},
	    { "id": "21","name": "Cielo Kuphal", "jobTitle": "Dynamic Division Analyst" },
	    { "id": "22","name": "Haleigh Stokes", "jobTitle": "Global Intranet Executive" },
	    { "id": "23","name": "Tyrese Walter", "jobTitle": "Senior Web Liason" },
	    { "id": "24","name": "Barney Shields", "jobTitle": "District Web Administrator"},
	    { "id": "25","name": "Favian Abbott Miss", "jobTitle": "Lead Implementation Facilitator" },
	    { "id": "26","name": "Carissa Kunze", "jobTitle": "Regional Division Technician"}
	];
	itemResource = new DataTableResource(this.persons);
	items = [];
	itemCount = 0;
	params = {offset: 0, limit: 10}; //Static can be changed as per your need

    constructor(){
      this.itemResource.count().then(count => this.itemCount = count);
      this.reloadItems(this.params);
    }  

    reloadItems(params) {
      this.itemResource.query(params).then(items => this.items = items);
    }

    // special properties:
    rowClick(rowEvent) {
        console.log('Clicked: ' + rowEvent.row.item.name);
    }

    rowDoubleClick(rowEvent) {
        alert('Double clicked: ' + rowEvent.row.item.name);
    }

	rowTooltip(item) { return item.jobTitle; }
}

Next, let’s define the HTML template to render the persons data in a datatable form

/src/app/app.component.html

Here, in the template you can see data-table will be rendered with the number of columns which we’re going to render.

Here, we’ll have two columns Name and JobTitle.

<data-table id="persons-grid"
    headerTitle="Angular 4 CRUD Example With Bootstrap 4 Datatable"
    [items]="items"
    [itemCount]="itemCount"
    (reload)="reloadItems($event)"

    (rowClick)="rowClick($event)"
    (rowDoubleClick)="rowDoubleClick($event)"
    [rowTooltip]="rowTooltip"
    >
    <data-table-column
        [property]="'name'"
        [header]="'Name'"
        [sortable]="true"
        [resizable]="true"
        >
    </data-table-column>
    <data-table-column
        [property]="'jobTitle'"
        [header]="'Job title'"
        [sortable]="true"
        >        
    </data-table-column>
</data-table>

Takeaways,

  • As you see, we can apply the options like sortable, resizable as a boolean value true or false as per your need.
  • Also, you can apply the property and header value for a column.

That’s it, here you can see the data-table which will populate the persons’ data in table form.

Now, we’ll peform CRUD operations on this data-table.

Add Custom Column Status (Active/In-active)

Let’s say, you want to add one custom column Active/In-active in your table, you can simply add that by using data-table-column.

Here, we’ve defined one more column for status named as Active.

Based on the status, this value will be populated for a particular row. i.e. Active or In-active.

<data-table-column
    [property]="'active'"
    [header]="'Active'"
    [width]="100"
    [resizable]="true">
    <template #dataTableHeader let-item="item">
        <span style="color: rgb(232, 0, 0)">Active</span>
    </template>
    <template #dataTableCell let-item="item">
        <span style="color: grey">
          <span class="fa fa-check" *ngIf="item.active"></span>
          <span class="fa fa-times" *ngIf="!item.active"></span>
        </span>
    </template>
</data-table-column>

Create Operation on Datatable

Now, let’s perform the create operation by allowing the user to add a row on fly.

Here, we already have bootstrap 4 installed. So, we can start using bootstrap components.

Let’s add a form and add button which will populate a modal popup that allows the user to add details.

First of all, we’ll have a button.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-edit-Modal">Add</button>

Now, let’s define a reactive form in component.

//Variables
userForm: FormGroup;
formFlag = 'add';

//Define form while init
ngOnInit(){
	this.userForm = new FormGroup({
	  'id': new FormControl(null),
	  'name': new FormControl(null, Validators.required),
	  'jobTitle': new FormControl(null, Validators.required)
	});
}
//Tell popup to open for add
initUser(){
	//User form reset
	this.userForm.reset();
	this.formFlag == 'add';
}

Here, we’ve defined a form with validations. Whenever user clicks on add button it will open a popup with a form.

Related

Here, don’t forget the define style elements for validations.

/src/app/app.component.css

input.ng-invalid.ng-touched {
	border: 1px solid red;
}
p.help-block{
	color: red !important;
}

<div class="modal fade" id="add-edit-Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" (click)="initUser()">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add/Edit Form</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
          </button>
        </div>
        <form [formGroup]="userForm" (ngSubmit)="saveUser(formFlag)">
        <div class="modal-body">
          <input type="hidden" class="input-sm form-control" formControlName="id">
          <div class="form-group">
            <input type="text" class="input-sm form-control" formControlName="name">
            <p class="help-block" *ngIf="!userForm.get('name').valid && userForm.get('name').touched">Please enter Name.</p>
          </div>
          <div class="form-group">
            <input type="text" class="input-sm form-control" formControlName="jobTitle">
            <p class="help-block" *ngIf="!userForm.get('jobTitle').valid && userForm.get('jobTitle').touched">Please enter Job Title.</p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" #modalClose data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary" [disabled]="!userForm.valid">Save changes</button>
        </div>
        </form>
      </div>
    </div>
</div>

Now, let’s define the saveUser method in component. So, whenever user submits the form the details will be gone here.

//Variable to close the modal after add called
@ViewChild('modalClose') modalClose:ElementRef;

//Save user's data
saveUser(){
        //Incremented ID
	this.userForm.value.id= this.persons.length + 1;
        //Prepend data
	this.persons.unshift(this.userForm.value);
        //Reload table manually
	this.reloadTableManually();
	//Close modal
	this.modalClose.nativeElement.click();
	//User form reset
	this.userForm.reset();
}

Here, whenever data submit, we have to reload the datatable. That’s why we’ve created a method to do that job.

//Reload table manually after add/edit
reloadTableManually(){
	this.reloadItems(this.params);
	this.itemResource.count().then(count => this.itemCount = count);
}

That’s it! you’re ready with the add method.

Note: As mentioned earlier, this data are not going to saved into database. It’s just for understanding the concept of CRUD operations with Angular 4 and build a simplest Angular 4 CRUD example for easy understanding. So, whenever you refresh the page, the data will be refreshed and it will render the original array defined into the components.

If you wanna save data using REST API and Firebase, you can follow tutorials mentioned below.

Now, let’s move to the Edit and Delete operatons quickly.

Add Actions Column (Edit/Delete)

Here, we’re going to add one more custom column in the table that is actions. It could perform Edit and Delete operations.

<data-table-column
      [property]="'Actions'"
      [header]="'Actions'">
      <template #dataTableCell let-item="item">
            <span style="color: rgb(232, 0, 0)">
            <a href="javascript:void(0);" (click)="getData(item)" data-toggle="modal" data-target="#add-edit-Modal">Edit</a>
            </span>
            <span style="color: rgb(232, 0, 0)">
            <a href="javascript:void(0);" (click)="delData(item)">Delete</a>
            </span>
      </template>
</data-table-column>

Now, let’s see how we define getData method in component, this will populate the form with the click row data.

//Get data while edit
getData(item)
{
	this.userForm.patchValue(item);
	this.formFlag = 'edit';
}

patchValue is default method of Angular 4 form that helps us to populate the default form values.

Now, we’ve to update the data when a user wants to save it. For that, we’ve made changes in already existing method saveUser.

//Save user's data
saveUser(){
	if(this.formFlag == 'add')
	{
		this.userForm.value.id= this.persons.length + 1;
		this.persons.unshift(this.userForm.value);
	}
	else
	{
		var index = this.persons.findIndex(x => x.id== this.userForm.value.id);
		if (index !== -1) {
		  this.persons[index] = this.userForm.value;
		}
	}
	this.reloadTableManually();
	//Close modal
	this.modalClose.nativeElement.click();
	//User form reset
	this.userForm.reset();
}

Importantly, we’re using a same form and same method to perform the add/edit operations.

It just a game of a flag formFlag which we’re using to switch between add and edit.

Finally, let’s go for the delete method.

//Delete user's data
delData(item){
	this.persons.splice(this.persons.indexOf(item), 1);
	this.reloadTableManually();
}

Here, we’ve used a splice method to delete a particular item by finding an index of a requested item.

After that, we need to reload the table manually to see the changes on fly.

That’s it, you’re ready with your Angular 4 CRUD example with bootstrap 4 datatable integration and you can find the code in Github repository.

Moreover, I hope you loved this article and it helped you to achieve the CRUD operations. Feel free to share your questions by commenting below.

Final words, don’t forget to share this simple Angular 4 CRUD example with your friends on below social media!

Leave a Reply

avatar
  Subscribe  
Notify of