MongoDB server:

Command prompt 1:

Cd \

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongod.exe

Command prompt 2:

Cd\

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongo.exe
For Seneca Server:
Command Prompt 3:

Create folder:

1. mkdir <file name>

2. cd <created file name>
3. npm init
4. npm install Seneca Seneca-entity Seneca-mongo-store –save-dev

SenecaServerEmployeeOperations.js code:

const seneca = require("seneca")();

seneca
.use("seneca-entity")
.use("seneca-mongo-store", {
uri: "mongodb://localhost:27017/CN03SEPDB"
})
.quiet()
.use(require("./EmployeeOperationsPlugin"))
.listen({type:"http",port: 7000},() => {
console.log("Seneca Server istening on port 7000");
}
);
EmployeeOperationsPlugin.js:

module.exports = function employeesearch(options) {

//----------------------Search Employee on Employee No -------------------
---------------------

this.add({ component: "employeesearch", by: "empno" }, (args, respond) =>

{
console.log("Search By Empno Microservices Hit....");
console.log("Empno to be Searched = ",args.empno);
const employee = this.make("employee");
employee.list$({ empno: parseInt(args.empno) }, (err, emplist) => {
console.log("Employee Data Retrieved = ",emplist);
let result = {};
if(emplist.length == 0)
{
result.data = "Employee NOT Found";
}
else
{
result.data = emplist[0];
}
respond(null, {data: result });
});
});
 //----------------------Retrieve All Employees -----------------------
-----------------

this.add({ component: "employeesearch", by: "all" }, (args, respond)

=> {
console.log("Search By All Microservice Hit....");

const employee = this.make("employee");

employee.list$({}, (err, emplist) => {
console.log("Employees Data Retrieved = ",emplist);
let result = {};
if(emplist.length == 0)
{
result.data = "Employees NOT Found";
}
else
{
result.data = emplist;
}
respond(null, {data: result });
});
});
//======================FOR INSERTION OF EMPLOYEE======================//

this.add({ component: "insertemployee", by:"insert" }, (args, respond) => {

console.log("Seneca accessed for Insertion.....");

console.log("empno: ",args.empno);
console.log("empname: ",args.empname);
console.log("age: ",args.age);
console.log("salary: ",args.salary);

const employee = this.make("employee");

employee.empno=parseInt(args.empno);
employee.empname=args.empname;
employee.age=parseInt(args.age);
employee.salary=parseInt(args.salary);

employee.save$(function(error,e){
console.log("Employee Record Saved:",e);
respond(null,{data:e});
});
});
}

To see out put : node SenecaServerEmployeeOperations.js

Express gate way server:
Create a folder :

1. mkdir <filename>
2. cd <created file name>
3. npm init
4. npm express axios cors –save-dev

ExpressGateWayServer.js code:

let express = require('express');

let axios = require('axios');
let server = express(); // Express Server Created
let cors = require('cors');
const { response } = require('express');
server.use(cors()); // Permission Granted
//============= Search Employee By Empno =================================
server.get('/byempno',(req,res)=>{
console.log("Express Server accessed for Search by Empno")
let component = "employeesearch";
let by="empno";
console.log("Empno to be searched = ",req.query.empno);
let
url="http://localhost:7000/act?component="+component+"&by="+by+"&empno="+req.q
uery.empno;
console.log("URL for SenecaServer = ",url);
axios.get(url)
.then((responseFromSeneca)=>{
res.json(responseFromSeneca.data.data.data);
res.end();
})
.catch((err)=>{
console.log("Some Error = ",err);
})

});
//============= Fetch All Employees =================================
server.get('/byall',(req,res)=>{
console.log("Express Server accessed for Search by Empno")
let component = "employeesearch";
let by="all";
let url="http://localhost:7000/act?component="+component+"&by="+by;
console.log("URL for SenecaServer = ",url);
axios.get(url)
.then((responseFromSeneca)=>{
res.json(responseFromSeneca.data.data.data);
res.end();
})
.catch((err)=>{
 console.log("Some Error = ",err);
})
});

//========================INSERT
EMPLOYEE=====================================//

server.get('/saveemployee',(request,response)=>{

let component='insertemployee';
let by='insert';
let empno=request.query.empno;
let empname=request.query.empname;
let age=request.query.age;
let salary=request.query.salary;

let url=
"http://localhost:7000/act?component="+component+"&by="+by+"&empno="+empno+"&e
mpname="+empname+"&age="+age+"&salary="+salary;

axios.get(url)
.then((responseFromSeneca)=>{
response.json(responseFromSeneca.data.data.data);
response.end();
}
)
.catch((error)=>{
console.log("Error =",error);
})

});

//============================================================================
===
server.listen(3000 , ()=>{
console.log("Express Server Running on Port No 3000");
})
Angular:
Create a folder:

1.ng new <filename>

creating component:

2.ng g c <component name>

3.we have used four components

3.1.ng g c listallemployees

3.2.ng g c searchemployeebyempno

3.3 ng g c insertemployee

reating service component

4.ng g s <component name>

we have used one service component

5.ng g s employeeservice

app.component.html:
<div style="background-color: rgb(196, 81, 211);color: brown;text-align:
center;">
<br><br><br>
<h1>
<br><br><br>
App component
<br><br><br>
</h1>
<br><br><br>
<app-insertemployee></app-insertemployee>
<app-listallemployees></app-listallemployees>
<app-search-employeebyempno></app-search-employeebyempno>

</div>

