¿Por qué no funciona esto, como se indica en los documentos?
renderer.setElementClass(el, 'class1', false); // replace class renderer.setElementClass(el, 'class2', true); // add a class Esto da como resultado que el elemento solo tenga la class2 en lugar de ambas.
Documentos del renderizador de Angular2 de referencia
Solo para mencionar que Renderer está obsoleto ahora y ha sido reemplazado por Renderer2 . En la clase Renderer2 hay dos métodos que reemplazan setElementClass del Renderer en desuso.
Para agregar una clase:
renderer.addClass(this.elementRef.nativeElement, 'popup');
Para eliminar una clase:
renderer.removeClass(this.elementRef.nativeElement, 'popup');
Para obtener más información, consulte: https://angular.io/api/core/Renderer2
Para obtener ejemplos de código en forma de tutorial, consulte: https://alligator.io/angular/using-renderer2/ en particular, la sección de 'addClass / removeClass'
Resulta que la opción isAdd es el equivalente de una clase de eliminación, por lo que lo siguiente funciona para alternar clases:
renderer.setElementClass(el, 'class1', false); // remove class1 renderer.setElementClass(el, 'class2', true); // add class2 Oh, nada extraño en llamar a un método setElementClass para eliminarlo, por supuesto...
La clase Renderer se eliminó en la versión 9 y se migró a Renderer2
En Renderer -> setElementClass(renderElement, className, isAdd)
En Renderer2 -> isAdd ? addClass(renderElement, className) : removeClass(renderElement, className)
En resumen, el método setElementClass se migró al método addClass y al método removeClass en función del tercer parámetro pasado en setElementClass.