Instead of ngOnint of the app.component, where to put the api call which makes the system wait until the response is retuned & injected into the body?

user_15907498 0
Viewed 93

I am new to angular and trying out different things. Recently I stumbled upon an issue that needs me to take some actions based on the results being returned by the k but before anything loads in the application.

Right now I am calling a webapi in the kof the app.component.ts, and based on that I am hiding the contents in the website but recently I noticed a slow response from the server that caused a slow response from the webapi hence the actions that needed to be taken are delayed hence not hiding the content.

Now, instead of the of the app.component where I am calling the api which returns promise and then inject the result into the css of the body's kI need to put the api call somewhere until the result is returned the system should not proceed.

update:

ngOninit() of the app.component, we have called an api that basically returns the true/false. Based on that, 'type' a class is injected into the document.body i.e. IsVisible. And in the Sass of app.component it disables the logos and other contents in the web page.

api call

const res= app.services.getIsActiveType().toPromise();
document.body.ClassList.Add(res.type);

in sass

body {
  &.Type{
    logos {
      dispaly: none;     
    }
   }
  }
webapi angular-ui-router angular typescript
2 Answers

If you are looking for initialization before anything is displayed, you need APP_INITIALIZER

A DI token that you can use to provide one or more initialization functions.

The provided functions are injected at application startup and executed during app initialization. If any of these functions returns a Promise or an Observable, initialization does not complete until the Promise is resolved or the Observable is completed.

You can, for example, create a factory function that loads language data or an external configuration, and provide that function to the APP_INITIALIZER token. The function is executed during the application bootstrap process, and the needed data is available on startup.

user_2356480

using canLoad or canActive property of the router can help you.

user_130309590
Related