This library was generated with Angular CLI version 16.2.0.
This project was generated with Angular CLI version 17.0.7. (Have version 16.0.2)
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Esta documentación proporciona información sobre el uso de la librería Generics, una colección de componentes reutilizables. Hasta el momento, la librería incluye los siguientes componentes:
Para utilizar esta librería, primero, debes instalarla mediante el siguiente comando:
npm i generics-lib
La tabla reutilizable es un componente que incluye filtros y diversos campos. Puede tener una sección de acciones laterales relacionadas con los registros.
import { TablaSAComponent } from 'generics-lib';
// ...
<generics-tabla
[headers]="headers2"
[mostrarAcciones]="true"
(accionClick)="handleEventoBotonAccion($event)"
(BotoneraClick)="handleEventoBotonera($event)"
[data]="listadoHistorialContratosAsociados.resultados"
></generics-tabla>
-
Headers: Arreglo que sigue la interfaz
TablaHeaders
. - MostrarAcciones: Booleano que determina si se deben mostrar las acciones al final de la tabla.
- accionClick: Evento que se emite cuando se hace clic en un botón de acción. El objeto emitido contiene el nombre de la acción y el elemento correspondiente.
handleEventoBotonAccion(event: any) {
switch (event.nombre) {
case 'verPoliza':
// Acciones específicas para 'verPoliza'.
break;
default:
break;
}
}
-
BotoneraClick: Similar a
accionClick
, pero para la botonera superior.
Este componente maneja la paginación y las llamadas al backend.
import { PaginatorSAComponent } from 'generics-lib';
// ...
<generics-paginator
[pageSize]="pageSize"
[totalResults]="totalResults"
[totalPages]="totalPages"
[currentPage]="currentPage"
[cantidadesPages]="cantidadesPages"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
[mostrarPaginador]="true"
></generics-paginator>
- MostrarPaginador: Booleano para determinar si se debe mostrar la paginación.
- pageSize: Tamaño de la página.
- totalResults: Cantidad total de resultados.
- totalPages: Número total de páginas.
- currentPage: Página actual.
- cantidadesPages: Array de cantidades de páginas a mostrar en la paginación.
- pageChange: Evento que se emite cuando se cambia de página.
- pageSizeChange: Evento que se emite cuando se cambia el tamaño de la página.
Importante: Para gestionar los eventos pageChange
y pageSizeChange
correctamente, se deben realizar las llamadas al backend manualmente en el componente padre.
Este componente combina la tabla reutilizable y la paginación reutilizable.
import { DynamicTablesSAComponent } from 'generics-lib';
// ...
<dynamic-table
[headers]="headers2"
[mostrarAcciones]="true"
(accionClick)="handleEventoBotonAccion($event)"
(BotoneraClick)="handleEventoBotonera($event)"
[data]="listadoHistorialContratosAsociados.resultados"
[pageSize]="pageSize"
[totalResults]="totalResults"
[totalPages]="totalPages"
[currentPage]="currentPage"
[cantidadesPages]="cantidadesPages"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
[mostrarPaginador]="true"
></dynamic-table>
Marzo-2024
Run ng generate component component-name --project generics-lib
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project generics-lib
.
Note: Don't forget to add
--project generics-lib
or else it will be added to the default project in yourangular.json
file.
Run ng build generics-lib
to build the project. The build artifacts will be stored in the dist/
directory.
After building your library with ng build generics-lib
, go to the dist folder cd dist/generics-lib
and run npm publish
.