How to load a global config file to Angular component before the view is loaded

I have a global configuration file like the following:

{
"options": {
"pages": 5,
"paginator": true,
"rows": [
"5",
"10",
"15",
"20",
"25",
"30",
"40",
"50",
"100"
],
"perPage": 10,
"sorting": true,
"selection": true
}
}


I am calling this file through service in ngOnit() as follows:

ngOnInit() {
this.getGlobalSettings();
}

getGlobalSettings(){
const providerSubscription = this.leaveApplicationService.getGlobalSettings().subscribe(res => {
this.pageSettings = res;
},
error => {
console.log(error);
},
() => {
});
this.subscriptionCollection.add(providerSubscription);
}


I am using these settings in the HTML file, but it seems like the configuration is loaded only after the view is initialized. So it is throwing an error when I try to access pageSettings.options in the view.

How can this be fixed and load the settings soon after the app is initialized so that it will be available for all the components?

Continue reading...