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