Private Azure App Service to Public App Service communication via application gateway

Question

I have a container webapplication with two App Services. App Service A is public and runs an angular frontend application, and App Service B is made private running a nodejs backend that contains the API's .
The frontend requests the backend API'S and displays a list of students and data tables.

Since the Appservice B is private i created a vnet, private endpoints and also an application gateway (agw) so that i can be accesses from a public Ip. So far i am able to access my backend via the application gateway dns. (the agw dbs resolves to appservice B's API's)

So here is what I did:

1. Created a new VNet
2. Configured Private Endpoint for App Services B to the new VNet, with Private DNS Integration
3. Made sure the Private DNS got created, is linked to the new VNet,
4. created an application gateway and made sure it can resolve to my private appservice B and query the API's
5. For testing: Created a new VM in the VNet, and made sure I can browse from the VM to the services. Works fine. I browsed the services using their default URL. What i am trying to achieve
   1. I have my appservice A which is public, i want my Appservice A to access the apis via the applicationgateway to fetch the data from my private appservice B backend

What am I missing?
How can i make my appservice A to connect with appservice B? I am fairly new with Azure and I don't have any idea why the Frontend could reach the Backend.
I tried hardcoding the applicationgateway Ip no my frontend api's requests (which was stupid, i think !!)