I am currently exploring Angular and experimenting with various features. Recently, I encountered an issue that requires me to take certain actions based on the results returned by a service before the application fully loads.
Currently, I am making a call to a 'webapi' in the code of the 'app.component.ts'. Based on the response from this API, I am hiding certain content on the website. However, I have noticed a delay in the server's response which is impacting the speed of the 'webapi', causing a delay in taking necessary actions to hide the content.
Now, instead of directly calling the API in the 'app.component', where the promise is returned and then injected into the body's CSS, I need to find a way to defer the API call until the result is received so that the system does not proceed without it.
Update:
In the 'ngOnInit()' of the 'app.component', we are calling an API that returns a true/false value. Depending on this value, a class called 'Type' is added to the document body, which controls the visibility of various elements like logos on the web page using Sass styling.
API Call
const res = app.services.getIsActiveType().toPromise();
document.body.classList.add(res.type);
Sass Styling
body {
&.Type {
logos {
display: none;
}
}
}