There a many premade Angular tools out there. For instance the DevExtreme tool kit which can be found here: https://js.devexpress.com/.

Here’s an example of using it for creating a table:

config.json file:

This is the file we want to load information from. This needs to be globally accessible so will need to be put in a directory under assets.

{
    "apiUrl":"http://localhost:9000",
    "readerUrl": "http://localhost:8088"
}

main.ts file:

This loads are new config file.

import {Config} from "./app/app.config";

Config.loadInstance('assets/config/config.json')
    .then(() => {
        platformBrowserDynamic().bootstrapModule(AppModule);
    });

app.module.ts file:

This gets the instance and provides it.

import {Config} from "./app.config";

providers: [
        {provide: Config, useFactory: () => Config.getInstance('assets/config/config.json')},
]

app.config.ts file:

This is the main config code.

import {Injectable} from "@angular/core";

@Injectable()
export class Config {

    private static cache = {};

    constructor(private data: any) { }

    public static loadInstance(jsonFile: string) {
        return new Promise((resolve, reject) => {
            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', jsonFile, true);
            xobj.onreadystatechange = () => {
                if (xobj.readyState == 4) {
                    if (xobj.status == 200) {
                        this.cache[jsonFile] = new Config(JSON.parse(xobj.responseText));
                        resolve();
                    }
                    else {
                        reject(`Could not load file '${jsonFile}': ${xobj.status}`);
                    }
                }
            }
            xobj.send(null);
        });
    }

    public static getInstance(jsonFile: string) {
        if (jsonFile in this.cache) {
            return this.cache[jsonFile];
        }
        throw `Could not find config '${jsonFile}', did you load it?`;
    }

    public get(key: string) {
        if (this.data == null) {
            return null;
        }
        if (key in this.data) {
            return this.data[key];
        }
        return null;
    }
}