Generic Report

Reporte dinamico Angular 21+

Instalación

npm install @ddiazr/dynamic-report

Peer Dependencies

ng add @angular/cdk
npm i bootstrap @fortawesome/fontawesome-free

Campos

| Propiedad | Tipo | Obligatorio | Descripción | | --------------- | ---------------- | ----------- | ----------------------------------------------------- | | dataReport | any[] | ✅ Sí | Campos a para elegir al reporte | | dataReportDefault | any[] | ✅ Sí | Si es una creacion puede ir vacio y si es edicion lo que ya tiene almacenado | | dataSubmitted | function | ✅ Sí | Accion donde devuelve un objeto con los campos llenos del reporte |

Uso básico

import { DynamicReport } from '@ddiazr/dynamic-report';

@Component({
  imports: [DynamicReport],
  template: `
    <dr-dynamic-report
      [dataReport]="data()"
      [dataReportDefault]="dataDefault()"
      (dataSubmitted)="dataSubmitted($event)"
    />
  `,
})
export class AppComponent {
  data = signal<any[]>([
    {
      field: 'direccion',
      label: 'Direccion',
    },
    {
      field: 'tel',
      label: 'Telefono',
    },
  ]);
  //SI ES CREACION PUEDEN IR VACIO SI ES ACTUALIZACON PUEDE LLEVAR DATOS
  dataDefault = signal<any[]>();
  //ESTA FUNCION ES LA QUE RECIBE LA RESPUESTA YA FINAL GENERADA
  dataSubmitted(data: any) {
    console.log('reporte obtenido..', data);
  }
}

Configuración de estilos

En tu angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]

Licencia

MIT

Source files

src/ .ts !.d.ts