I have a button on an html file where I call a ts function that using a content of a different html file

I have a button on an html file where I call a ts function that using a content of a different html file. The problem is I dont know how to get that content of the html file..

here is my ts file

import { Component, ElementRef, ViewChild } from '@angular/core';
import jsPDF from 'jspdf';
import { NgxCaptureService } from 'ngx-capture';

declare var require: any;

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from "pdfmake/build/vfs_fonts";
import { tap } from 'rxjs/operators';
import template from "./inspector_module/template";


const htmlToPdfmake = require("html-to-pdfmake");
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //templateUrl: './inspector_module/charts.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = "Angular";
  img = "";

  @ViewChild("screen", { static: true }) screen: any;

  constructor(private captureService: NgxCaptureService) {}

  ngOnInit() {
    console.log(this.screen.constructor.name);
    this.captureService
      .getImage(this.screen.nativeElement, true)
      .pipe(
        tap(img => {
          this.img = img;
          console.log(img);
        })
      )
      .subscribe();

  }


  public downloadAsPDF() {
    const app = document.getElementById("app");
    const p = document.createElement("div");
    p.textContent = template;
    app?.appendChild(p);
    console.log("Template: " + template);
    const doc = new jsPDF();
    doc.addImage(this.img, 15, 40, 500, 50);
    const pdfTable = this.screen.nativeElement;
    var html = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = { content: html };
    doc.save('TestPDF') 
  }
}

the html content

<div #screen >
 
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">haha test me
    </canvas>

  <h2>My Capture:</h2>
  <img src="{{img}}"  #imgpdf />
  </div>

and I have the button in a different html file that is linked to the ts file

<button class="btn btn-primary" (click)="downloadAsPDF();">Export To PDF</button>