What is the method for inserting a loop into a print template?

There is a print method available:

printData(data): void {
    console.log(data);
  let printContents, popupWin;
    popupWin = window.open();
    popupWin.document.write(`
    <html>
        <head>
        <title>Print tab</title>
        <style>
            table {
                font-family: arial, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }

            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #dddddd;
            }
        </style>
        </head>
    <body onload="window.print()">
       <table>
        <tr>
            <th>Service Code</th>
            <th>Service Name</th>
            <th>Due Date</th>
            <th>Amount Due</th>
        </tr>
        for (let entry of someArray) {
        <tr>
            <td>{{entry.name}}}</td>
            <td>{{entry.code}}</td>
            <td>{{entry.something}}</td>
            <td>{{entry.something2}}</td>
        </tr>
        }


        </table>
    </body>
    </html>`
    );
    popupWin.document.close();
}

I am looking to include a loop in the template to display all data within the tr tags. Any suggestions on how to achieve this?

Answer №1

Give this a shot:

displayInfo(data): void {
    console.log(data);
    let printContents, popupWin;
    popupWin = window.open();
    var tableHtml = "";
    for (let item of someList) {
        tableHtml += `<tr>
                        <td>`+item.name+`</td>
                        <td>`+item.id+`</td>
                        <td>`+item.property+`</td>
                        <td>`+item.property2+`</td>
                    </tr>`;
    }
    popupWin.document.write(`
    <html>
        <head>
        <title>Print Table</title>
        <style>
            table {
                font-family: Arial, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }

            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2;
            }
        </style>
        </head>
    <body onload="window.print()">
       <table>
        <tr>
            <th>Service Code</th>
            <th>Service Name</th>
            <th>Due Date</th>
            <th>Amount</th>
        </tr>
        `+tableHtml+`
        </table>
    </body>
    </html>`
    );
    popupWin.document.close();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for upgrading ag-Grid to newer versions?

In the past, I was using: "ag-grid": "^18.1.2", "ag-grid-angular": "^18.1.1" Version "^18.1.1" of "ag-grid-enterprise". However, as my license expired, I obtained new versions of the licenses. I then included: "@ag-grid-community/angular": "^22.1.1", ...

evaluate a utility function that operates on children

In managing a component that requires children (referred to as the layout component), there is a specific function nested within this component that processes these child components. Testing this function poses a challenge, so I decided to extract it into ...

What is the best way to run tests on this asynchronous function using Jasmine?

My role in the service is listo: function () { var promiseResolved = $q.defer(); setTimeout(function () { promiseResolved.resolve(true); }, 2000); return promiseResolved.promise; } During my testing ...

What is the best method for distinguishing between regular users and admin users in the layouts of an Angular application?

Recently, I've received details about a new project I'll be working on. It's an administrative application that will have multiple users with various roles and permissions to manage. Option 1: Develop a Lazy Loaded module for each user, inc ...

Tips for utilizing the value of object1.property as a property for object2

Within the template of my angular component, I am attempting to accomplish the following: <div> {{object1.some_property.(get value from object2.property and use it here, as it is a property of object1)}} </div> Is there a way to achieve this ...

The type 'function that takes in a CustomEvent and returns void' cannot be assigned to a parameter of type 'EventListenerOrEventListenerObject'

When I upgraded from TypeScript version 2.5.3 to 2.6.1, my custom event setup started giving me an error. window.addEventListener('OnRewards', (e: CustomEvent) => { // my code here }) [ts] Argument of type '(e: CustomEvent) => ...

Why do I keep being told that the property doesn't exist?

I have the following code in one file: function test<T extends {}>(arg:T):any { return arg.name } In another file, I have this code: interface IItem { name: string } console.log(test<IItem>({name:'3'})) When I try to access ...

Sending properties via react router link in TypeScript

I have successfully defined my routes and made my links functional. I am now trying to figure out how to pass a prop through the link when the component is called by the router. It seems like a challenging task. To understand better, take a look at this c ...

Troubleshooting Angular2: How to fix a component that isn't printing anything to the console

I am encountering an issue with my component's code where none of the versions seem to be functioning properly. When I check the console in the browser, it appears blank. export class AssetsComponent { s = 'Hello2'; constructor() { ...

Dealing With HttpClient and Asynchronous Functionality in Angular

I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...

Adjust the alignment of divs in Angular

In developing a dashboard, I have successfully displayed key value pairs in a component by retrieving them from an environment.ts file. Now, I am looking to rearrange the positioning of the individual testcard components to align with a specific layout sho ...

Merge mocha with Typescript, and include the watch feature

For my project, I have set up mocha to test my Typescript code. The issue arises when running the command: mocha ts/test --compilers ts:typescript-require Every time I make a change, it fails with an error message like this: error TS2307: Cannot find mo ...

The combination of React, Typescript, and MaterialUI Paper results in a stunning design with a sleek and

Whenever I include <Paper elevation={0} /> within my react component, I encounter the following issue: Cannot read properties of undefined (reading 'background') TypeError: Cannot read properties of undefined (reading 'background&apos ...

What is the best way to interrupt the current song playing?

I am currently working on developing an audio player using reactjs that has a design similar to this https://i.sstatic.net/Hnw0C.png. The song boxes are rendered within a map function, and when any song box is clicked, it should start playing. However, I a ...

Filtering relations in TypeORM can be achieved by using various query criteria

Hello, I have a couple of questions regarding TypeORM in TypeScript. Using Find() Only: I have two tables in my database - Users and Sessions. I am interested in retrieving a specific User along with all their Sessions where the sessions_deleted_at column ...

"Exploring the Power of Angular with HTML Checkboxes

I am trying to display a checkbox as either checked or unchecked based on the value of a variable {{CurrentItem.STATUS}}, which can be either 1 or 0. Is there an Angular solution that does not require any javascript/typescript to achieve this? I want the ...

The Bootstrap modal backdrop is now displaying prominently in front of the modal following the latest Chrome update

Chrome version: Version 111.0.5563.64 (Official Build) (x86_64) Bootstrap: 4.3.1 Recently, there has been an issue with the modal backdrop appearing in front of the modal itself after a Chrome update. The problem does not seem to be related to z-index, an ...

Changing the data type of a column in an Excel file from XLSX to

I am currently working with the XLSX npm package and attempting to download a sample Excel file, add some data to it, and then upload it back. The fields in the file include MOBILE NUMBER, DATE, TIME, and NAME. When I upload the file, the values for the DA ...

Inversify: class-based contextual dependency injection

I am currently experimenting with injecting loggers into various classes using inversify. My goal is to pass the target class name to the logger for categorization. The challenge I'm facing is the inability to access the target name from where I am c ...

gulp-tsc cannot locate the src directory

I am currently working on developing a .NET Core application using Angular2, but I keep encountering the following error: /wwwroot/NodeLib/gulp-tsc/src/compiler.ts' not found. I'm having trouble pinpointing what I might be missing. tsconfig.js ...