Angular 12 Regional Environment Switcher

I have a simple angular website which displays various products, simple lists returned from databases, originally just based in the UK but now another due to come out in France, so I have two APIs a uk.domain and a fr.domain.

I'd like to use the same frontend rather than deploying two separate frontends, with the switch only changing the products that are loaded on two of the pages.

Along with this I also have environment.dev.ts and environment.prod.ts files containing the necessary endpoints.

Ideally I'd have a button to switch between the regions once this has been deployed.

Is this possible or bad practice, if so, what would be the best solution?

If the datamodel is the same for both apis, you can do this with a simple switch in the ui. Later there multiple ways to get the users location so you can automatically guess the right api. For example: geolocator api

Example for switching the endpoint:

export const environment = {
  production: true,
  apiEndpoints: {
    uk: 'https://uk.domain/api',
    fr: 'https://fr.domain/api'
  }
};

export class ProductService {
  constructor(private http: HttpClient) {}

  getProducts(region: 'uk' | 'fr') {
    const apiEndpoint = environment.apiEndpoints[region];
    return this.http.get(`${apiEndpoint}/products`);
  }
}