Angular storing reference data

Question

I have a number of simple lookup tables within my Angular 6 app in the form of:

export const Fuel: { id: number, type: string } [] = [
    { "id": 1, "type": "Petrol" },
    { "id": 2, "type": "Diesel" },
    { "id": 3, "type": "Electric" },
    { "id": 4, "type": "Hybrid" }
];

I would like to store all of these within a single file allowing these lookup tables to be accessible by all components within a module. This post describes using environment files for storing app-settings. Is there a recommended or best practice method for achieving this?

You can have this tables in normal ts file outside the module and when this tables will be export, then you can use in module. — bluray, Aug 23 '18 at 10:31
The efficient way to do get these lookups from server using api. so it will have less dependency with client. if you dont want to do that create a modal file put all lookups in it and import it. — Akj, Aug 23 '18 at 10:34

score 1 · Accepted Answer · edited Aug 23 '18 at 11:13

You can create an Constant Class with name 'AppSettings' with these properties.

export const AppSettings: any = {

   Fuel: [
    { "id": 1, "type": "Petrol" },
    { "id": 2, "type": "Diesel" },
    { "id": 3, "type": "Electric" },
    { "id": 4, "type": "Hybrid" }
   ],

}

You can access in any component using.

import {AppSettings} from './AppSettings.ts';

console.log(AppSettings.Fuel[0]); // { "id": 1, "type": "Petrol" }

Angular storing reference data

1 Answers1