app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular';
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SearchEmployeebyempnoComponent } from './search-
employeebyempno/search-employeebyempno.component';
import { ListallemployeesComponent } from
'./listallemployees/listallemployees.component';
import { FormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import { InsertemployeeComponent } from
'./insertemployee/insertemployee.component'

@NgModule({
declarations: [
AppComponent,
SearchEmployeebyempnoComponent,
ListallemployeesComponent,
InsertemployeeComponent
],
imports: [
BrowserModule,FormsModule,HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

listallemployees.component.html:
<div style="background-color: lightcoral;color: rgb(2, 18,
34);"align="center">
<br>
<h2>List of All Employees</h2>
<br>
<table border="3px solid">
<thead>
<tr>
<th align="center">Employee No</th>
<th align="center">Employee Name</th>
<th align="center">Employee Age</th>
<th align="center">Employee Salary</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of employees">
<td align="center">{{e.empno}}</td>
<td align="center">{{e.empname}}</td>
 <td align="center">{{e.age}}</td>
<td align="center">{{e.salary}}</td>
</tr>
</tbody>
</table>
<br>
<button (click)="getAllEmployees()">Retrieve and List All Employees </button>
<br><br>
</div>

listallemployees.component.ts:
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';

@Component({
selector: 'app-listallemployees',
templateUrl: './listallemployees.component.html',
styleUrls: ['./listallemployees.component.css']
})
export class ListallemployeesComponent implements OnInit {
employees:any;
constructor(private es:EmployeeService) { }

ngOnInit(): void {
}
getAllEmployees()
{
this.es.getAllEmployees().subscribe((empdata)=>{
this.employees = empdata;
})
}
}
search-employeebyempno.component.html:
<div style="background-color: greenyellow;color: indigo;text-align: center;">
<br>
<h2>Search Employee By Empno</h2>
<br>
Enter the Employee Number to be Searched : <input type="number"
[(ngModel)]="empno">
<br>
<button (click)="FetchEmployeeByEmpNo()">Search Employee on Empno</button>
<div align="center" style="font-size: 25px;color: honeydew;">
{{employee.empno}}<br>
{{employee.empname}}<br>
{{employee.age}}<br>
{{employee.salary}}<br>
</div>
</div>

search-employeebyempno.component.ts:
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';

@Component({
selector: 'app-search-employeebyempno',
templateUrl: './search-employeebyempno.component.html',
styleUrls: ['./search-employeebyempno.component.css']
})
export class SearchEmployeebyempnoComponent implements OnInit {
empno:any;
employee:any;
constructor(private es:EmployeeService) { }

ngOnInit(): void {
}
FetchEmployeeByEmpNo()
{
this.es.getEmployeeByEmpno(this.empno).subscribe((data)=>{
this.employee = data;
})

}
insertemployee.component.html:
i<div style="background-color: rgb(8, 48, 48);color: rgb(240, 228, 228);text-
align: center;">

<br><br><br>
<h1>
<br><br><br>
Insert Employee Component
<br><br><br>
Enter the Employee Id : <input type="number" [(ngModel)]="empno"><br>
Enter The Employee Name : <input type="text"
[(ngModel)]="empname"><br>
Enter the Employee Age : <input type="number" [(ngModel)]="age"><br>
Enter the Employee Salary: <input type="number"
[(ngModel)]="salary"><br>

<button (click)="saveemployee()">Save</button>
</h1>
<br><br><br>
</div>

insertemployee.component.ts:
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-insertemployee',
templateUrl: './insertemployee.component.html',
styleUrls: ['./insertemployee.component.css']
})
export class InsertemployeeComponent implements OnInit {
empno:any;
empname:any;
age:any;
salary:any;
constructor(private es:EmployeeService) { }
ngOnInit(): void {
}
saveemployee()
{
this.es.saveemployee(this.empno,this.empname,this.age,this.salary).subscri
be((data)=>{
alert("Employee Data Registered");
})
}
}
employee.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

constructor(private http:HttpClient) { }
getAllEmployees()
{
return this.http.get("http://localhost:3000/byall");
}
getEmployeeByEmpno(eno:any)
{
return this.http.get("http://localhost:3000/byempno/?empno="+eno);
}
saveemployee(eno:any,n:any,a:any,s:any){
return
this.http.get("http://localhost:3000/saveemployee/?empno="+eno+"&empname="+n+"
&age="+a+"&salary="+s);
}
}

To see output: ng s
MongoDB server:
Command prompt 1:

Cd \

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongod.exe

Command prompt 2:

Cd\

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongo.exe
For Seneca Server:
Command Prompt 3:

Create folder:

1. mkdir <file name>

2. cd <created file name>
3. npm init
4. npm install Seneca Seneca-entity Seneca-mongo-store –save-dev

SenecaServerOfferOperations.js code:

const seneca = require("seneca")();

seneca
.use("seneca-entity")
.use("seneca-mongo-store", {
uri: "mongodb://localhost:27017/CN03SEP"
})
.quiet()
.use(require("./OfferOperationsPlugin"))
.listen({type:"http",port: 7000},() => {
console.log("Seneca Server istening on port 7000");
}
);

OfferOperationsPlugin.js:

module.exports = function offersearch(options){

//---------------------Search offer on plan---------------------------
this.add({ component: "offersearch", by: "plan"}, (args, respond)=>{
console.log("Search by plan MicroServices Hit.........");
console.log("Plan to be Searched = ",args.plan);
const offer = this.make("offer");
offer.list$({plan: parseInt(args.plan) }, (err,offerlist)=>{
console.log("Offer Details Retrieved = ",offerlist);
let result = {};
if(offerlist.length == 0){
result.data = "Offer Not Found";
}
else{
result.data = offerlist[0];
}
respond(null, {data: result});
});
});

//--------------Retrieve All Offer-------------------------------------

this.add({component: "offersearch", by: "all"}, (args,respond)=>{
console.log("Retrieve by All offer microservices hit......");
const offer = this.make("offer");
 offer.list$({}, (err, offerlist)=>{
console.log("Offer Details Retrieved = ",offerlist);
let result = {};
if(offerlist.length == 0){
result.data = "Offer Not Found";
}
else{
result.data = offerlist;
}
respond(null, {data: result});
});
});

//--------------------------Insert new offer------------------------

this.add({component: "offersearch", by: "insert"}, (args,respond)=>{
console.log("Insert Offer MicroServices Hit......");
console.log("Id:",args._id);
console.log("Plan:",args.plan);
console.log("Data:",args.data);
console.log("Validity:",args.validity);
console.log("SMS:",args.SMS);
console.log("Category:",args.category);

const offer = this.make("offer");

offer._id = parseInt(args._id);
offer.plan = parseInt(args.plan);
offer.data = args.data;
offer.validity = args.validity;
offer.SMS= args.SMS;
offer.category = args.category;
offer.save$((err,result)=>{
if(err){
console.log("Some error in insertion");
}
else{
console.log("success");
}
respond(null, {data: result});
});
});

To see out put : node SenecaServerUserOperations.js

Express gate way server:
Create a folder :

1. mkdir <filename>
2. cd <created file name>
3. npm init
4. npm express axios cors –save-dev

ExpressGateWayServer.js:

let express = require('express');

let axios = require('axios');
let server = express();
let cors = require('cors');
server.use(cors());
//-----------------------------Search offer by plan---------------------------
-
server.get('/byplan',(req,res)=>{
console.log("Express Server accessed for Search by plan");
let component = "offersearch";
let by = "plan";
console.log("Plan to be searched = ",req.query.plan);
let url =
"http://localhost:7000/act?component="+component+"&by="+by+"&plan="+req.query.
plan;
console.log("URL for SenecaServer = ",url);
axios.get(url)
.then((responseFromSeneca)=>{
res.json(responseFromSeneca.data.data.data);
res.end();
})
.catch((err)=>{
console.log("Some Error = ",err);
})
});

//---------------------Retrieve all offer-------------------------

server.get('/byall',(req,res)=>{
console.log("Express Server accessed for all offer");
let component = "offersearch";
let by ="all";
let url= "http://localhost:7000/act?component="+component+"&by="+by;
console.log("Url for SenecaServer = ",url);
axios.get(url)
.then((responseFromSeneca)=>{
res.json(responseFromSeneca.data.data.data);
res.end();
})
.catch((err)=>{
 console.log("Some Error = ",err);
})
});
//-------------------------Insert in offer------------------
server.get('/saveoffer',(req,res)=>{
console.log("Express Server accessed for Insert new offer");
let component = "offersearch";
let by = "insert";
let _id = req.query._id;
let plan = req.query.plan;
let data = req.query.data;
let validity = req.query.validity;
let SMS = req.query.SMS;
let category = req.query.category;
console.log(_id,plan,data,validity,SMS,category);
let url =
"http://localhost:7000/act?component="+component+"&by="+by+"&_id="+_id+"&plan=
"+plan+"&data="+data+"&validity="+validity+"&SMS="+SMS+"&category="+category;
console.log("Url for SenecaServer = ",url);
axios.get(url)
.then((responseFromSeneca)=>{
console.log("Data Inserted");
console.log(responseFromSeneca.data.data.data);
res.json(responseFromSeneca.data.data.data);
res.end();
})
.catch((err)=>{
console.log("Some Error = ",err);
})
});

//============================================================================
===
server.listen(3000 , ()=>{
console.log("Express Server Running on Port No 3000");
})

To see out put: node ExpressGateWayServer.js

Angular:
Create a folder:

1.ng new <filename>

creating component:

2.ng g c <component name>

3.we have used four components

3.1.ng g c listalloffers

3.2.ng g c searchoffersbyplan

3.3 ng g c inserteoffers

creating service component

4.ng g s <component name>

we have used one service component

5.ng g s offerservice

app.component.html:

<div align="center">
<br><br><br>
<h1>Offer Operations</h1>
<br><br><br>
<app-insertoffer></app-insertoffer>
<br><br><br>
<app-listalloffer></app-listalloffer>
<br><br><br>
<app-searchofferbyplan></app-searchofferbyplan>
<br><br><br>
</div>

app.component.ts:
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myapp';
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ListallofferComponent } from './listalloffer/listalloffer.component';
import { SearchofferbyplanComponent } from
'./searchofferbyplan/searchofferbyplan.component';
import { InsertofferComponent } from './insertoffer/insertoffer.component';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
ListallofferComponent,
SearchofferbyplanComponent,
InsertofferComponent
],
imports: [
BrowserModule,FormsModule,HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

listalloffer.component.html:
<div align="center">
<br><br>
<h2>List of All the offers</h2>
<br><br>
<table border="3px solid">
<thead>
<tr>
<th align="center">Id</th>
<th align="center">Plan</th>
<th align="center">Data</th>
<th align="center">Validity</th>
<th align="center">SMS</th>
<th align="center">Category</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let o of offer">
<td align="center">{{o.id}}</td>
<td align="center">{{o.plan}}</td>
 <td align="center">{{o.data}}</td>
<td align="center">{{o.validity}}</td>
<td align="center">{{o.SMS}}</td>
<td align="center">{{o.category}}</td>
</tr>
</tbody>
</table>
<br>
<br>
<button (click)="getAllOffer()">Retrieve All offer</button>
<br><br>
</div>
listalloffer.component.ts:
import { Component, OnInit } from '@angular/core';
import { OfferService } from '../offer.service';

@Component({
selector: 'app-listalloffer',
templateUrl: './listalloffer.component.html',
styleUrls: ['./listalloffer.component.css']
})
export class ListallofferComponent implements OnInit {
offer:any;
constructor(private os:OfferService) { }

ngOnInit(): void {
}
getAllOffer(){
this.os.getAllOffer().subscribe((offdata)=>{
this.offer= offdata;
})
}

searchofferbyplan.component.html:
<div align="center">
<br><br>
<h2>Search Offer By Plan</h2>
<br><br>
Enter the Plan to be Searched : <input type="number" [(ngModel)]="plan">
<br>
<button (click)="getOfferbyPlan()">Search Offer by Plan</button>
<div align="center" style="background-color:indigo; font-size: 20px;">
{{offer._id}}<br>
{{offer.plan}}<br>
{{offer.data}}<br>
 {{offer.validity}}<br>
{{offer.SMS}}<br>
{{offer.category}}<br>
</div>
</div>
searchofferbyplan.component.ts:
import { Component, OnInit } from '@angular/core';
import { OfferService } from '../offer.service';

@Component({
selector: 'app-searchofferbyplan',
templateUrl: './searchofferbyplan.component.html',
styleUrls: ['./searchofferbyplan.component.css']
})
export class SearchofferbyplanComponent implements OnInit {
plan:any;
offer:any;
constructor(private os:OfferService) { }

ngOnInit(): void {
}
getOfferbyPlan(){
this.os.getOfferbyPlan(this.plan).subscribe((data)=>{
this.offer=data;
})
}
}

insertoffer.component.html:
<div align="center">
<br><br>
<h2>Insert New Offer Detail</h2>
<br><br>
<pre>
Enter Id : <input type="number" [(ngModel)]="_id">
Enter Plan value : <input type="number" [(ngModel)]="plan">
Enter Data Pack : <input type="text" [(ngModel)]="data">
Enter Validity of the pack : <input type="text" [(ngModel)]="validity">
Enter Number of SMS : <input type="number" [(ngModel)]="SMS">
Enter Category of Connection : <input type="string" [(ngModel)]="category">
<button (click)="saveOffer()">Save</button>
</pre>
<div>
{{ result }}
</div>
<br><br>
</div>
insertoffer.component.ts:
import { Component, OnInit } from '@angular/core';
import { OfferService } from '../offer.service';

@Component({
selector: 'app-insertoffer',
templateUrl: './insertoffer.component.html',
styleUrls: ['./insertoffer.component.css']
})
export class InsertofferComponent implements OnInit {
_id:any;
plan:any;
data:any;
validity:any;
SMS:any;
category:any;
result:any;
constructor(private os:OfferService) { }

ngOnInit(): void {
}
saveOffer(){
this.os.saveOffer(this._id,this.plan,this.data,this.validity,this.SMS,this
.category).subscribe((data)=>{
this.result= "Save Successfully!!!!";
});
}
}

offer.service.ts:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

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

constructor(private http:HttpClient) { }
getAllOffer(){
return this.http.get("http://localhost:3000/byall");
}

getOfferbyPlan(plan:any){
return this.http.get("http://localhost:3000/byplan/?plan="+plan);
}
 saveOffer(_id:any, plan:number, data:any, validity:any, SMS:number,
category:string){
return
this.http.get("http://localhost:3000/saveoffer/?_id="+_id+"&plan="+plan+"&data
="+data+"&validity="+validity+"&SMS="+SMS+"&category="+category);
}
}

To see out put: ng s

MongoDB server:
Command prompt 1:

Cd \

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongod.exe

Command prompt 2:

Cd\

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongo.exe
For Seneca Server:
Command Prompt 3:

Create folder:

1. mkdir <file name>

2. cd <created file name>
3. npm init
4. npm install Seneca Seneca-entity Seneca-mongo-store –save-dev

SenecaServerProductOperations.js:
const seneca = require("seneca")();
seneca
.use("seneca-entity")
.use("seneca-mongo-store", {
uri: "mongodb://localhost:27017/CN03SEP"
})
.quiet()
.use(require("./ProductOperationsPlugin"))
.listen({type:"http",port: 7000},() => {
console.log("Seneca Server istening on port 7000");
}
);

ProductOperationsPlugin.js:
module.exports = function productsearch(options) {
//----------------------Search Product on Product NO ---------------------
-------------------

this.add({ component: "productsearch", by: "productno" }, (args, respond)

=> {
console.log("Search By Productno Microservices Hit....");
console.log("Empno to be Searched = ",args.empno);
const product = this.make("product");
product.list$({ productno: parseInt(args.productno) }, (err,
productlist) => {
console.log("Product Data Retrieved = ",productlist);
let result = {};
if(productlist.length == 0)
{
result.data = "Product NOT Found";
}
else
{
result.data = productlist[0];
}
respond(null, {data: result });
 });
});
//----------------------Retrieve All Product -------------------------
---------------

this.add({ component: "productsearch", by: "all" }, (args, respond) =>

{
console.log("Search By All Microservice Hit....");

const product = this.make("product");

product.list$({}, (err, productlist) => {
console.log("Products Data Retrieved = ",productlist);
let result = {};
if(productlist.length == 0)
{
result.data = "Product NOT Found";
}
else
{
result.data = productlist;
}
respond(null, {data: result });
});
});

//--------------------------Insert new Product------------------------

this.add({component: "productsearch", by: "insert"}, (args,respond)=>{
console.log("Insert Offer MicroServices Hit......");
console.log("ProductNo:",args.productno);
console.log("Productname:",args.productname);
console.log("Manufacturer:",args.manufacturer);
console.log("Price:",args.price);

const product = this.make("product");

product.productno = parseInt(args.productno);
product.productname = args.productname;
product.manufacturer = args.manufacturer;
product.price = parseInt(args.price);

product.save$((err,result)=>{
if(err){
console.log("some error in insertion");
}
else{
console.log("success");
}
respond(null, {data: result });
});
 });

};
//============================================================================
====================

To see out put : node SenecaServerUserOperations.js

Express gate way server:

Create a folder :

1. mkdir <filename>
2. cd <created file name>
3. npm init

npm express axios cors –save-dev

ExpressGateWayServer.js:
module.exports = function productsearch(options) {
//----------------------Search Product on Product NO ---------------------
-------------------

this.add({ component: "productsearch", by: "productno" }, (args, respond)

=> {
console.log("Search By Productno Microservices Hit....");
console.log("Empno to be Searched = ",args.empno);
const product = this.make("product");
product.list$({ productno: parseInt(args.productno) }, (err,
productlist) => {
console.log("Product Data Retrieved = ",productlist);
let result = {};
if(productlist.length == 0)
{
result.data = "Product NOT Found";
}
else
{
result.data = productlist[0];
}
respond(null, {data: result });
});
});
//----------------------Retrieve All Product -------------------------
---------------

this.add({ component: "productsearch", by: "all" }, (args, respond) =>

{
console.log("Search By All Microservice Hit....");
 const product = this.make("product");
product.list$({}, (err, productlist) => {
console.log("Products Data Retrieved = ",productlist);
let result = {};
if(productlist.length == 0)
{
result.data = "Product NOT Found";
}
else
{
result.data = productlist;
}
respond(null, {data: result });
});
});

//--------------------------Insert new Product------------------------

this.add({component: "productsearch", by: "insert"}, (args,respond)=>{
console.log("Insert Offer MicroServices Hit......");
console.log("ProductNo:",args.productno);
console.log("Productname:",args.productname);
console.log("Manufacturer:",args.manufacturer);
console.log("Price:",args.price);

const product = this.make("product");

product.productno = parseInt(args.productno);
product.productname = args.productname;
product.manufacturer = args.manufacturer;
product.price = parseInt(args.price);

product.save$((err,result)=>{
if(err){
console.log("some error in insertion");
}
else{
console.log("success");
}
respond(null, {data: result });
});
});

};
//============================================================================
====================

To see out put: node ExpressGateWayServer.js

Angular:
Create a folder:

1.ng new <filename>

creating component:

2.ng g c <component name>

3.we have used four components

3.1.ng g c listallproducts

3.2.ng g c searchproductbyproductno

3.3 ng g c insertproduct

creating service component

4.ng g s <component name>

we have used one service component

5.ng g s productservice

app.component.html:
<div align="center">
<br><br><br>
<h1>App Component</h1>
<br><br><br>
<app-insertproduct></app-insertproduct>
<br><br><br>

<app-listallproducts></app-listallproducts>
<br><br><br>
<app-searchproductbyproductno></app-searchproductbyproductno>
<br><br><br>
</div>

app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myapp';
}
app.module.ts:
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ListallproductsComponent } from
'./listallproducts/listallproducts.component';
import { SearchproductbyproductnoComponent } from
'./searchproductbyproductno/searchproductbyproductno.component';
import { InsertproductComponent } from
'./insertproduct/insertproduct.component';
@NgModule({
declarations: [
AppComponent,
ListallproductsComponent,
SearchproductbyproductnoComponent,
InsertproductComponent
],
imports: [
BrowserModule, FormsModule,HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

listallproducts.component.html:
<div align="center">
<br>
<h2>List of All Products</h2>
<br>
<table border="3px solid">
<thead>
<tr>
<th align="center">Product No</th>
<th align="center">Product Name</th>
<th align="center">Manufacturer</th>
<th align="center">Price</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of product">
<td align="center">{{p.productno}}</td>
<td align="center">{{p.productname}}</td>
<td align="center">{{p.manufacturer}}</td>
 <td align="center">{{p.price}}</td>
</tr>
</tbody>
</table>
<br>
<button (click)="getAllProducts()">Retrieve and List All Products </button>
<br><br>
</div>

listallproducts.component.ts:
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
selector: 'app-listallproducts',
templateUrl: './listallproducts.component.html',
styleUrls: ['./listallproducts.component.css']
})
export class ListallproductsComponent implements OnInit {
product:any;
constructor(private ps:ProductService) { }

ngOnInit(): void {
}
getAllProducts(){
this.ps.getAllProducts().subscribe((prodata)=>{
this.product = prodata;
})
}

}
searchproductbyproductno.component.html:
<div align="center">
<br>
<h2>Search Product by ProductNo</h2>
<br>
Enter the Product Number to be Searched : <input type="number"
[(ngModel)]="productno">
<br>
<button (click)="getProductbyProductNo()">Search Product on
ProductNo</button>
<div align="center" style="font-size: 25px;color: honeydew;">
{{product.productno}}<br>
{{product.productname}}<br>
{{product.manufacturer}}<br>
{{product.price}}<br>
</div>
</div>

searchproductbyproductno.component.ts:
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
selector: 'app-searchproductbyproductno',
templateUrl: './searchproductbyproductno.component.html',
styleUrls: ['./searchproductbyproductno.component.css']
})
export class SearchproductbyproductnoComponent implements OnInit {
product: any;
productno: any;
constructor(private ps:ProductService) { }

ngOnInit(): void {
}
getProductbyProductNo(){
this.ps.getProductbyProductNo(this.productno).subscribe((data)=>{
this.product = data;
})
}

}
insertproduct.component.html:
<div align="center">
<br><br>
<h2>Insert New Product</h2>
<br><br>
<pre>
Enter Product Number : <input type="number" [(ngModel)]="productno">
Enter Product Name : <input type="text" [(ngModel)]="productname">
Enter Manufacturer Name : <input type="text" [(ngModel)]="manufacturer">
Enter price : <input type="number" [(ngModel)]="price">
<button (click)="saveProduct()">Save</button>
</pre>
<div>
{{ result }}
</div>
<br><br>
</div>
insertproduct.component.ts:
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
selector: 'app-insertproduct',
templateUrl: './insertproduct.component.html',
styleUrls: ['./insertproduct.component.css']
})
export class InsertproductComponent implements OnInit {
result:any;
productno:any;
productname:any;
manufacturer:any;
price:any;
constructor(private ps:ProductService) { }

ngOnInit(): void {
}
saveProduct(){
this.ps.saveProduct(this.productno,this.productname,this.manufacturer,this
.price).subscribe((data)=>{
this.result= "Save Successfully!!!!";
});
}

}
product.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

