In my project, there are certain components that rely on previous steps being completed before they can proceed to the next step.
To streamline the process of toggling a status indicator, I attempted to implement a function in a shared service file.
Service:
// Loading indicator
private isLoading = {
enabled: false,
step: null
};
/**
* Set the status for our loading indicator
*
* @param isLoading
* @param step
*/
setLoader(isLoading, step) {
this.isLoading = {
enabled: isLoading,
step: step
};
console.log(this.isLoading);
}
A component:
this._massEmpService.setLoader(true, 'step2');
HTML:
<div *ngIf="isLoading?.enabled && isLoading?.step == 'step2'" class="loader" align="center">
<img src="images/loading-bars.svg" alt="" />
</div>
Although the function is triggered correctly when the button in one component is clicked and the object is printed as expected, the HTML in another component does not reflect this status change.
Is it possible that data cannot be passed through a service in this manner?