angular - Angular2 - Focus on input after modal load -

i built component in angular 2, , i'm trying set focus on specific input after modal loaded.

here i'v done 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 input is:

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

and not working :(

you can't trigger function until unless dom rendered , wait till modal rendered , trigger focus , if using jquery , use jquery focus function..

so component 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 html this

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