0

stackblitz code

i am working on a angular application to export PDF but can't see the data values in exported PDF. my approach: i have 2 components (login,home) ,created a button(export) in login component and which will navigate the user to home component and afterViewInit it will generate the pdf. i wrote the pdf generation code in ngAfterViewInit() lifecycle hook. when i try to await for the response it is not working.

i tried the following 2 ways in home.component.ts but still nothing is working

ngAfterViewInit(): void {
    this.fetchUserData().then(() => {
      this.generatepdf();
      this.router.navigateByUrl('login');
    });
  }


async ngAfterViewInit(): void {
    await this.fetchUserData();
    this.generatepdf();
    this.router.navigateByUrl('login');

}

is there a way we can await for the result and generate PDF ?

Expected Result : awaited/fetched response should appear on generated PDF :)

sravan ganji
  • 4,774
  • 3
  • 25
  • 37

2 Answers2

1

Your pdf file is generated before the execution of change detection. Inject private cdr: ChangeDetectorRef to your constructor and call this.cdr.detectChanges() after you set this.users.

Forked stackblitz

noamyg
  • 2,747
  • 1
  • 23
  • 44
-1

Yes, you can use the async/await pattern:

async ngAfterViewInit(): Promise<void> {
    await this.fetchUserData();
    this.generatepdf();
    this.router.navigateByUrl('login');

}

Demo: https://stackblitz.com/edit/jspdf-final-nwesmc?file=app%2Fviews%2Fhome%2Fhome.component.ts

Michael Kang
  • 52,003
  • 16
  • 103
  • 135