Por algum motivo, quando acesso tento acessar this.userNameInput.nativeElement.focus() no método ngOnInit() do sign-component o navegador explode um erro dizendo que this.userNameInput is not defined:
ERROR TypeError: "this.userNameInput is undefined"
sign-component.ts
export class SignInComponent implements OnInit {
loginForm: FormGroup;
@ViewChild('userNameInput', { static: false }) userNameInput: ElementRef<HTMLInputElement>;
constructor(
private formBuilder: FormBuilder,
private authService: AuthService,
private router: Router,
private platformDetectionService: PlataformDetectorService) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
userName: ['', Validators.required],
password: ['', Validators.required]
});
this.platformDetectionService.isPlatformBrowser() && this.userNameInput.nativeElement.focus();
}
}Dei uma pesquisada e encontrei uma solução:
- incluir o método
ngAfterViewInit()e, dentro dele, acessar as propriedades conforme explicado em aula:
ngAfterViewInit(){
this.platformDetectionService.isPlatformBrowser() && this.userNameInput.nativeElement.focus();
}Gostaria de saber se isso é uma característica da versão do Angular CLI que estou utilizando (8.3.5) ou se, realmente, há algo de errado no meu código.
Obrigado!
