Estoy tratando de mostrar un estilo CSS diferente en mi FORMULARIO HTML antes de que mi código consulte un servicio y, en su respuesta, vuelva a cambiarlo. Estoy usando ng-class para agregar dinámicamente la clase siempre que el booleano activeload1 sea verdadero. Lamentablemente, esto nunca se refleja en mi HTML. Deliberadamente hice que la llamada de servicio llegara a una excepción para ver si el cambio de clase ocurre en ese momento y lo hace (simplemente se cuelga en el css de carga ya que nunca llega a la desactivación de clase debido a la excepción). ¿Cómo puedo reflejar el cambio/adición de la clase CSS en mi HTML? El código parece simplemente asignar el valor true al booleano activeload1 consultar el servicio y luego asignar false nuevamente sin reflejar nada. Mi código:

HTML:

 <div id="divPrincipal" class="wrapper" ng-class="{loading1:bravosCtrl.activeload1}"> </div>

Fragmento de función en JS. expediente:

 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; }