Search code examples
angulartypescriptenvironment-variablesdevextreme

Dynamically load data / load data from reference (dynamic filtering)

So I got my environment.ts that holds my app configuration. Now I want to add filtering presets to the config, so I can specify different presets for different customers. I'm using: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxFilterBuilder/ to create the filter:

enter image description here

So lets say I want to display a list of employees, instead of "Category", "Unit Price" and "Shipped". This list is only obtainable via an API. How can I save a "reference" in the config to the service that can provide the list of employees?

The usecase of the reference would be when the user opens up the filtering page, the config gets loaded, then the reference of the function would be executed and the api sends back the list of employees, to display in the filtering.

The data should only be loaded, if the user has permissions to access the filtering page. So the data cannot be loaded "before the app starts", because the user is not logged in and has no permissions to get the data from the api.

environment.ts

export const environment = {
  productName: 'test',
  production: false,
};
Solution

  • environment.ts is for some basic data that application deal with it and may vary between local or publish environments. it is not a good place to put user-specific data here.

    consider to create a user-setting service (for example) or even use ngrx for state management and then you can set or get these data, also you may want to save these configurations in localStorage or store them in the backend to save them between refreshes.