Angular 12 MEAN stack app

8 min readOct 6, 2021

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.

You can also watch it on YouTube.

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

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

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.

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

Once the installation is done, we can connect to Compass on our 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.

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.

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

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.

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.

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.

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

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

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

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.

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

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.

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

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

Now, we can delete the same from 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.

Now, we can update any employee data from Postman.

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

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

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.

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

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

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

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

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.

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

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

Our HTML part is working well in 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.

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.

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

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

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

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

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

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.

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.

Now, we can add new employees and it is showing very good in 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.

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

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

Now, our delete is also working fine in localhost.

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

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.

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.

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

Angular 12 MEAN stack app

Written by Nabendu Biswas

No responses yet