Request is not received in the backend - node.js

Question

My project uses Angular as the frontend and Node.js as the backend with socket.io integration.
I am trying to send a post request from frontend to backend as follows:
Frontend
The button in the HTML to call the onOrder() method:
<button (click)="onOrder()" class="button">Checkout</button></div>
The method call in .ts file:
onOrder(){
console.log('pressed'); // successfully logged to console
if(this.itemsInCart.length > 0 ) {
let order: SubmitOrderModel = new SubmitOrderModel();
order.order = this.itemsInCart;
this.webSocketService.fetchOrders(order);
}
}
The SubmitOrderModel below:
export class AddToCartModel {
thumbnail?: string = '';
mealName: string = '';
addons: string[] = [];
variant?: string = '';
cost: number = 0;
quantity: number = 1;
}
export class SubmitOrderModel {
order: AddToCartModel[] = [];
}
The webSocketService methods below:
setupSocketConnection(){
this.socket.on('fetchOrders', (data: string) => {
console.log(data);
localStorage.setItem('allOrders', JSON.stringify(data[0]));
});
this.socket.on('fetchRequests', (data: string) => {
console.log(data);
localStorage.setItem('allRequests', JSON.stringify(data[0]));
StaffScreenComponent.allRequests = data;
});
}
fetchOrders(order: SubmitOrderModel) {
this.socket.emit('fetchOrders', order);
}
OnFetchOrders() {
return this.socket.fromEvent('fetchOrders');
}
Backend
and in the backend, the schema definition is as follows:
var mongoose = require('mongoose');
var menuOrderSchema = mongoose.Schema;
var AddMenuOrderSchema = new menuOrderSchema({
order: [{
thumbnail: String,
mealName: String,
addons: [String],
variant: {type: String, default: 'Standard'},
cost: Number,
quantity: Number
}],
});
var newMenuOrderSchema = mongoose.model('addMenuOrderSchema', AddMenuOrderSchema );
module.exports = newMenuOrderSchema;
And the socket configuration in the backend is below:
io.on('connection', (socket)=>{
console.log('connection')
socket.on("fetchOrders", (arg) => {
console.log('fetchOrders');
const postMenuOrderM = new addMenuOrderModel(arg);
console.log('checking')
postMenuOrderM.save().then(function(){
addMenuOrderModel.find().then(data=>{
io.emit('fetchOrders', data)
}).catch(err=>res.send(err));
});
});
socket.on('disconnect', () => console.log('disconnected'));
})
The Node.js server is not receiving any calls from the UI.
What am I doing wrong here?