constructor(private http:HttpClient) { }

getAllProducts(){
return this.http.get("http://localhost:3000/byall");
}

getProductbyProductNo(productno:any){
return
this.http.get("http://localhost:3000/byproductno/?productno="+productno);
}

saveProduct(productno:any, productname:string, manufacturer:string,

price:any){
return
this.http.get("http://localhost:3000/saveproduct/?productno="+productno+"&prod
uctname="+productname+"&manufacturer="+manufacturer+"&price="+price);
}
}

To see out put: ng s

MongoDB server:
Command prompt 1:

Cd \

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongod.exe

Command prompt 2:

Cd\

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongo.exe
For Seneca Server:
Command Prompt 3:

Create folder:

1. mkdir <file name>

2. cd <created file name>
3. npm init
4. npm install Seneca Seneca-entity Seneca-mongo-store –save-dev

SenecaServerUserOperations.js code:

const seneca = require("seneca")();

seneca
.use("seneca-entity")
.use("seneca-mongo-store", {
uri: "mongodb://localhost:27017/onlinebookdb"
})
.quiet()
.use(require("./UserOperationsPlugin"))
.listen({type:"http", port: 7000}, () => {
console.log("Seneca Server listening on port 7000");
});
UserOperationsPlugin.js code:
module.exports = function usersearch(options) {

//------------------------------------- Search UserName ------------------

--------------------
this.add({component: "usersearch", by: "username" }, (args, respond) => {
console.log("Search By UserName Microservice Hit....");
console.log("Username to be Searched = ", args.username);
const users = this.make("users");
users.list$({ username: args.username}, (err, userlist) => {
if(err)
{
console.log("ERRORRR!!");
}
console.log("User data retrieved = ", userlist);
let result = {};
if(userlist.length == 0)
{
result.data = "Not Found";
}
else
{
result.data = userlist[0];
}
respond(null, {data: result});
});
 });

//---------------------------------- Insert Record -----------------------

---------------------
this.add({component: "userinsert", by: "insert"}, (args, respond) => {
console.log("Insert Users Microservice Hit....");

console.log("Name", args.name);
console.log("Username", args.username);
console.log("Password", args.password);
console.log("Email:", args.email);

const users = this.make("users");

users.name = args.name;
users.username = args.username;
users.password = args.password;
users.email = args.email;

users.save$(function(err, u) {
console.log("User Record Saved : ", u);
respond(null, {data: u});
});
});
};

