Autofocus attribute does not work properly on <input> with Angular

I'm facing impediments with an HTML <input /> with autofocus attribute using Angular.
I made a component InputComponent that has an @Input autoFocus.
My goal is to reflect this attribute on the tag <input /> in order to focus it when the page is loaded / refreshed.
The following syntaxes do work with raw code:

<input autofocus />
<input autofocus="" />
<input autofocus="true" />
<input autofocus="'true'" />
<input autofocus="autofocus" />
<input autofocus="'autofocus'" />


But I'm not able to make it work using the @Input autoFocus valued as true, 'true' or 'autofocus', trying the following syntaxes:

<input [autofocus]="autoFocus" />
<input [attr.autofocus]="autoFocus" />
<input autofocus="{{ autoFocus }}" />


I even tested these syntaxes with raw values without anymore success:

<input [autofocus]="'autofocus'" />
<input [autofocus]="'true'" />
<input [autofocus]="true" />
<input [attr.autofocus]="'autofocus'" />
<input [attr.autofocus]="'true'" />
<input [attr.autofocus]="true" />
<input autofocus="{{ 'autofocus' }}" />
<input autofocus="{{ 'true' }}" />
<input autofocus="{{ true }}" />


If I inspect the HTML DOM with chrome debugger, everything seems fine, final code is always <input autofocus="true" />. But the <input /> is still not focused when the page is loaded / refreshed !
It feels like interpreted code is done too late for the autofocus to be taken in account.
I wonder if someone else faced the same issue and found a solution ?
I guess I would use a directive like this exemple if I do not find a better solution.

Continue reading...