Angular2 - Focus on input after modal load

Question

I built a component in Angular 2, and I'm trying to set the focus on the specific input after a modal is loaded.

Here is what I've done so far:

@Component({
selector: 'login',
templateUrl: './login.component.html'
})
export class LoginComponent {
  showModal: boolean = false;
  @ViewChild('username1') el: ElementRef;

    constructor(private elementRef: ElementRef, private modalService: ModalService {
    this.modalService.LoginModal.subscribe((show) => {
        this.showModal = show;

        if (show) {
            $('#modal_login_root').modal();
            this.el.nativeElement.focus();
        }
        else {
            $('#modal_login_root').modal('hide');
        }
    });
}

And my input is:

<input #username1 type="email" class="form-control email active" name="username"
 placeholder="{{ 'Login_EmailField' | translate }}" [(ngModel)]="username" />

And it's not working :(

Here is example of using ElementRef https://stackoverflow.com/a/40537428/924646 — andrey.shedko, Jul 25 '17 at 15:56
I would recommend using ng2-bootstrap for your modals: https://valor-software.com/ngx-bootstrap/#/modals — Luke Becker, Jul 25 '17 at 16:10

score 1 · Accepted Answer · answered Jul 25 '17 at 15:54

you can't trigger any function until unless DOM rendered , wait till the your modal rendered and then trigger focus , if your using Jquery , then use jquery focus function..

so now you component look like this

@Component({
selector: 'login',
templateUrl: './login.component.html'
})
export class LoginComponent {
  showModal: boolean = false; 

    constructor(private elementRef: ElementRef, private modalService: ModalService {
    this.modalService.LoginModal.subscribe((show) => {
        this.showModal = show;

        if (show) {
            $('#modal_login_root').modal();
          setTimeout(function(){ 
            $('#username').focus();
           },1000)
        }
        else {
            $('#modal_login_root').modal('hide');
        }
    });
}

and your HTML look like this

    <input #username1 type="email"  id="username"
    class="form-control email active" name="username"
         placeholder="{{ 'Login_EmailField' | translate }}" [(ngModel)]="username" />

score 0 · Answer 2 · answered Jul 25 '17 at 16:08

0

Just add auto focus with input field

<input type="text" autofocus/>

answered Jul 25 '17 at 16:08

jaseelmp

357
2
5

3

Its not working. it works for a second and then the focus is disappear. – Or Assayag Jul 26 '17 at 06:37

score 0 · Answer 3 · answered Nov 11 '21 at 00:41

It can be done by using cdkTrapFocus and cdkFocusInitial to specify which element will have initial focus. for example:

In input element add cdkFocusInitial:

    <input
          matInput
          type="text"
          name="username"
          [(ngModel)]="username"
          cdkFocusInitial
    />

In container element add cdkTrapFocus, for example if div is the container element:

     <div class="login-container" cdkTrapFocus>

Angular2 - Focus on input after modal load

3 Answers3