Display content exclusively in PDF format

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.

javascriptangulartypescriptpdfjspdf

Answer №1

If you're wondering why the PDF div isn't showing up, it's because Angular needs time to create and populate its content during the change detection cycle. To solve this issue, consider using ChangeDetectorRef to manually trigger the component's change detection before rendering the PDF.

component.html

<div #PDF *ngIf="showPDF">
<p>My Name is</p> 
<p>{{fName}} {{lName}}<p>
</div>

<button class="btn btn-primary" type="submit" (click)="pdfMethod()">PDF</button>

component.ts

import { Component,ViewChild,ElementRef, ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef){}

showPDF = false;
@ViewChild('PDF') PDF: ElementRef;
//@ViewChild('PDF', {static: false) PDF: ElementRef;//for angular 9

pdfMethod()
{
    this.showPDF = true;
    this.cdr.detectChanges();
        var pdf = new jsPDF('p', 'pt', 'letter');
        pdf.addHTML(this.PDF.nativeElement, () => {
          pdf.save(`sum.pdf`);
        });
}

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

Create a union type by utilizing indices of an array type

For instance: type BasicTheme = { name: 'basic'; colors: [string, string]; }; type AdvancedTheme = { name: 'advanced'; colors: [string, string, string, string]; }; type MainColor = ???; // 'main-1' | 'main-2&apo ...

typescript

The Keydown Event in Asp.net GridView may sometimes fail to be triggered

While working within a gridview on Internet Explorer, users can click on cells in one column to reveal a hidden textbox. After entering text into the textbox, users are instructed to press the Tab key to save changes. To accomplish this, a Javascript funct ...

c#javascriptasp.netgridview

How can I transfer the document id from Angular Firestore to a different component?

I'm seeking assistance on how to achieve a specific task related to pulling data from Firestore in my Angular application and displaying it in a list. Everything is working smoothly, including retrieving the document ID. My goal is to have the retrie ...

angulargoogle-cloud-firestore

Express server controller encountering premature return from locally executed async function

I have developed an API endpoint using Node/Express. I am trying to call a local function asynchronously within the controller function, but instead of receiving the expected asynchronous results, the called local function is returning undefined immediat ...

javascriptnode.jsexpressasync-await

Issue: When a function within a subscribe method does not return a value and its declared type is not 'void' or 'any', a TypeScript error occurs

In my Angular 2 project, I've created a basic service to check if the user is logged in. This service verifies the existence of the user object within the FirebaseAuth object. However, I encountered an error stating "lack of return statement" even tho ...

angulartypescriptfirebase

Utilize TypeScript to access scope within a directive

Is there a way to access the controller's scope properties using my custom TypeScript directive? For example, in this snippet below, I am trying to retrieve and log scope.message: /// <reference path="typings/angularjs/angular.d.ts" ...

angularjstypescript

Changing Angular 2 web app code to Ionic 2 mobile app code?

I currently have a web application code that was written using Angular 2. My goal is to create a hybrid mobile application by utilizing Ionic 2 for the same web application. Since Ionic 2 incorporates core concepts of Angular 2, I have a few questions: Is ...

angularjstypescriptionic-framework

Tips for ensuring only one submenu is open at a time

I have successfully created a responsive menu that is working well. However, I am facing an issue. I want only one menu to be open at a time. When a submenu is opened, the other menus should be hidden. How can I achieve this? Below is my Script code $( ...

javascriptjqueryhtmlcss

Configuration of an MVC-based web application

As a newcomer to web application development, I am currently working on building a web application using the Model-View-Controller pattern. My setup includes a MySQL database for the Model, JSP pages for the Views, and a DAO for the Controller. I am looki ...

javascriptjspwebweb-applications

Identifying keystrokes and triggering audio in Vue.js

Utilizing vue.js, the code snippet provided enables sound playback upon each button click. I am curious about how one can detect a keyboard press event to play a sound when the DOM is ready rather than waiting for button clicks. For instance, triggering ...

javascriptvue.jsvuejs2

Whenever I attempt to bring in AngularFireModule, an error promptly appears

I am experiencing some errors when trying to import AngularFireModule and initialize the app with environment.firebaseConfig. I have tried to solve the problem but without success. Can anyone provide guidance on what steps I should take? @NgModule({ decl ...

angulartypescriptfirebase

Error: Component with nested FormGroup does not have a valid value accessor for form control in Angular

In my setup, the parent component is utilizing a FormGroup and I am expecting the child components to notify any changes in value back to the parent. To achieve this, I am trying to implement NG_VALUE_ACCESSOR in the child component so that it can act like ...

angulartypescript

Distinguishing variations within subcategories that stem from a common origin

In my code example, I have two interfaces that both extend a common base interface. The "String" function takes an argument of type "StringAsset". My expectation was that if I were to call the "String" function and pass it a value of "NumberAsset", TypeScr ...

typescript

Inference of generic types within a TypeScript generic

In my coding journey, I came across a situation where I was dealing with generic classes. Specifically, I had a Generic class Generic<T> and another one called GenericWrap that used Generic as its maximum type parameter (denoted as U extends Generic& ...

typescriptgenerics

When the mouse hovers over DIV2, the background image of DIV1 will be replaced

I have a full-screen background div with the ID #background-change. Within that full-screen background, I have 3 Divs named .fullscreen-column-1, .fullscreen-column-2, etc. My goal is to change the background image of #background-change when the mouseove ...

javascriptcssbackground-image

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

My website contains a table with player names and servers, but I want to make them clickable for filtering purposes. For instance, clicking on a player name should reload the leaderboards to show which servers that player plays on, and clicking on a server ...

javascripthtmljqueryjsonajax

Automatically trigger a page reload using a jQuery function

Currently facing an issue with jQuery. I created a drop-down menu and would like it to expand when the li tag within the menu is clicked. Even though I am using the jQuery click function successfully, there seems to be a problem where the webpage refreshe ...

javascriptjqueryhtmlcssclick

Tips for Using Typescript Instance Fields to Prevent Undefined Values

After creating a few Typescript classes, I encountered an issue where I would get an undefined error when trying to use them after instantiating. I experimented with initializing my fields in the constructor, which resolved the problem, but I don't t ...

typescriptconstructorundefined

Update or overwhelm a node_module file reference

Let's say I have an installed node_module called magicalModule, which was installed using the command npm i magicalModule. To use it in my code, I import it like this: const magic = require('magicalModule'). Now, is there a way for me to o ...

javascriptnode.jsnpmdependency-managementpackage.json

Steps for leveraging pdfMake with live data

Recently delving into Angular, I've been exploring the capabilities of pdfMake. While I successfully incorporated static data, I'm facing challenges when attempting to utilize dynamic data. Any guidance on how to achieve this would be greatly app ...

javascripthtmlangulartypescriptpdfmake