Implementación
La idea es proporcionar una forma fácil de reutilizar la lógica de paginación que en una aplicación Angular significa encapsular la lógica en una directiva o crear un componente que acepte Template Refs con widgets UI personalizados. Si no estás familiarizado con los Template Refs, te animo a que eches un vistazo a uno de mis posts anteriores ▶️ aquí.Decidí crear una directiva, ya que el número de elementos de UI que se pueden personalizar no es pequeño (hasta 5 ítems) y puede que quieras un comportamiento diferente cuando el paginador está en cierto estado. Por ejemplo, cuando se selecciona la primera 1️⃣ o la última 🏁 página, es posible que quieras hacer algo con los botones ‘ir a la primera’, ‘ir a la página anterior’ o ‘ir a la última’, ‘ir a la página siguiente’ 🔘. Puedes desactivar los elementos, ocultarlos o aplicar una clase CSS determinada. Sólo hay que pensar en el número de propiedades de entrada responsables de la configuración si el paginador se implementara como componente 🔥😱.
Veamos partes del código de la directiva antes de presentar la implementación completa 😏
La directiva inyecta dos servicios para poder interactuar con el elemento DOM subyacente. Además, se exporta, por lo que se puede acceder a una instancia en una plantilla.
Tiene el método setValue que se encarga de establecer el valor del elemento de entrada subyacente y el método setPage que realiza acciones cuando la página seleccionada ha cambiado.
La directiva expone métodos públicos para la navegación imperativa directa a una página deseada ✈️.
Además, tiene dos getters públicos que indican ciertos estados del paginador.
Cuando se dispara el evento input, la directiva se encarga de eliminar los caracteres no válidos 🚫.
Cuando se dispara el evento change, se comprueba el valor actual del elemento input y se modifica si es necesario (valor vacío o fuera de rango). A continuación se dispara el evento pageChange de la directiva.
Por último, pero no menos importante, los cambios en las propiedades de entrada se gestionan teniendo en cuenta los valores no válidos.
El código completo de las directivas es el siguiente: