Tutusfunny

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

ng serve

ng g c search

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 { }

<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>

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;
        }

    });

  }


}