ngfor template in Angular 2 and argument in function is not working

Question

I made this plunkr to show you what I want to get.

Actually the first part is working well but when I want to put it in a ngfor and nothing is working as intended.

What's working :

<div>
  <button (click)="showDownloadLink(link1)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #link1 href="" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>
</div>

<div>
  <button (click)="showDownloadLink(link2)" flex="auto">CLICK ON ME SENPAI 2 ! </button>
  <a id="test2_link" #link2 href="" (mouseover)="in()" (mouseout)="out()" hidden> Jquery  2should execute on hover </a>
</div>

What's not working :

<div *ngFor="#link of links">
  <button (click)="showDownloadLink(link)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #link href="{{link}}" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>
</div>

Any ideas?

EDIT : Both answer are working perfectly but can't accept both

Any reason why you use `Renderer` instead of normal template binding? — Günter Zöchbauer, Apr 18 '16 at 08:11
Yes there is a reason. But can't explain why on this post ^^" Look on it : http://stackoverflow.com/questions/36568082/open-download-link-in-javascript-angular2/36568320? — Slater, Apr 18 '16 at 08:13
It's really messy and I don't found the source of the problem yet ... :/ — Slater, Apr 18 '16 at 08:16
Not sure what problem you're referring to. The download link issue? — Günter Zöchbauer, Apr 18 '16 at 08:18
haw .... sorry , bad link ... ! ... I don't know why ( and my collegues neither ) but the link is decorated with the context of the apps before being rendered on the page ... :/ And it's only in the case that the url is given throught a var. If it's why a simple url ( String ) it's not decorated ... :/ ( I'll try to make a question about that problem later .... :/ ) — Slater, Apr 18 '16 at 08:24

Günter Zöchbauer · Answer 1 · 2016-05-02T08:50:35.823

2

#link in

<div *ngFor="let link of links">

is shadowing the #link in

<a id="test_link" #link

Changing the name makes it work

  <button (click)="showDownloadLink(linkx)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #linkx href="{{link}}" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>

Plunker example

edited May 02 '16 at 08:50

answered Apr 18 '16 at 08:11

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks for your response ! :) Both explain where is the problem :) – Slater Apr 18 '16 at 08:29

Thierry Templier · Accepted Answer · 2016-04-18T08:24:28.220

You should use the following instead:

<div *ngFor="#link of links">
  <button (click)="showDownloadLink(linkElt)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #linkElt [href]="link" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>
</div>

In you case, you had two variables with the same name:

link that corresponds to the current element of the loop (type string)
link that corresponds to the dom element of the a tag

There was a conflict at this level and the string variable was used (instead of the DOM element one) and you had the following error:

VM489 angular2.dev.js:23501TypeError: Cannot read property 'setAttribute' of undefined
 at BrowserDomAdapter.setAttribute (VM489 angular2.dev.js:23774)
 at DomRenderer.setElementAttribute (VM489 angular2.dev.js:13819)
 at DebugDomRenderer.setElementAttribute (VM489 angular2.dev.js:7283)
 at App.showDownloadLink (VM492 app.ts!transpiled:29)
 (...)

See this plunkr: https://plnkr.co/edit/NLCqRcs7ZiQi01d0o6eU?p=preview.

[attr.href] need to replace the href ? Oo any reason about that ? — Slater, Apr 18 '16 at 08:15
`href` is actually a property of the `a` tag so it's even better to use property binding instead of attribute binding. I updated my answer accordingly... — Thierry Templier, Apr 18 '16 at 08:24

ngfor template in Angular 2 and argument in function is not working

2 Answers2