To see out put : node SenecaServerUserOperations.js

Express gate way server:

Create a folder :
1. mkdir <filename>
2. cd <created file name>
3. npm init
4. npm express axios cors –save-dev

ExpressGateWayServer.js code:

let express = require('express');

let axios = require('axios');

let app = express();

let cors = require('cors');

app.use(cors());

//---------------------------------------- Search Username -------------------

-------
app.get('/byusername', (req,res)=> {
console.log("Express Server accessed for Search by UserName...");
 let component = "usersearch";
let by = "username";

console.log("Username to be searched =", req.query.username);

let url =
"http://localhost:7000/act?component="+component+"&by="+by+"&username="+req.qu
ery.username;
axios.get(url)
.then((responseFromSeneca)=> {
console.log("Data Found...!");
console.log(responseFromSeneca.data.data.data);
res.json(responseFromSeneca.data.data.data);
res.end();
})
.catch((err)=> {
console.log("Some Error = ", err);
})
});

//------------------------------------------- Insert User --------------------

-------------------
app.get('/saveuser', (req,res)=> {
console.log("Express Server accessed for Inserting users");
let component = "userinsert";
let by="insert";

let url =
"http://localhost:7000/act?component="+component+"&by="+by+"&name="+req.query.
name+"&username="+req.query.username+"&password="+req.query.password+"&email="
+req.query.email;
console.log("URL for SenecaServer = ", url);
axios.get(url)
.then((responseFromSeneca)=> {
console.log("Data Inserted...");
console.log(responseFromSeneca.data.data);
res.json(responseFromSeneca.data.data);
res.end();
})
.catch((err)=> {
console.log("Some Error = ", err);
})
});
app.listen(3000, ()=> {
console.log("Express Server Running on Port No 3000");
})

