Build a dynamic URL on anchor tag click - Angular 5

Question

I have a table of several anchor tags. I want to create an external URL dynamically on clicking each anchor tag. I tried using [routerLink] but it is getting the base URL appended. Is there any angular way of doing it ? Any help is much appreciated.

html

<ng-container matColumnDef="invoiceNo">
          <mat-header-cell *matHeaderCellDef > Invoice # </mat-header-cell>
          <mat-cell *matCellDef="let invoice"> 
            <a [routerLink]="getInvoiceUrl()"  target="_blank">
              {{invoice.invoiceNumber}}
            </a>
          </mat-cell>
        </ng-container>

ts

 getInvoiceUrl(){

return "www.google.com";

}

Hi, JavaLearner. Have you find the solution? I have similar problem. — Ali Altun
– Ali Altun, Commented May 21, 2019 at 17:09

David Anthony Acosta · Accepted Answer · 2018-08-01 19:31:55Z

3

yes, just use href:

<a [href]="getInvoiceUrl()">

Make sure you include http: else it will include the domain.

so:

return "http://www.google.com";

answered Aug 1, 2018 at 19:31

David Anthony Acosta

4,9381 gold badge21 silver badges21 bronze badges

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

1 Comment

DJ4186 Over a year ago

One issue is I want to create the link dynamically on. So when I add the function call in href.it is giving me bad response error. When I try to add it in (click) event again that is error .....Any suggestions.<a (click)="{{getInvoiceUrl(invoice.filePath)}}" target="_blank">

Hemant Vetal · Accepted Answer · 2020-01-27 09:05:57Z

2

public link="public"

use this in a tag --> [href]=link> {{ link }}

It will redirect to www.localhost:4200/public

answered Jan 27, 2020 at 9:05

Hemant Vetal

194 bronze badges

Comments

Sajeetharan · Accepted Answer · 2018-08-01 19:40:53Z

1

You need to configure your own routes if you are using routerLink, in your case just use [href]

<a href="{{getInvoiceUrl()}}">Link</a>

edited Aug 1, 2018 at 19:40

answered Aug 1, 2018 at 19:34

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

DJ4186 Over a year ago

One issue is I want to create the link dynamically on. So when I add the function call in href.it is giving me bad response error. When I try to add it in (click) event again that is error .....Any suggestions.<a (click)="{{getInvoiceUrl(invoice.filePath)}}" target="_blank">

Sasa · Accepted Answer · 2018-08-01 20:46:27Z

0

Could you use something other than an anchor tag - like perhaps have:

<span (click)="takeMeToDynamicUrl()">link text</span>

And then your method can create the URL and use any numb er of available methods to take you to the URL e.g.

document.location.href = 'https://dynamicallycreatedurl.com';

answered Aug 1, 2018 at 20:46

Sasa

114 bronze badges

1 Comment

netalex Over a year ago

that way the dom node lost "<a>" styling and behaviour.

Collectives™ on Stack Overflow

Build a dynamic URL on anchor tag click - Angular 5

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related