Set focus on input element

Question

I am working a front-end application with Angular 5  and I need to have a search box hidden  but on click of a button  the search box should be displayed and focused   I have tried a few ways found on StackOverflow with directive or so  but can t succeed   Here is the sample code    Component      selector   my-app      template         lt div gt       lt h2 gt Hello lt  h2 gt       lt  div gt       lt button  click    showSearch    gt Show Search lt  button gt       lt p gt  lt  p gt       lt form gt         lt div  gt           lt input  ngIf  show   search type  text     gt                     lt  div gt       lt  form gt                export class App implements AfterViewInit      ViewChild  search   searchElement  ElementRef     show  false    name string    constructor                showSearch        this show    this show          this searchElement nativeElement focus        alert  focus           ngAfterViewInit         this firstNameElement nativeElement focus          The search box is not set to focus   How can I do that

User · Answer

You should use html autofocus for this    lt input  ngIf  show   search type  text  autofocus   gt     Note  if your component is persisted and reused it will only autofocus the first time the fragment is attached  This can be overcome by having a global dom listener that checks for autofocus attribute inside a dom fragment when it is attached and then reapplying it or focus via javascript

User · Answer

html of component   lt input  cdkTrapFocusAutoCapture   quot show quot   cdkTrapFocus   quot show quot  gt   controler of component  showSearch       this show    this show           and do not forget about import A11yModule from  angular cdk a11y import   A11yModule   from   angular cdk a11y

User · Answer

Easier way is also to do this   let elementReference   document querySelector   lt your css   id selector gt         if  elementReference instanceof HTMLElement            elementReference focus

User · Answer

In Angular  within HTML itself  you can set focus to input on click of a button    lt button  click   myInput focus    gt Click Me lt  button gt    lt input  myInput gt  lt  input gt

User · Answer

This directive will instantly focus and select any text in the element as soon as it s displayed  This might require a setTimeout for some cases  it has not been tested much    import   Directive  ElementRef  OnInit   from   angular core     Directive     selector    appPrefixFocusAndSelect       export class FocusOnShowDirective implements OnInit      constructor private el  ElementRef        if   el nativeElement  focus            throw new Error  Element does not accept focus                  ngOnInit    void       const input  HTMLInputElement   this el nativeElement as HTMLInputElement      input focus        input select            And in the HTML     lt mat-form-field gt        lt input matInput type  text  appPrefixFocusAndSelect  value    etc   gt    lt  mat-form-field gt

User · Answer

There is also a  DOM attribute called cdkFocusInitial which works for me on inputs  You can read more about it here  https   material angular io cdk a11y overview

User · Answer

To make the execution after the boolean has changed and avoid the usage of timeout you can do   import   ChangeDetectorRef   from   angular core    constructor private cd  ChangeDetectorRef      showSearch      this show    this show      this cd detectChanges      this searchElement nativeElement focus

User · Answer

I m going to weigh in on this  Angular 7 Solution  input  appFocus   quot focus quot       import  AfterViewInit  Directive  ElementRef  Input   from   angular core     Directive     selector   input appFocus       export class FocusDirective implements AfterViewInit       Input  appFocus     private focused  boolean   false     constructor public element  ElementRef lt HTMLElement gt            ngAfterViewInit    void          ExpressionChangedAfterItHasBeenCheckedError  Expression has changed after it was checked      if  this focused          setTimeout      gt  this element nativeElement focus    0

User · Answer

Modify the show search method like this showSearch      this show    this show      setTimeout     gt      this will make the execution after the above boolean has changed     this searchElement nativeElement focus        0

User · Answer

I m having same scenario  this worked for me but i m not having the  quot hide show quot  feature you have  So perhaps you could first check if you get the focus when you have the field always visible  and then try to solve why does not work when you change visibility  probably that s why you need to apply a sleep or a promise  To set focus  this is the only change you need to do  your Html mat input should be   lt input  yourControlName matInput gt   in your TS class  reference like this in the variables section   export class blabla         ViewChild  quot yourControlName quot   yourControl   ElementRef   Your button it s fine  calling    showSearch              blabla    then finally         this yourControl nativeElement focus       and that s it  You can check this solution on this post that I found  so thanks to -- gt  https   codeburst io focusing-on-form-elements-the-angular-way-e9a78725c04f

User · Answer

Only using Angular Template  lt input type  quot text quot   searchText gt    lt span  click   quot searchText focus   quot  gt clear lt  span gt

User · Answer

This is working i Angular 8 without setTimeout   import  AfterContentChecked  Directive  ElementRef  from   angular core     Directive     selector   input inputAutoFocus      export class InputFocusDirective implements AfterContentChecked     constructor private element  ElementRef lt HTMLInputElement gt         ngAfterContentChecked    void       this element nativeElement focus            Explanation  Ok so this works because of  Change detection  It s the same reason that setTimout works  but when running a setTimeout in Angular it will bypass Zone js and run all checks again  and it works because when the setTimeout is complete all changes are completed  With the correct lifecycle hook  AfterContentChecked  the same result can be be reached  but with the advantage that the extra cycle won t be run  The function will fire when all changes are checked and passed  and runs after the hooks AfterContentInit and DoCheck  If i m wrong here please correct me   More one lifecycles and change detection on https   angular io guide lifecycle-hooks  UPDATE  I found an even better way to do this if one is using Angular Material CDK  the a11y-package  First import A11yModule in the the module declaring the component you have the input-field in  Then use cdkTrapFocus and cdkTrapFocusAutoCapture directives and use like this in html and set tabIndex on the input    lt div class  dropdown  cdkTrapFocus cdkTrapFocusAutoCapture gt       lt input type  text tabIndex  0  gt   lt  div gt    We had some issues with our dropdowns regarding positioning and responsiveness and started using the OverlayModule from the cdk instead  and this method using A11yModule works flawlessly

[angular] Set focus on <input> element

Examples related to angular

Examples related to angular5

Examples related to angular-forms