ng-toggle-button
He desarrollado un componente de Angular que puedes usar en tus proyectos, se trata de un botón switch o toggle, funciona de manera similar a un checkbox. Te invito a ver la demo (opens new window) donde podrás probarlo.
# Motivación
Hace un tiempo estuve trabajando en un proyecto que consistía en un panel de administración desarrollado en Angular, al actualizar su versión, aparecieron algunos conflictos con algunas dependencias, pero en particular había un error un poco extraño, que al compilar aparece el mensaje en la consola: angular is undefined, algo un poco raro, buscando un poco no conseguí el origen de ese error. Hasta que luego de tanto buscar sin una respuesta concreta, llegué a la conclusión de que el error podría ser en alguna de las dependencias, ¿pero cuál?
Logré dar con el problema, una de las librerías usadas era un componente de checkbox switch o toggle que se usaba en la aplicación, busqué algunas alternativas y no me gustaron así que pensé, ¿por qué no hacer mi propio componente?
Inspirado en un componente de Vue.js (opens new window), creé este componente compatible con la versión de Angular del proyecto, luego de tener el componente construido, lo subí a npm y lo instalé como dependencia del proyecto reemplazando la librería anterior.
El propósito de crear esta librería no solo fue solucionar el problema actual en el proyecto, si no que también quería publicar un paquete y empezar un proyecto open-source, y esta fue una buena oportunidad.
# Lección aprendida
Haciendo este proyecto, aprendí a desarrollar una librería o paquete para reutilizar en otros proyectos.
# Cómo usarlo
Para empezar, lo primero es instalarlo:
npm i ng-toggle-button
o
yarn add ng-toggle-button
Luego, importas el módulo
import { NgToggleModule } from 'ng-toggle-button';
@NgModule({
...
imports: [
...,
NgToggleModule
],
})
y lo usas
<ng-toggle
[value]="true"
[color]="{
unchecked: '#939da2',
checked: '#f62d51'
}"></ng-toggle>
Puedes saber un poco más en el repositorio (opens new window) del proyecto.