Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

115
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda