How to set focus to the div when button click in angular 2?

Question

I want to set focus to the div which is top on the page, when click the button. It means it validates when click the button, if validation fails, it need to focus the top of the page, where the validation error shows.

So how to get the focus the top of the page div. And form is in modal-dialog.

Answer 1

If you want to make a non-focusable element focusable, you must add a tabindex attribute to it and div falls in that category .

More on tabIndex

use some thing like this

<div tabindex="1"></div>

or even make a directive for the same which will help you customize the functionality

import { Directive, Input, ElementRef, Inject, OnChanges } from '@angular/core';

@Directive({ selector: '[focusField]' })
export class FocusDirective implements OnChanges {

  @Input('focusField') focusField: any;
  constructor(@Inject(ElementRef) private element: ElementRef) { }

  ngOnChanges(changes){
    if(changes.focusField.currentValue){
      this.element.nativeElement.focus();
    }
  }
}

Answer 2

You can try to add a @ViewChild in your component and use .nativeElement.focus()

component html :

<div #myerr class="my-error">{{myError}}</div>

component ts :

 export class YourComponent implements AfterViewInit {
   @ViewChild('myerr') myErrorText: ElementRef;


  ngAfterViewInit() {
    this.myErrorText.nativeElement.focus();
  }
}

You can change ngAfterViewInit() by your triggering function. If you want, you can give me your code and I adapt my answer.

Answer 3

try something like that

component.html

 <div #topElement> </div>
 <button (click)="changeFocus()"> change Focus </button>

component.ts

export default class MyComponent {
 changeFocus() {
     window.location.hash = '#topElement';
 }
}