I'm trying to show a different CSS style on my HTML FORM before my code consults a service and, on its response, change it back again. I'm using ng-class to dynamically add the class whenever the activeload1 boolean is on true. Sadly this never gets reflected on my HTML. I purposely made the service call reach an exception to see if the class change happens then and it does (it just hangs on the load css since it never reaches the class deactivation due to the exception). How can I reflect the CSS class change/addition on my HTML? The code seems to just assign the true value to the activeload1 boolean consult the service and then assigning false again without reflecting anything. My code:
HTML:
<div id="divPrincipal" class="wrapper" ng-class="{loading1:bravosCtrl.activeload1}"> </div>
Snippet of funtion in JS. file:
this.buscar = function(){
this.activeload1 = true;
if (this.busqueda){
this.usuarioService.buscarUsuario(this.busqueda,this.userSession).then((usuariosE) => {
console.log("SUCCESS");
});
this.activeload1=false;
}else{
this.activeload1=false;
this.searchError = 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;
}
the $http service request is asynchronous. From the code, you are assigning activeload1 to false immediately without waiting for the http response to come back.
To set activeload1 to false when the $http service respond, simply add it to the success callback function.
this.usuarioService.buscarUsuario(this.busqueda,this.userSession).then((usuariosE) => {
console.log("SUCCESS");
this.activeload1=false; // added here
});