0

Using Angular v14, I need to focus an input that can be found quite deep within the component's dom. The thing is, the input itself is deep inside a component which I imported from a library. I need a way to grab a hold of the input without knowing the component's structure.

I have found documentation to access the specific input using JQuery:

$('.dx-datagrid .dx-datagrid-search-panel').dxTextBox('instance').focus();

, but I have not managed to get a hold of the element in Angular.

I tried using query selector:

const inputElement = this.searchInput?.nativeElement?.querySelectorAll('input')?.[0];

@ViewChild('searchInput', { read: ElementRef }) searchInput: ElementRef;

<dxo-search-panel #searchInput [visible]="config.search?.enable && state.hasFilterRow"></dxo-search-panel>

Olivier
  • 1
  • 2
  • @ViewChild is the most correct approach. But without details (Or even a stackblitz) I doubt you'll be able to get a decent, non-guessing answer – Austin T French Jun 05 '23 at 17:58

0 Answers0