click button to open url but from ts function

Question

Requirement:

We need to open a php page on a new window. We have achieved like this way as shown below

.html code

 <a target="_blank" href="{{pdf}}">Download Pdf</a>

.ts code

ngOnInit()
{
this.loggedinuser = localStorage.getItem("USERNAME");
console.log(this.loggedinuser);
this.pdf = 'http://219.90.67.154/report-service/quicktask/TCPDF/examples/test-tcpdf.php?loggedinuser='+this.loggedinuser;
}

But we want to achieve it differently. Need to click a button from html, which will call a function, from this function everything should happen.

.html

 <button ion-button  (click)="saveit">Save</button>

.ts

saveit(){
// the url,html tag should be called from here , how ?
}

Possible duplicate of [Angular 2 - Redirect to an external URL and open in a new tab](https://stackoverflow.com/questions/42775017/angular-2-redirect-to-an-external-url-and-open-in-a-new-tab) — Muhammed Albarmavi, May 24 '18 at 08:10
https://stackoverflow.com/questions/45517884/drop-down-menu-option-selected-based-on-url-paramater/45517973 — Anilkumarr, Sep 22 '20 at 11:27

Pardeep Jain · Accepted Answer · 2018-05-24T09:32:33.433

8

You need to use window.open method of javascript to open URL on button click, like this -

 <button ion-button  (click)="saveit()">Save</button>
saveit(){
// the url,html tag should be called from here , how ?
window.open(URL);
}

edited May 24 '18 at 09:32

answered May 24 '18 at 08:05

Pardeep Jain

84,110
37
165
215

1

Dont forget that it should be (click)="saveit()" – BrianM May 24 '18 at 08:07

score 3 · Answer 2 · answered May 24 '18 at 08:16

HTML:

<button ion-button (click)="saveit()">Save</button>

Component:

saveit() {
    let loggedinuser = localStorage.getItem("USERNAME");
    let url = 'http://219.90.67.154/report-service/quicktask/TCPDF/examples/test-tcpdf.php?loggedinuser=' + this.loggedinuser;   
    window.open(url, '_blank');
}

click button to open url but from ts function

2 Answers2