CODEWITHSUNDEEP
angular
rcarcia02
rcarcia02

Reputation: 967

Writing to txt file using variables

In my Angular program, I want to be able to click on a button which then opens a window displaying a report or summary of that month and have successfully done so, but I can't include variables for some reason. Whenever I have Report for date {{monthlyEndDate}} in my html text, it prints out exactly that without using the binding. How can I accomplish this?

Here's my .ts file and my button just calls the printMonthlyReport() function:

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { EmpInfo } from './emp-info';
import { EmpInfoService } from './emp-info.service';
import { PTOData } from './pto-data';
import { PTODataService } from './pto-data.service';

@Component({
    selector: 'pto-report',
    templateUrl: `./report.component.html`,
    styleUrls: ['./report.component.css']
})

export class ReportComponent {

    date = new Date();
    monthlyStartDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
    monthlyEndDate = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0);
    
    printMonthlyReport(): void {
        let popupWin;
        popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
        popupWin.document.open();
        popupWin.document.write(`
          <html>
            <head>
              <title>Monthly PTO/ETO Report</title>
            </head>
            <body>
              <h3>Monthly PTO/ETO Payroll Report {{monthlyEndDate}}</h3>
            </body>
          </html>
`)
    }
}

Upvotes: 0

Views: 262

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71891

You should use 

`bla bla ${this.fieldName} bla bla`

So, access the field variable using this, and wrap your variable around ${} within a template string (``)

popupWin.document.write(`
      <html>
        <head>
          <title>Monthly PTO/ETO Report</title>
        </head>
        <body>
          <h3>Monthly PTO/ETO Payroll Report ${this.monthlyEndDate}</h3>
        </body>
      </html>
`)

Upvotes: 1

Related Questions