CODEWITHSUNDEEP
angularangular5
DJ4186
DJ4186

Reputation: 169

Build a dynamic URL on anchor tag click - Angular 5

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";

}

Upvotes: 4

Views: 11922

Answers (4)

Hemant Vetal
Hemant Vetal

Reputation: 19

public link="public"

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

It will redirect to www.localhost:4200/public

Upvotes: 2

Sasa
Sasa

Reputation: 11

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';

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222722

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

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

Upvotes: 1

David Anthony Acosta
David Anthony Acosta

Reputation: 4918

yes, just use href:

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

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

so:

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

Upvotes: 3

Related Questions