[](https://genniux.net/app/catalogo-componentes/inicio)
npm install @empowerlabs/components
###### El repositorio empowerlabs es un catalogo de componentes web desarrollados con angular 6+.
###### La biblioteca principal esta escrita en JavaScript puro (ademas de web Components) lo que significa que puede utilizarse en cualquier aplicativo que sea orientado a plataformas web con angular 6+.
#
#
bash
npm install @empowerlabs/components@latest
`###### Esto descarga la biblioteca principal @empowerlabs/components.
#
##### Importar EmpowerComponentsModule
#
Luego importe EmpowerComponentsModule al modulo raiz (normalmente llamado AppModule) de su aplicación angular.
`bash
import {EmpowerComponentsModule} from '@empowerlabs/components';
`
`bash
imports: [
BrowserModule,
EmpowerComponentsModule,
],
`
Esto cargará todos los componentes y caracteristicas de @empowerlabs/components en su aplicación.
##### Cargar CUSTOM_ELEMENTS_SCHEMA
#
Agregue schemas propiedad al módulo raíz y póngalo CUSTOM_ELEMENTS_SCHEMA en él. Esto es importante ya que los componentes de la interfaz de usuario de @empowerlabs son componentes web (elementos personalizados).`bash
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
`
`bash
providers: [],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
],
`
Este paso suprime las advertencias causadas por las em-*etiquetas en las plantillas.##### Cargar archivos CSS
Actualmente utilizamos los iconos desarrollados por [FontAwesome] , [IonIcons] y [MaterialDesign] por lo cual es importante importar el CDN de cada dependencia.
Abrimos nuestro el archivo styles.css principal de nuestro proyecto angular, ubicado en (src>style.css) e incorporamos la siguiente importacion.
`bash
@import '../node_modules/@empowerlabs/components/css/empowerlabs.css';
`##### ¡Estamos listos!
#
@empowerlabs/components se ah instalado completamente. ¡Diviértete con los componentes!
#### Usando componentes
@empowerlabs/components proporciona varios componentes: (ver todos los componentes en la lista). Cada componente comienza con la em-*etiqueta.
Por ejemplo, pongamos un botón.
`bash
`
Si desea insertar un icono dentro del botón.
Consulta [FontAwesome] , [IonIcons] , [MaterialDesign] para seleccionar el icono a mostrar.
`bash
`
Si desea establecer una acción activada cuando se hace clic en el botón, puede usar el enlace de evento angular .
`bash
``[FontAwesome]:
[IonIcons]:
[MaterialDesign]: