Building a CRUD application in Angular 19 with MongoDB and Express

In modern web development, creating full-stack applications is a common practice to handle complex data and ensure smooth user experiences. One of the most popular ways to build such applications is by utilizing the power of Angular for the front end, MongoDB for the database, and Express for the back end. In this tutorial, we will walk you through the steps required to create a simple CRUD (Create, Read, Update, Delete) application using Angular 19, MongoDB, and Express. By the end, you’ll have a fully functioning application where you can manage data seamlessly.

Step 1: Setting Up the Environment
Before we dive into coding, let's set up the environment. You need to have Node.js, npm, MongoDB, and Angular CLI installed on your machine.

Install Node.js and npm:
- Go to the Node.js website and download the latest version of Node.js. npm (Node Package Manager) comes bundled with it.
Install MongoDB:
- Visit the MongoDB website to download and install MongoDB. For development purposes, you can use a local MongoDB instance or opt for a cloud-based service like MongoDB Atlas.
Install Angular CLI:
- Open your terminal and run:

npm install -g @angular/cli

Install Express:
- You can install Express in your back-end project later, but make sure you have Node.js set up correctly.

Step 2: Creating the Angular Project
Once your environment is set up, you can create the Angular application.

Open the terminal and navigate to the folder where you want to create your project. Run the following command:

ng new angular-crud-app

Choose the routing and stylesheet options when prompted. After this, navigate into the newly created project folder:

cd angular-crud-app

Start the development server:

ng serve

Your Angular application should now be running on http://localhost:4200.

Step 3: Setting Up the Back-End with Express and MongoDB
For the back end, we will use Express to handle API routes and MongoDB to store data.

Create a new folder for your back-end API and navigate to it.

mkdir backend && cd backend

Initialize a new Node.js project:

npm init -y

Install necessary packages:

npm install express mongoose cors body-parser

Create a file named server.js in the backend folder. This file will contain the Express server setup and routes to handle CRUD operations.
Set up MongoDB connection using Mongoose:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const PORT = 5000;

app.use(cors());
app.use(bodyParser.json());

// MongoDB connection
mongoose.connect('mongodb://localhost:27017/crudApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch((err) => console.log(err));

// Define schema for data
const ItemSchema = new mongoose.Schema({
  name: String,
  description: String
});

const Item = mongoose.model('Item', ItemSchema);

// Define routes
app.post('/add-item', async (req, res) => {
  const newItem = new Item(req.body);
  await newItem.save();
  res.status(201).send(newItem);
});

app.get('/items', async (req, res) => {
  const items = await Item.find();
  res.status(200).json(items);
});

app.put('/update-item/:id', async (req, res) => {
  const updatedItem = await Item.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.status(200).json(updatedItem);
});

app.delete('/delete-item/:id', async (req, res) => {
  await Item.findByIdAndDelete(req.params.id);
  res.status(204).send();
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Step 4: Integrating the Front-End and Back-End
Now that the back-end is ready, let's integrate the Angular front-end with the Express back-end.

In your Angular project, create a service that will interact with the Express API.
Inside the Angular app, generate a service:

ng generate service item

In the item.service.ts file, add the methods to call the API endpoints for CRUD operations:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemService {

  private apiUrl = 'http://localhost:5000';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    return this.http.get(`${this.apiUrl}/items`);
  }

  addItem(item: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/add-item`, item);
  }

  updateItem(id: string, item: any): Observable<any> {
    return this.http.put(`${this.apiUrl}/update-item/${id}`, item);
  }

  deleteItem(id: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/delete-item/${id}`);
  }
}

Use this service in your Angular components to manage the UI for adding, viewing, updating, and deleting items.

Step 5: Testing the Application
After integrating both the back-end and front-end, it’s time to test the application:

Ensure both the Angular and Express servers are running (Angular on port 4200 and Express on port 5000).
Open the Angular app in your browser (http://localhost:4200) and interact with the CRUD features.
Check the MongoDB database to ensure data is being correctly added, updated, and deleted.

Conclusion
By following the steps outlined above, you have successfully created a simple CRUD application using Angular 19, MongoDB, and Express. This full-stack application can be expanded with more complex features, authentication, or advanced UI components. The combination of these technologies provides a robust foundation for building modern web applications with scalable back-end and interactive front-end experiences.

Building a CRUD application in Angular 19 with MongoDB and Express

Related Tutorials