Angular 12 MEAN stack app

Welcome to a brand new MEAN stack project. Here, we are going to build an employee management application from scratch, with MEAN(MongoDB, Express, Angular, NodeJS) stack.

We are going to install and use MongoDB locally. So, head over to https://www.mongodb.com and go to Products -> Community Server.

Community Server

In the next page, click on the Download link and store it on local system.

Download

Most of the installation is straight forward on Windows. But, we will work with MongoDB as Network Service. So, in Service configuration, choose as below.

Server

Also, make sure that you keep the checkbox to “Install MongoDB Compass”.

With Compass

Once the installation is done, we can connect to Compass on our local system.

local system

Now, create a folder MEAN-app and then a folder backend inside it. We are going to start our backend project by giving the command npm init and pressing enter in all questions.

npm init

Now, we can add the dependencies required for the backend project with the below command.

npm i express body-parser mongoose nodemon cors

The first thing which we are going to create is db.js in the backend folder. Here, we are connecting to the local mongoDB database.

db.js

Now, when we will give the command nodemon db.js from command line, we will get this DB Connection Successful message.

nodemon

Now, create a file index.js and inside it add the dependencies first. We are also using the db.js created earlier.

We have also started this file using nodemon index.js command.

index.js

Now, we need to create a model which will contain the structure of the data. Create a folder models and a file employee.js inside it. Put the below content in it.

employee.js

Now, we are going to create the routes. Create a file routes.js inside a routes folder.

Here, we are first using the Employee model and after that we are creating a post route. This takes the name, position and dept and saves it inside the mongodb database.

routes.js

After that we will use this route in index.js file.

index.js

Now, it’s time to test our route in Postman. We will give a POST route and it is working properly.

POST route

We can also see the data been created in the local MogoDB instance.

MongoDB

Now, it’s time to create the GET API. It is almost similar to POST API, but we are using Employee.find to get all data. And we are also not sending any data to server.

routes.js

Now, the GET API can be tested from the browser also an we are doing the same.

GET Check

Now, we will create the API to get the details of a single employee. Here , we are taking the id after the / and finding the Employee by that id.

routes.js

Now, if we pass any id in Postman or browser for a single employee, we will get all the data.

Single Employee

Now, it’s time to create the DELETE route. It is almost similar to GET code for a single employee. Only the method changes.

routes.js

Now, we can delete the same from Postman.

Postman

Now, it’s time to work on the last API and that is PUT API. In this, we are using findByIdAndUpdate, to update the user data.

routes.js

Now, we can update any employee data from Postman.

Data

Now, we will create the frontend of the project. For this we will create an angular app in the MEAN-app folder.

New

After the installation is done, we will add bootstrap 4 in our project through the awesome ngx-bootstrap package.

ngx-bootstrap

Now, we will first create a new component employee by giving the below command from the frontend folder.

ng g c employee

Now, remove everything from app.component.html file and add a simple navbar and the employee component.

app.component.html

Now, in localhost we will see the nice navbar. But make sure ng serve is running in frontend folder.

localhost

Now, head over to employee.component.html file add the code for showing the header, an Add Employee button and card.

employee.component.html

After that we will show a Modal, which will be open when we click on Add Employee button.

employee.component.html

Now, we will add a form in the modal to take the user data.

employee.component.html

Now, our html part is complete and we will do the basic typescript part in employee.component.ts file.

Here, the code is for a basic reactive form.

employee.component.ts

We will also add the code for onAddEmployee and onCloseModal functions in employee.component.ts file..

employee.component.ts

Now, we will add the styles for our modal in employee.component.css file.

employee.component.css

Our HTML part is working well in localhost.

localhost

Now, we will add the logic to connect to the backend and complete our MEAN app. We will first create a model for employee as employee.model.ts in the app folder.

employee.model.ts

Now, we will create a service employee by giving the below command.

ng g s employee

Now, we will use HttpClient to hit our backend and do a post request in employee.service.ts file.

employee.service.ts

Now, one thing we forgot and that is to add HttpClientModule in app.module.ts file.

app.module.ts

Next, we will add the EmployeeService in employee.component.ts file and use it to POST data.

employee.component.ts

Now, when we post an employee from the frontend, we can see it back from the backend.

Data

We can also see the data been added in the database and available in the endpoint.

Data available

Now, we want to create a method to get all the employee. We will first create the service in employee.service.ts file.

employee.service.ts

Now, we will create a new employees variable in employee.component.ts file. After that we are creating getEmployees(), in which we are using the getEmployeeList service.

employee.component.ts

Now, we will use ngFor on employees to show all employees in employee.component.html file. We are also showing the Design and Development department in different colors.

employee.component.html

Now, we can add new employees and it is showing very good in localhost.

localhost

Now, we will add the method to delete an employee. We are again going to add a method first in employee.service.ts file.

employee.service.ts

Next, we will add an onDeleteEmployee function in employee.component.ts file. It is also confirming from the user before deleting.

employee.component.ts

Lastly, we will add this function in employee.component.html file and pass the id.

employee.component.html

Now, our delete is also working fine in localhost.

Localhost

Now, we have to do the Edit employee feature. We are again going to add a method first in employee.service.ts file.

employee.service.ts

Next, we will add an onEditEmployee function in employee.component.ts file. We are also updating the onEmpSubmit, where we are calling the updateEmployee or addEmployee depending on the editMode.

employee.component.ts

Lastly, we will add this function in employee.component.html file and pass the whole item. We are also using editMode to change some of the text in the modal.

employee.component.html

Now, our full stact MEAN app is complete and working properly. You can get the code for the same in this github repo.

MEAN

UI Lead- ReactJS, JavaScript and everything in-between.