Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

114
Vistas
Angular Printing a Filtered List

In my app, I have a button that prints a list when it's clicked. Right now, it can print the whole list, but I want it to print the filtered value. I declared the list in another component (child component) and the filter operation is also inside that component too. Here is my code, how can I achieve what I want?

Main TS:

@ViewChild(TabWarehouseDetailComponent, { static: false }) child;
printList() {
        let source: IEnvironmentTransactionSummary[] = [];
        source = this.child.EnvironmentTransactions;

        if (
            source && source.length > 0
        ) {
            const dialogRef = this._dialog.open(CommonDailogComponent, {
                width: "400px",
            });

            dialogRef.afterClosed().subscribe((result) => {
                if (result) {
                    let screenReport: IScreenReport = {
                        CaptionEN: "RoomActivityList",
                        Column1HeaderName: "Transaction Date",
                        Column2HeaderName: "Type",
                        Column3HeaderName: "Batch No",
                    };
                    screenReport.ScreenReportItems = [];
                    source.forEach((x) => {
                        screenReport.ScreenReportItems.push({
                            Column1Value: x.TransactionDate != null ? new Date(x.TransactionDate.toString()).toLocaleDateString("en-GB") : "",
                            Column2Value: x.CellTransactionType.Name,
                            Column3Value: x.BatchNo,
                        });
                    });
                    screenReport.ExportType = { Id: +result };
                    this._commonService
                        .saveGetListScreenReport(screenReport)
                        .subscribe((response: IAttachment) => {
                            this.pdfReport = response;
                            this.downloadFile(this.pdfReport);
                            this._messages.Show(
                                "Printed",
                                "SUCCESS",
                                3
                            );
                        });
                }
            });
        }
        else {
            this._messages.Show(
                "There is nothing inside the list!",
                "WARNING",
                3
            );
        }
    }

Child TS:

private _environmentTransactions: IEnvironmentTransactionSummary[];
@Input()
set EnvironmentTransactions(prm: IEnvironmentTransactionSummary[]) {
    if (prm != this._environmentTransactions) {
        this._environmentTransactions = prm;
        this.dataSource = new MatTableDataSource(prm);
    }
}

get EnvironmentTransactions(): IEnvironmentTransactionSummary[] {
    return this._environmentTransactions;
}
applyFilterEnviroment(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
    if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
    }
}
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda