nativeElement

Fala ai Gustavo, tudo bem? Em qual lugar você está tentando usar o this.inputName? Ou seja, dentro de alguma função do componente? Algum ciclo de vida?

Pergunto isso, porque o nativeElement somente vai ser injetado após o ciclo de vida chamado ngAfterViewInit, então se você tentar utilizá-lo dentro de algum ciclo de vida que venha antes do mesmo, o conteúdo vai ser undefined.

Espero ter ajudado.

ngOnInit conforme mostrado no curso.

Fala Gustavo, realmente, imaginei que seria no ngOnInit, o problema é esse, o ngAfterViewInit é chamado depois do ngOnInit então por isso o mesmo está sendo undefined.

Espero ter ajudado.

Certo onde eu devo chamar ele para que a tela já entre com o foco no campo que eu quero direcionar. Pergunto isso por que na aula do curso ele coloca no ngOnInit. Onde devo colocar?

Fala Gustavo, nesse caso você pode colocar dentro do ngAfterViewInit.

Acho que durante as versões do Angular esse comportamento pode ter mudado ou passou despercebido pelo instrutor.

Espero ter ajudado.

  ngAfterViewInit(): void {    
    this.platformDetectorService.isPlatformBrowser() &&
                this.userNameInput.nativeElement.focus();
  }

fiz a implementação ele funcionou direcionando o foco, mas está mostrando o seguinte erro no console:

core.js:6185 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'mat-form-field-should-float': 'false'. Current value: 'true'.

consegue me ajudar?

Fala Gustavo, esse erro é meio chatinho, consegue compartilhar o projeto comigo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

https://drive.google.com/file/d/1V5xiGAqUNMhuqZZxR0dU0qPbnfSddbIn/view?usp=sharing

Fala Gustavo, dei uma olhada no projeto e uma das maneiras para resolver esse problema é pedir para o Angular identificar as mudanças novamente.

Para isso, no seu construtor injete o ChangeDetectionRef:

// ele deve ser importado do @angular/core
import { ChangeDetectorRef } from '@angular/core';

constructor(
        private formBilder: FormBuilder,
        private cadUsuarioValidatorService: SignupValidatorService,
        private router: Router,
        private signupService: SignupService,
        private platformDetectorService: PlatformDetectorService,
        private cdRef: ChangeDetectorRef, // Esse carinha aqui...
) {}

E dentro do seu ngAfterViewInit após dar focus no campo você solicita a nova detecção de mudanças:

ngAfterViewInit(): void {
         this.platformDetectorService.isPlatformBrowser() &&
        this.inputName.nativeElement.focus();
         this.cdRef.detectChanges();
}

Isso deve resolver o erro no console.

Espero ter ajudado.