Angular CRUD without using API.

Angular is a popular and powerful JavaScript Framework, by using it we can built Web Applications. It’s an open source framework by Google and anyone can collaborate.

In this article we will see CRUD operation without using API’s, We will start this article as a tutorial to develop an CRUD, This will be a step-by-step guide.

Let’s see what exactly we are building.

Above image shows a table, and one button Add User, when we click on that button one popup will open like as below

Basically we are displaying some users data into the above table, and this is the form which we are using to create user and edit user data.

In this application i have added Bootstrap and Angular Material (https://material.angular.io/) for design.

lets see step by step,

Step 1: Create Angular Porject.

ng new angularCrud
cd angularCrud

now install bootstrap by using below CLI,

npm i bootstrap

add it in angular.json file inside styles and JS file into scripts.

"node_modules/bootstrap/dist/css/bootstrap.min.css"
"node_modules/bootstrap/dist/js/bootstrap.min.js"

now add Angular Material by using below CLI

ng add @angular/material

now run the project

ng serve

it will run on http://localhost:4200/

Step 2: Design the View.

Below is the project structure.

here we have two folders in side app folder, one is component and second one is services, in component folder we have two components one is userComponent and another one is addEditUserComponent, and in services we have one userService.

lets see what we have done in components and service.

first i have created userComponent by using below CLI

ng g c user

default bootstrap component is appComponent, remove all the html from app.component.html and use the selector of userComponent into app compoent like as below(line 1)

now it will display all the content inside userComponent, now will see what i have done in the userComponent.

In the above file i have added Angular material table.

In this file i have added openDialog() to open popup of user form, if you not aware about Angular material popup please see this link https://material.angular.io/components/dialog/overview

We have one more component addEditUserComponent, in this component we are displaying the form which we are using for create and edit user details.

Here we are using ReactiveForms as shown in above file.

In this file there is addUser() function, we are using it for add and edit user based on condition, passing condition from userComponent, if the condition is edit then it will update the particular index of user data otherwise if condition is not edit then it will add new user.

we have one more file user.service.ts, lets see what i have done in it, created by using angular CLI.

ng g s userService

In userService declared interface as shown in above file from line number(4–8), and we have define userDetails variable, now lets see the functions step by step,

getUser() — in this function we are returning the userDetails, so when we will import service in component, we need create an instance of service in constructor, then we can access this function in component. already we have attached both component file above, you can how we need to get data from service.

addUser() — in this we are adding/pushing data to userDetails variable, we are using this function inside addEditUserComponent as shown in above add-edit-user-component.ts file.

editUser() — in this function we are updating data in userDetails variable, here we will get index and data from addEditUserComponent, at given index existing data will be replaced with updated data which we are passing from form.

deleteUser() — in this function we are delete the user data at particular index, we are passing index from userComponent deleteUser function as shown in userComponent at line number 63.

So finally here we are done with CRUD operation.

We will make delete functionality more interactive, we will add a confirmation dialog which will ask YES or NO to delete the particular user details lets see,

Step 4 : Confirmation dialog for delete user.

Already i have shown the code in above files, lets see how its working.

In user.component.ts inside deleteUser() function from line(52–67),we have define one variable data with parameter action and value is ‘delete’ after that we are opening AddEditUserComponent and passing the data of data variable, it will open AddEditUserComponent and it will check for condition, we have written ccontent for confirmation dialog in add-edit-user.component.html file from line(31–38), we are displaying it is based on delete action condition by using *ngIf, there are two button YES & NO, when we click on YES button then only it will delete particular user details.