Node js Angular Mongodb Search Functionality

In this articles will teach how how to search records Node js Angular Express Mongodb.how the search functionality works.

Create the Node js Project using following command

npm init

Install the following dependencies

npm i mongoose
npm i express
npm install –save-dev nodemon

Server.js

const express = require('express')
const sever = express()
const port = 4000
var routes = require('./routes/routes');
var mongoose = require('mongoose');
mongoose.set('strictQuery', true);
mongoose.connect("mongodb://127.0.0.1:27017/dbschool",{useNewUrlParser: true,  useUnifiedTopology: true },function checkDb(error)
{
    if(error)
    {
        console.log(error);
    }
    else
    {
        console.log("successfully Connected to DB");
    }
});

sever.use(express.json());
sever.use(routes);
sever.listen(port, () => {
  console.log(`Express port successfully ${port}`)
})

routes.js

var express = require('express');
var userController = require('../src/employee/userController');

const router = express.Router();

router.route('/user/findOne/:name').get(userController.findOneUserController);

module.exports = router;

userController.js

var userService = require('./userService');

var findOneUserController = async (req, res) => 
{  
    console.log(req.params.name );
    var result = await userService.findOneUserDBService(req.params.name );

    if (result) {
        res.send({ "status": true, "data": result} );
    } else {
        res.send({ "status": false, "data": "User not found" });
    }
}

module.exports = { findOneUserController};

userModel.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var userSchema = new Schema({

    name: {
        type: String,
        required: true
    },
    address: {
        type: String,
        required: true
    },
    phone: {
        type: String,
        required: true
    }
   

});

module.exports = mongoose.model('employees', userSchema);

userService.js

var userModel = require('./userModel');

module.exports.findOneUserDBService = (userDetais) => {
    return new Promise(function myFn(resolve, reject) {
        userModel.findOne({name:userDetais}, function returnData(error, result) {
          if(error)
          {
                reject(false);
          }
          else
          {
             resolve(result);
          }
        });
 
    });
 
 }

Installing Angular CLI

npm install -g @angular/cli

After that create the new Project of Angular running by the following command

ng serve

then you have create the following components by typing the command

ng g c search

After that add module inside app.module.ts
inside the imports section add the FormsModule and HttpClientModule
if the path is not get automatically copy and paste it

import { HttpClientModule } from ‘@angular/common/http’;

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

search.component.html

<div class="container mt-4" >
    <div class="card">
            <h1>Search</h1>
            
    <form>
        <div class="form-group">
          <label>Name</label>
          
          <input type="text" [(ngModel)]="name" [ngModelOptions]="{standalone: true}"  class="form-control" id="name" placeholder="Enter Name">
          
          <button type="submit" class="btn btn-primary mt-4" (click)="Search()" >Search</button>
        </div>

    </form>


    <hr/>
    <br/>
        <div class="form-group">
            <label>address</label>
            <input type="text" [(ngModel)]="address" [ngModelOptions]="{standalone: true}"  class="form-control" id="address" placeholder="Enter address">
      
          </div>
      
          <div class="form-group">
            <label>Phone</label>
            <input type="text" [(ngModel)]="phone" [ngModelOptions]="{standalone: true}" class="form-control" id="phone" placeholder="Enter Mobile">
      
          </div>

      
    </div>
    <div>

search.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {

  name: string ="";
  address: string ="";
  phone: Number =0;
  
  constructor(private http: HttpClient )
  {
  
  }
 
  Search()
  {

  this.http.post("http://localhost:4000/user/findOne/" + this.name , {responseType: 'text'}).subscribe((resultData: any)=>
    {
      console.log(resultData);

        if(resultData.data =='User not found')
        {
            alert("Record Not Found")

        }
        else
        {
          
          this.address = resultData.data.address;
          this.phone  = resultData.data.phone;
        }

    });

  }


}