18

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?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ondra Žižka
  • 43,948
  • 41
  • 217
  • 277
  • 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 Mar 18 '16 at 12:18

1 Answers1

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

isherwood
  • 58,414
  • 16
  • 114
  • 157
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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. – Ondra Žižka Mar 18 '16 at 12:22
  • 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 Mar 18 '16 at 12:39
  • 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. – Günter Zöchbauer Mar 18 '16 at 13:54
  • 1
    Seems you're right. http://stackoverflow.com/questions/5317834/workaround-for-href-file-in-firefox – Ondra Žižka Mar 18 '16 at 14:03
  • So the issue reported as example on Angular JS docs (https://docs.angularjs.org/api/ng/directive/ngHref): "link1", 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. – Francesco May 12 '17 at 15:17
  • @Francesco this answer (and the question) is about Angular, not Angularjs. – Günter Zöchbauer May 12 '17 at 15:22
  • @Günter sorry if I pose the question not clearly enough. From your last comment, then I get that the same issue does not affect Angular (as it was for AngularJS). Thanks – Francesco May 12 '17 at 15:30
  • I see. I stopped reading when I sale the `docs.angularjs.org` link - sorry. No, Angular2 works differently. The bindings like `{{}}` are resolved before the component is added to the DOM, therefore the browser never gets `{{}}`. If you use AoT compilation, these bindings are resolved even before anything is loaded into the browser. – Günter Zöchbauer May 12 '17 at 17:36
  • sidenote: the '?' is not the "Elvis Operator" - it's the "Optional Chaining Operator" – Lord Midi Oct 06 '18 at 21:11
  • Never heard that name. Only Elvis or safe-navigation. Do you have a link to TS docs where it is used as official name? – Günter Zöchbauer Oct 07 '18 at 07:13