Tenemos el arreglo a esta incógnita, o por lo menos eso deseamos. Si continuas con alguna interrogante dínoslo, que sin dudarlo te ayudaremos
Solución:
En tu comentario dijiste que intentaste ngClass pero tuve problemas con eso:
La directiva espera un objeto con el nombre de clase como key y una expresión booleana como valor. Si la expresión es truela clase se agrega, si no, se eliminará.
Por ejemplo, su botón tiene la clase btn y debería tener cualquiera btn-add o btn-remove dependiendo de un valor booleano, entonces probablemente haga algo como esto:
Espero que esto ayude en su comprensión de ngClassentonces no será un problema usarlo en sus otros casos de uso.
En primer lugar, el comportamiento, la visibilidad o el estilo de un elemento deben depender del estado de sus datos y no deben alterarse.
Aún así, si quiere ir así, en lugar de usar una variable booleana como controlador para este tipo de funcionalidad, puede pasar el evento a una función para que pueda obtener una referencia al elemento y su lista de clases y manipularlo como usted me gusta.
Tu plantilla debería ser así:
y agrega esto en tu clase:
toggleClass(e)
const classList = e.target.classList;
const classes = e.target.className;
classes.includes('clicked') ? classList.remove('clicked') : classList.add('clicked');
Para alternar el texto del botón también:
