Reto Angular: Filtro por categorías

Una pregunta tonta:

¿Cómo cambio el estilo de un tag / botón / menú en una página web cuando alguien lo pulsa?

Lo más sencillo sería utilizar una de las pseudo clases que existen en CSS3 para este tipo de animaciones sencillas y que tienen esta estructura:

selector:pseudo-class {
    property:value;
}

Por ejemplo, si queremos que un botón cambie de color cuando se pasa por encima del mismo, utilizamos la pseudo clase  :hover

.boton:hover {

                background-color: #AAA222; //Color bastante feo, por cierto

}

En el caso de los enlaces(<a>), existen pseudo clases para aquellos que han sido visitados (:visited) o seleccionados (a:active), etc. pero mi problema era un poco más complejo que todo esto:

En una aplicación hecha con Angular 5, quería tener una lista de tags para filtrar un conjunto de resultados por categorías y que los tags seleccionados pudieran ser más de uno (¡Ciao, pseudo clases!) y además, sin utilizar engorrosas funciones Javascript.

Pensé… este tipo de filtros están a la orden del día y seguro que está n más que trillados, ¿no?

Pues me costó bastante conseguir algo como esto (tags en rojo) con los requisitos que he expuesto hace un momento…

tags-seleccionados

Bien. Está claro que debemos tener un array o lista de tags seleccionados y que cada vez que un usuario pulse sobre un elemento, éste se añada o se elimine de la lista.

En el componente Angular podemos declarar este listado de la siguiente forma:

@Input() categoriasSel = [];

Y por supuesto, necesitamos una función que sea invocada cada vez que se pulsa un elemento encargada de añadir o eliminar de la lista el elemento recibido como parámetro:

imagen2

Y ya por último (he aquí  donde Angular hace su magia en un solo bloque de ) comprobar si el elemento está seleccionado o no para asignarle un estilo u otro en función de este chequeo.

Este sería el fragmento del template Angular más limpio que una patena y más chulo que un ocho encargado de hacer un montón de cosas en un solo tag HTML (<a>):

imagen3

Expliquemos qué es lo que hace Angular en este fragmento:

1º El tío monta un bucle for para crear un tag por categoría (let tag of categories).

Enlaza el evento de pulsación de ratón con el método que selecciona / deselecciona la categoría ( (click)=”seleccionarCategoria(tag)”).

Selecciona la clase ‘is-danger’ para todo tag que está incluído en el array categoriasSel utilizando la potencia del selector ngClass.

Hacer esto, por ejemplo, en un JSP o en un template EJS, creedme, es un dolor de muelas y queda más sucio que Peppa Pig después de salta en el barro. Sí, tengo hijas pequeñas.

Por eso, creo que Angular se merece un aplauso en esta faceta suya de resolver ciertos retos de una manera clara y sencilla.

Los tirones de orejas, que también los merece, los dejaremos para otro día.

¡Hasta otra!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Crea un sitio web o blog en WordPress.com

Subir ↑

Crea tu página web en WordPress.com
Empieza ahora
A %d blogueros les gusta esto: