Angular - Focus on input with dynamic IDs on click

Question

*There are a lot of similar questions but I have not found a true duplicate that answers my question Apologies if I missed something.

I have a page with several inputs

Answer 1

You can call foo.focus() in the button click handler. Since the scope of the template reference variable #foo is the template instance, it will refer to the sibling input element.

See this stackblitz for a demo.

---

If you need to set the focus from a method, pass foo to it as an argument:

focusOnInput(input): void {
  // Do something else here
  ...
  input.focus();
}