Angular: Pass variables to window.open();

Question

I would like to open a new tab in Angular that won't have any functions at all. It is only a tab to display data for a user to print. My problem is that in the main app I do a call to get the data, but when I open the new tab, the variables don't hold the data from the main app. The variables are reset as if it is a new instance of the Angular app.

I create a new tab by doing the following:

window.open('#/print-report');

Then in my app modules the above route opens the PrintReportComponent:

{ path: 'print-report', component: PrintReportComponent},

But in the new tab, every variable throughout my program is reset to its default value when the app starts up. How do I "save" or "pass" any variables to this new tab?

use the localStorage which holds values on a domain.

user4676340
– user4676340

2018-07-30 11:27:13 +00:00
Commented Jul 30, 2018 at 11:27 — user4676340
– user4676340, Commented Jul 30, 2018 at 11:27

Akj · Accepted Answer · 2018-07-30 12:00:45Z

1

You can try something like this:

To print report:

  /**
   * Method is used to print report.
   * @param response - html response.
   */
  printReport(response) {

    let data = response;

    let Pagelink = "about:blank";

    let pwa = window.open(Pagelink, "_new");

    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {

      alert('Pop-up!', 'Please disable your Pop-up blocker and try again.', 'warning');

    }

    pwa.document.open();

    pwa.document.write(data);

    pwa.print();

  }

To download report:

    /**
     * Method is use to download file.
     * @param data - Array Buffer data
     * @param type - type of the document.
     */
    downLoadFile(data: any, type: string) {
        var blob = new Blob([data], { type: type.toString() });
        var url = window.URL.createObjectURL(blob);
        window.open(url);
    }

answered Jul 30, 2018 at 12:00

Akj

7,2513 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Link Over a year ago

Is it possible somehow to add a css library into that new page?

Yazan Mehrez · Accepted Answer · 2018-07-30 12:03:17Z

0

Try to use a service that let you get your data and then make sure to identify your data by id in the url, then you can do this in the new tab component in ngOnInit:

this.activatedRoute.params.subscribe((param: any) => {
            this.functionThatGivesYouData(this.activatedRoute.snapshot.params.id);
        });

So now you can make new request to same data by id. otherwise you should use localstorage which is not safe if you're holding confidential information.

answered Jul 30, 2018 at 12:03

Yazan Mehrez

1,2142 gold badges11 silver badges24 bronze badges

Comments

Paul Kruger · Accepted Answer · 2018-07-30 12:17:53Z

0

Just use local storage, as commented by @trichetriche

answered Jul 30, 2018 at 12:17

Paul Kruger

2,3447 gold badges30 silver badges52 bronze badges

2 Comments

Akj Over a year ago

but in this way you need to store data

Akj Over a year ago

as answer i have given you can direct pass data to method to print and down load no need to use local storage

Collectives™ on Stack Overflow

Angular: Pass variables to window.open();

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related