How to pass element with dynamic reference angular2?

Question

I have elements inside ngFor loop. Each elements get reference like this #f{{floor}}b. As you see floor is a variable. I want to pass these elements to a function. Code:

<button #f{{floor}}b (click)="onClick(f{{floor}}b)"></button>

I tried this but it only pass a string like this f5b not the element itself:

<button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>

Full code:

<div *ngFor="let floor of floors">
  <button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>
</div>

floor is a number and floors is an array of numbers.

Answer 1

It is okay to have same template variable name inside *ngFor, no need to make unique template variable name inside *ngFor.

Html

<div *ngFor="let floor of floors">
  <button #fb (click)="onClick(fb)"></button>
</div>

Even by having similar template name, you can query the DOM using @ViewChildren decorator.

@ViewChildren('fb') fbButtons:QueryList<any>;

Answer 2

Just use the same variable

<div *ngFor="let floor of floors">
  <button #btn (click)="onClick(btn)"></button>
</div>

or use $event.target/currentTarget