Template literals in API fetch don't pass data in Angular

Question

I have a fetch() function to collect data from Skyscanner API. It works fine until I use template literals. This results in getting error 400.

public departureAPI = "WAW-sky";

fetch(
    "https://cors-anywhere.herokuapp.com/https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/PL/
PLN/en-US/${departureAPI}/CDG-sky/2020-08-12?inboundpartialdate=2020-08-23",...

I also tried using Angular interpolation with {{ departureAPI }} but with same negative results. Thank you for any suggestions on how to solve this.

Answer 1

TO use template literals, use `` instead of "" such as ::

fetch(
    `https://cors-anywhere.herokuapp.com/https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/PL/
PLN/en-US/${departureAPI}/CDG-sky/2020-08-12?inboundpartialdate=2020-08-23`,...