To see out put: node ExpressGateWayServer.js

Angular:
Create a folder:

1.ng new <filename>

creating component:

2.ng g c <component name>

3.we have used four components

3.1.ng g c books

3.2.ng g c catalog

3.3.ng g c login

3.4.ng g c register

creating service component

4.ng g s <component name>

we have used one service component

5.ng g s userservice

app.component.html:
<h1 align="center">Galaxy Book Store</h1>
<hr>
<br>
<div>
<router-outlet></router-outlet>
</div>

app.component.ts:
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myapp';
}
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BooksComponent } from './books/books.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [

{ path: '', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'ebook', component: BooksComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

login.component.html:
<!-- <p>login works!</p> -->
<!-- <div class="parent"> -->
<div class="center">
<br>
User Name:<br>
<input type="text" [(ngModel)]="username"><br><br>
Password:<br>
<input type="password" [(ngModel)]="password"><br><br><br>
<button (click)="login()">Login</button><br><br>
New User <a routerLink="/register">Click here</a>
<br><br>
</div>
<!-- </div> -->
login.component.ts:
import { Component, OnInit } from '@angular/core';
import { UserServiceService } from '../user-service.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

username: any;
password: any;
users: any;
constructor(private us: UserServiceService,
private router: Router) { }

ngOnInit(): void {
}
login()
{
this.us.getDetails(this.username).subscribe((data)=> {
//console.log(data);
if(data == "Not Found")
{
alert("Invalid Username/Password");
}
else
{
this.users = data;
//console.log(this.users.password);

if(this.password == this.users.password)
{
//console.log("true");
this.router.navigate(['ebook']);
}
else
{
alert("Invalid Credentials");
}
}
})
}

}
register.component.html:
<!-- <p>register works!</p> -->
<h2 align="center">Registration Form</h2>

