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.

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.

• javascript
• angular
• typescript

2 Answers 2

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

Just use the same variable

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

or use $event.target/currentTarget