How to show MongoDB Collection Data in Angular 18 Frontend?

Hello friends, how are you? Welcome back to my blog therichpost.com. Today in this blog post, I am going to tell you, How to show MongoDB Collection Data in Angular 18 Frontend?

Angular 18 came . If you are new then you must check below two links:

• Angular 18 Basic Tutorials
• Angular Free Ecommerce Templates
• Bootstrap 5

Now guys here is the complete code snippet link and please follow carefully:

Setting up MongoDB with dummy records involves several steps. Here is a step-by-step guide to help you get started:

Step 1: Install MongoDB

1. Download MongoDB:

• Visit the MongoDB download center and download the version suitable for your operating system.
• Follow the installation instructions specific to your OS.

1. Install MongoDB:

• On Windows, run the installer and follow the instructions.
• On macOS, you can install MongoDB via Homebrew:
  sh brew tap mongodb/brew brew install mongodb-community@<version>
• On Linux, follow the instructions on the MongoDB installation page for your distribution.

1. Start MongoDB:

• On Windows, use the MongoDB Compass GUI or run the following command in your terminal:
  sh mongod
• On macOS and Linux, start the MongoDB service:
  sh brew services start mongodb/brew/mongodb-community
  or
  sh sudo systemctl start mongod

Step 2: Set Up MongoDB

1. Open MongoDB Shell:

• Open a terminal and run:
  sh mongo

1. Create a Database:

• In the MongoDB shell, create a new database:
  js use mydatabase

1. Create a Collection and Insert Dummy Records:

• Create a collection and insert some dummy records:
  js db.mycollection.insertMany([ { name: "John Doe", age: 30, city: "New York" }, { name: "Jane Smith", age: 25, city: "Los Angeles" }, { name: "Mike Johnson", age: 35, city: "Chicago" } ])

Step 3: Verify the Records

1. Query the Collection:

• Verify that the records have been inserted:
  js db.mycollection.find().pretty()

You should see output similar to this:

[
  {
    "_id": ObjectId("..."),
    "name": "John Doe",
    "age": 30,
    "city": "New York"
  },
  {
    "_id": ObjectId("..."),
    "name": "Jane Smith",
    "age": 25,
    "city": "Los Angeles"
  },
  {
    "_id": ObjectId("..."),
    "name": "Mike Johnson",
    "age": 35,
    "city": "Chicago"
  }
]

Optional: Use a GUI Tool

For easier management and visualization of your database, you can use a GUI tool like MongoDB Compass.

Example with Python

If you want to use Python to insert and manage dummy records, you can use the pymongo library:

1. Install pymongo:

   pip install pymongo

2. Python Script to Insert Dummy Records:

   from pymongo import MongoClient

   client = MongoClient('localhost', 27017)
   db = client.mydatabase
   collection = db.mycollection

   dummy_records = [
       {"name": "John Doe", "age": 30, "city": "New York"},
       {"name": "Jane Smith", "age": 25, "city": "Los Angeles"},
       {"name": "Mike Johnson", "age": 35, "city": "Chicago"}
   ]

   collection.insert_many(dummy_records)

   for record in collection.find():
       print(record)

This script connects to your MongoDB instance, creates a database and collection, inserts dummy records, and prints them to the console.

By following these steps, you’ll have MongoDB set up with dummy records for testing and development purposes.

To display MongoDB data in an Angular 18 standalone components frontend, you need to follow these steps:

1. Set up a backend server to fetch data from MongoDB and expose it via a REST API.
2. Set up the Angular frontend to consume the REST API and display the data.

Step 1: Set Up Backend Server

We’ll use Node.js with Express and Mongoose for the backend.

1. Create a new Node.js project:

   mkdir myapp-backend
   cd myapp-backend
   npm init -y

2. Install dependencies:

   npm install express mongoose cors

3. Create the backend server (server.js):

   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');

   const app = express();
   const port = 3000;

   // Middleware
   app.use(cors());
   app.use(express.json());

   // Connect to MongoDB
   mongoose.connect('mongodb://localhost:27017/mydatabase', {
     useNewUrlParser: true,
     useUnifiedTopology: true
   });

   // Define a schema and model
   const userSchema = new mongoose.Schema({
     name: String,
     age: Number,
     city: String
   });

   const User = mongoose.model('User', userSchema);

   // Define a route to fetch data
   app.get('/users', async (req, res) => {
     try {
       const users = await User.find();
       res.json(users);
     } catch (error) {
       res.status(500).send(error);
     }
   });

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

4. Run the backend server:

   node server.js

Step 2: Set Up Angular Frontend

1. Create a new Angular project:

   ng new myapp-frontend
   cd myapp-frontend

2. Install Angular HTTP client:

   ng add @angular/common@latest

3. Create a standalone component:

   ng generate component UserList --standalone

4. Create a service to fetch data (src/app/user.service.ts):

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

   export interface User {
     name: string;
     age: number;
     city: string;
   }

   @Injectable({
     providedIn: 'root',
   })
   export class UserService {
     private apiUrl = 'http://localhost:3000/users';

     constructor(private http: HttpClient) {}

     getUsers(): Observable<User[]> {
       return this.http.get<User[]>(this.apiUrl);
     }
   }

5. Update the standalone component to display data (src/app/user-list/user-list.component.ts):

   import { Component, OnInit } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { HttpClientModule } from '@angular/common/http';
   import { UserService, User } from '../user.service';

   @Component({
     selector: 'app-user-list',
     standalone: true,
     imports: [CommonModule, HttpClientModule],
     template: `
       <h1>User List</h1>
       <ul>
         <li *ngFor="let user of users">
           {{ user.name }} ({{ user.age }}), {{ user.city }}
         </li>
       </ul>
     `,
     styles: []
   })
   export class UserListComponent implements OnInit {
     users: User[] = [];

     constructor(private userService: UserService) {}

     ngOnInit(): void {
       this.userService.getUsers().subscribe((data) => {
         this.users = data;
       });
     }
   }

6. Update src/main.ts to bootstrap the standalone component:

   import { bootstrapApplication } from '@angular/platform-browser';
   import { UserListComponent } from './app/user-list/user-list.component';

   bootstrapApplication(UserListComponent)
     .catch(err => console.error(err));

Running the Application

1. Start the Angular frontend:

   ng serve

2. Visit http://localhost:4200 in your browser to see the user list displayed.

By following these steps, you will have set up a full-stack application with MongoDB as the database, an Express backend serving data via a REST API, and an Angular 18 frontend displaying the data using standalone components.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks