Build a dynamic URL on anchor tag click - Angular 5

ng-href angular 6
routerlink not working angular 7
angularjs href ng-click
angular 5 href
angular routerlink with params
angular anchor tag
routerlink absolute path
routerlink relativeto

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

}

yes, just use href:

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

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

so:

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

ngHref, Using AngularJS markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before AngularJS has a chance to <a id="link​-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br /> <a id="link-6"  (click) should work for the anchor tags in angular 5. I have tried it. The code seem to be alright to me except the sweet alert ( I don't know what that is). Try adding a console.log in the start of the method and see if you get that in th elogs

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

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

RouterLink, If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment. For instance ['/team', teamId​, '  Ben Nadel presents a polyfill for jump-to-anchor functionality that is not currently supported in the Angular 5 Router. This polyfill seamlessly adds support with no additional "application" logic. And, it can be seamlessly removed in the future when it is no longer needed.

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

Set the document title, Your app should be able to make the browser title bar say whatever you want it to say. The root component of the application is an element contained within the <​body> tag. Bind that method to three anchor tags and voilà! platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule }  Then, the value is fetched using the ID of the file input using document.getElementById() and is casted to an HTMLElement type. HTMLElement represents any element in the document and implements Event Handler interface, so now we can call click(). Successfully, the file browser is triggered to open.

Navigation • Angular, In this lecture we've shown how we can navigate between routes in Angular Click here to visit our frequently asked questions about HTML5 video. We could simply hardcode the URL s in the href anchor attributes on our navigation page again from the server which defeats the purpose of trying to create an SPA . Angular Event binding - Button Click. Usually, In any angular applications, User clicks on the button for form submission or navigation from one page to other using clicking button. Internally when the button is clicked, You need to handle some logic for form submission or navigate to some other page.

Rendering hyperlinks from HTML strings with Angular, Using Ionic 4 and Angular we explore how to render and activate hyperlinks embedded With this in mind we'll be using Ionic 4 to create the following Android Open the ionic-dynamic-links/src/app/app.module.ts root module and the user to click on them and open their respective URLs within the Ionic  The <base> tag in HTML is a relatively little known element, having become a fully fledged part of HTML5 quite recently. It enables you to do two things: Set any URL you choose as the base

Empty href attribute navigates to the app base · Issue #7294 , My Link would do nothing in Angular 1.x, but it navigates to the app base in Projects 5 to host and review code, manage projects, and build software together. .com/questions/35639174/passive-link-in-angular-2-a-href-equivalent case that both a (click) and href attribute are specified on an anchor. When setting up routing in an angular application, the first step is to set the base path using the base href element. The base path tells the angular router, how to compose the navigation URLs.

Comments
  • Hi, JavaLearner. Have you find the solution? I have similar problem.
  • 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">
  • 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">
  • that way the dom node lost "<a>" styling and behaviour.