Set focus on element

by

Edit 2022:
Read a more modern way with @Cichy’s answer below

Modify the show search method like this

showSearch(){
  this.show = !this.show;  
  setTimeout(()=>{ // this will make the execution after the above boolean has changed
    this.searchElement.nativeElement.focus();
  },0);  
}

More Related Contents:

  1. Read response headers from API response – Angular 5 + TypeScript
  2. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  3. How to add CORS request in header in Angular 5
  4. Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found
  5. Confirm password validation in Angular 6 [duplicate]
  6. Compile dynamic HTML in Angular 4/5- something similar to $compile in Angular JS
  7. How to use Angular4 to set focus by element id
  8. Angular 5 – Copy to clipboard
  9. Migrating Angular 4.x to Angular 5 [duplicate]
  10. Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]
  11. angular-i18n work-around for translations in code?
  12. Get access to FormControl from the custom form component in Angular
  13. Create a reusable FormGroup
  14. Differences between value and ngValue in Angular 5
  15. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  16. Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form
  17. Angular 5 Reactive Forms – Radio Button Group
  18. How to update / upgrade from Angular 4 to Angular 5+
  19. Use OpenLayers 4 with Angular 5
  20. Limit input field to two decimal places – Angular 5
  21. How to dynamically add FormControl to FormArray on button click in Angular?
  22. Angular5: Deploying Angular application to multiple clients
  23. What is the proper use of an EventEmitter?
  24. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  25. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  26. To enable or disable the input field based on the value of select component in angular
  27. Filtering specific column in Angular Material table in angular 5 [duplicate]
  28. Custom ExceptionHandler change detection lag
  29. Mocking Child Components – Angular 2
  30. How to solve the circular dependency

Leave a Comment