Seeking to display a unique CSS style on my HTML FORM prior to invoking a service in my code and then reverting back after receiving the response. I have implemented the use of ng-class to dynamically add the class when the boolean activeload1 is set to true. However, I am encountering an issue where this change is not reflected in my HTML. To troubleshoot, I purposely triggered an exception in the service call to observe if the class changes during that scenario, which it does (but remains stuck on the loading css due to never reaching the class deactivation following the exception). How can I ensure that the CSS class change/addition is reflected in my HTML? Currently, the code simply sets the value of activeload1 to true, calls the service, and then assigns false without any visible effects. My code:
HTML:
<div id="divPrincipal" class="wrapper" ng-class="{loading1:bravosCtrl.activeload1}"> </div>
Snippet from JS function:
this.search = function(){
this.activeload1 = true;
if (this.query){
this.userService.searchUser(this.query, this.userSession).then((users) => {
console.log("SUCCESS");
});
this.activeload1=false;
}else{
this.activeload1=false;
this.error = true;
}
};
CSS :
.wrapper {
border-radius: 10px;
background: #24CDD1;
padding: 25px;
max-width: 680px;
margin: 0 auto;
margin-bottom: 20px;
box-shadow: 2px 8px 8px rgb(0 0 0 / 10%);
position: relative;
}
.wrapper.loading1::before {
content: '';
background: url('https://i.imgur.com/sdK5jNw.gif') no-repeat center center;
width: 32px;
height: 32px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.wrapper.loading1::after {
content: '';
background: #24CDD1;
display: inline-block;
opacity: .65;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
}