On my HTML page, I have two sections - one for inputting values and the other for viewing a PDF. To ensure that the PDF view is hidden until explicitly requested, I need it to remain invisible by default. It should only appear as a PDF when someone clicks on the 'Generate PDF' button.
<div class="col-12">
<input [(ngModel)]="fName" name="fname" placeholder="First Name">
<input [(ngModel)]="LName" name="lname" placeholder="Last Name">
</div>
<div #PDF>
<p>My Name is</p>
<p>{{fName}} {{lName}}<p>
</div>
<button class-"btn btn-primary" type="submit" (click)="pdfMethod">PDF</button>
TS
import * as jsPDF from 'jspdf';
@ViewChild('PDF') PDF: ElementRef;
pdfMethod(){
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML(this.PDF.nativeElement, () => {
pdf.save(`sum.pdf`);
});
}
I intend for the input fields to be initially visible, with the #PDF section in PDF format revealed only upon clicking the button. Although I attempted using *ngIf, the error message stating native element not defined appeared.