How to create a link to external URL in Angular 2

Question

I am new to Angular. I am starting with ver. 2.
I need to link to a file://... URL. I tried normal href:

Note: app is a model object of the web which deals with applications.

<a target="_blank" href="file://{{app.outputPath}}/index.html">no link here</a>.

That doesn't work - the link is there, with correct URL, but Angular seems to block the event somehow. Why?

So I've seen ng-href but that's for Angular 1.x. And there's no *ngHref from what I can tell. So this was just a naive try:

<a target="_blank" *ngHref="file://{{app.outputPath}}/index.html">over a directive</a>.

Also I have seen something with routing but that appears to be intended only for internal links within the application:

<a [router-link]="['/staticReport', {path: app.outputPath}]">see the report</a>.

app.component.ts:

@RouteConfig([
    ...
    {path:"/staticReport/:path", redirectTo: 'file://  ???? ' }
])

What's the way to create an external link?

Have you checked what the URL looks like that is generated in the DOM? (contexte menu on the link "Inspect element"). Actually "app is a model object of the web which deals with applications" doesn't provide much information. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 18, 2016 at 12:18

isherwood · Accepted Answer · 2017-06-28 15:38:54Z

21

I assume app is assigned async. You can work around this using the Elvis operator:

<a target="_blank" href="file://{{app?.outputPath}}/index.html">no link here</a>.

to not break the binding when Angular tries to resolve it before app actually has a value.

Original This worked for example:

@Component({
  selector: 'my-app',
  template: `
  <h2>Hello {{name}}</h2>
  <a target="_blank" [href]="'file://' + outputPath + '/index.html'">no link here</a>
`
})
export class App {
  outputPath:string = 'www.google.com';

  constructor() {
    this.name = 'Angular2';
  }  
}

Plunker

Actually, your first example works fine as well

<a target="_blank" href="file://{{outputPath}}/index.html">no link here</a>

Plunker

edited Jun 28, 2017 at 15:38

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Mar 18, 2016 at 11:11

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

10 Comments

Ondra Žižka Over a year ago

The URL value is ok. The link is there, and the href value is ok too. What seems to happen is that Angular2 somehow discards the click on that link.

Günter Zöchbauer Over a year ago

When you change the file:// to http:// the link works fine. With file:// and error message is printed to the console (Not allowed to load local resource: file://www.google.com/index.html). I don't see anything wrong with the link in Angular2.

Günter Zöchbauer Over a year ago

I guess this is a browser issue not an Angular issue. It works fine with a http:// URL which IMHO doesn't make it look like Angular interferes with such links.

Ondra Žižka Over a year ago

Seems you're right. stackoverflow.com/questions/5317834/…

Francesco Over a year ago

So the issue reported as example on Angular JS docs (docs.angularjs.org/api/ng/directive/ngHref): "<a href="....gravatar.com/avatar/{{hash}}">link1</a>", where AngularJS might not have a chance to replace the {{hash}} markup with its value before the user click on it, does it still apply to Angular 2? If still the case, using href="...{xxx}"> would still lead to the same problem.

|

Collectives™ on Stack Overflow

How to create a link to external URL in Angular 2

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related