Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

116
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!