<div>
<pre align="center">
Full Name: <input type="text" [(ngModel)]="fname"><br>
User Name: <input type="text" [(ngModel)]="uname"><br>
Password: <input type="password" [(ngModel)]="pwd"><br>
Confirm Password: <input type="password" [(ngModel)]="cpwd"><br>
Email: <input type="email" [(ngModel)]="mail">
<br>
<button (click)="save()">Submit</button>
</pre>
</div>

register.component.ts:
import { Component, OnInit } from '@angular/core';
import { UserServiceService } from '../user-service.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

fname: any;
uname: any;
pwd: any;
cpwd: any;
mail: any;

constructor(private us: UserServiceService,

private router: Router ) { }

ngOnInit(): void {
}

save()
{
if(this.pwd == this.cpwd)
 {
this.us.insertRecord(this.fname, this.uname, this.pwd,
this.mail).subscribe((data)=> {
//console.log(data);
alert("Thank you for registering!!!!");
this.router.navigate(['']);

})
}
else
{
alert("Password doesn't match");
}
}
}

books.component.html:
<!-- <p>books works!</p> -->
<app-catalog></app-catalog>

books.component.ts:
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
catalog.component.html:
<!-- <p>catalog works!</p> -->

<div class="card" style="width: 18rem;" *ngFor="let b of book">

<img src='{{ b.imgUrl }}' class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text" align="center"> {{ b.text }} </p>
</div>
</div>

catalog.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-catalog',
templateUrl: './catalog.component.html',
styleUrls: ['./catalog.component.css']
})
export class CatalogComponent implements OnInit {
imgUrl: any;
text: any;
constructor() { }

ngOnInit(): void {
}
book = [
{
imgUrl: 'https://4.imimg.com/data4/VO/DP/MY-3816229/harry-potter-and-
the-cursed-child-parts-i-500x500.jpg',
text: 'Rs 345'
},
{
imgUrl: 'https://images-na.ssl-images-
amazon.com/images/I/41j1x70+n2L._SY344_BO1,204,203,200_.jpg',
text: 'Rs 430'
},
{
imgUrl: 'https://m.media-amazon.com/images/I/41nH8IwhtzL.jpg',
text: 'Rs 899'
},
{
imgUrl: 'https://m.media-amazon.com/images/I/61SfBOL3d2L._SY346_.jpg',
text: 'Rs 599'
}
];

}
user-service.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

constructor(private http: HttpClient) { }

getDetails(u : any)
{
return this.http.get("http://localhost:3000/byusername/?username="+u);
}

insertRecord(n: any, u: any, p: any, e: any)

{
return
this.http.get("http://localhost:3000/saveuser/?name="+n+"&username="+u+"&passw
ord="+p+"&email="+e);
}
}

To see out put: ng s

MongoDB server:
Command prompt 1:

Cd \

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongod.exe

Command prompt 2:

Cd\

Cd \”Program Files\MongoDB\Server\4.4\bin”

Cd \”Program Files\MongoDB\Server\4.4\bin”>mongo.exe
For Seneca Server:
Command Prompt 3:

Create folder:

1. mkdir <file name>

2. cd <created file name>
3. npm init
4. npm install Seneca Seneca-entity Seneca-mongo-store –save-dev

senecaplugin.js:
module.exports=function booksearch(options){

this.add({component:"booksearch",by:"all"},(req,res)=>{
console.log("microservies hit...");

const book=this.make("book");
book.list$({},(error,blist)=>{
let result={};
if(blist.length==0){
result.data="book list not found";
}
else{
result.data=blist;
}
res(null,{data:result});
})
})

this.add({component:"booksearch",by:"title"},(args,res)=>{
console.log("microservies hit...");

const book=this.make("book");
book.list$({title:(args.title)},(error,blist)=>{
let result={};
if(blist.length==0){
result.data="book list not found";
}
else{
result.data=blist[0];
}
res(null,{data:result});
})
})

}
senecaserver.js:
let seneca=require('seneca')();
seneca
.use("seneca-entity")
.use("seneca-mongo-store",{
uri:"mongodb://localhost:27017/VENKATESH"
} )
.quiet()
.use(require('./senecaplugin'))
.listen({type:"http",port:7000},()=>{
console.log("port 7000 running");
})
// let seneca=require("seneca")();
// seneca
// .use("seneca-entity")
// .use("seneca-mongo-store",{
// uri:"mongodb://localhost:27017/CN03SEPDB"
// })
// .quiet()
// .use(require('./senecaplugin'))
// .listen({type:"http",port:7000},()=>{
// console.log("7000 port running");
// });
To see out put : node SenecaServerUserOperations.js

Express gate way server:

Create a folder :

1. mkdir <filename>
2. cd <created file name>
3. npm init
4. npm express axios cors –save-dev

express.js:
let express=require('express');
let axios=require('axios');
let app=express();
let cors=require('cors');

app.use(cors());

// app.get('/book',(req,res)=>{

// let component="booksearch";
// let by="all";
// let url="http://localhost:7000/act?component="+component+"&by="+by

// console.log("url",url)
// axios.get(url)
// .then((response)=>{
// res.json(response.data.data.data);
// res.end();
// })
// .catch((err)=>{
// console.log("some error",err);
// })

// })

app.get('/book',(req,res)=>{
console.log("express server reached");

let component="booksearch";
let by="all";
let url="http://localhost:7000/act?component="+component+"&by="+by;
console.log("url for senecaserver",url);

axios.get(url)
.then((response)=>{
console.log("data found");
res.json(response.data.data.data);
res.end();

})
.catch((error)=>{
console.log("error ",error)

})

})
app.get('/bytitle',(req,res)=>{
console.log("express server reached");

let component="booksearch";
let by="title";
let
url="http://localhost:7000/act?component="+component+"&by="+by+"&title="+req.q
uery.title;
console.log("url for senecaserver",url);

axios.get(url)
.then((response)=>{
 console.log("data found");
res.json(response.data.data.data);
res.end();

})
.catch((error)=>{
console.log("error ",error)

})

})

app.listen(3000,()=>{
console.log("port 3000 runing");
})

To see out put: node ExpressGateWayServer.js

Angular:
Create a folder:

1.ng new <filename>

creating component:

2.ng g c <component name>

3.we have used two components

3.1.ng g c fetchall

3.2.ng g c title

creating service component

4.ng g s <component name>

we have used one service component

5.ng g s bookservice
app.component.html:
<div align="center" style="background-color: bisque;">
<h1>book details</h1>
</div>
<app-fetchall></app-fetchall>
<br>
<app-title></app-title>
app.component.ts:
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myapp';
}

app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';

import { FetchallComponent } from './fetchall/fetchall.component';
import { FormsModule } from '@angular/forms';
import { TitleComponent } from './title/title.component';

@NgModule({
declarations: [
AppComponent,
FetchallComponent,
TitleComponent
],
imports: [
BrowserModule,HttpClientModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
fetchall.component.html:
<div align="center" style="background-color: aquamarine;">
<h1>Book store</h1>
<br>

<table border="3px solid">

<thead>
<tr>
<th>id</th>
<th>title</th>
<th>isbn</th>
<th>pageCount</th>
<th>publishedDate</th>
<th>thumbnailUrl</th>
<th>shortDescription</th>
<th>rating</th>
<th>authors</th>
<th>category</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let b of book">
<td>{{b.id}}</td>
<td>{{b.title}}</td>
<td>{{b.isbn}}</td>
<td>{{b.pageCount}}</td>
<td>{{b.publishedDate}}</td>
<td>{{b.thumbnailUrl}}</td>
<td>{{b.shortDescription}}</td>
<td>{{b.rating}}</td>
<td>{{b.authors}}</td>
<td>{{b.category}}</td>
</tr>
</tbody>
</table>
<br><br>
<button (click)="getAll()">Books</button>
<br><br>

</div>
fetchall.component.ts:
import { Component, OnInit } from '@angular/core';
import { BookService } from '../book.service';

@Component({
selector: 'app-fetchall',
templateUrl: './fetchall.component.html',
styleUrls: ['./fetchall.component.css']
})
export class FetchallComponent implements OnInit {
book:any;
constructor(private bs:BookService) { }

ngOnInit(): void {
}

getAll(){
this.bs.getAll().subscribe((data)=>{
this.book=data;
})
}

title.component.html:

<div align="center" style="background-color:cadetblue;">

<h1>Book store</h1>
<br>
Enter the title anme:<input type="text" [(ngModel)]="title">
<br><br>

<table border="3px solid">

<thead>
<tr>
<th>id</th>
<th>title</th>
<th>isbn</th>
<th>pageCount</th>
<th>publishedDate</th>
<th>thumbnailUrl</th>
<th>shortDescription</th>
<th>rating</th>
<th>authors</th>
<th>category</th>
</tr>
</thead>
 <tbody>
<tr>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.isbn}}</td>
<td>{{book.pageCount}}</td>
<td>{{book.publishedDate}}</td>
<td>{{book.thumbnailUrl}}</td>
<td>{{book.shortDescription}}</td>
<td>{{book.rating}}</td>
<td>{{book.authors}}</td>
<td>{{book.category}}</td>
</tr>
</tbody>
</table>
<br><br>
<button (click)="getByTitle()">Books</button>
<br><br>

</div>
title.component.ts:
import { Component, OnInit } from '@angular/core';
import { BookService } from '../book.service';

@Component({
selector: 'app-title',
templateUrl: './title.component.html',
styleUrls: ['./title.component.css']
})
export class TitleComponent implements OnInit {
title:any;
book:any;
constructor(private bs:BookService) { }

ngOnInit(): void {

}
getByTitle(){
this.bs.getByTilte(this.title).subscribe((data)=>{
this.book=data
})
}

}
book.service.ts:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

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

constructor(private http:HttpClient) { }
getAll(){
return this.http.get("http://localhost:3000/book")
}
getByTilte(title:any){
return this.http.get("http://localhost:3000/bytitle/?title="+title)
}

To see out put: ng s