"Can not set property 'className' of null" Error function Angular 2+

In my template I have a button that calls the sign-in function:

<button type="submit" name="entrar" (click)="fazerLogin()" routerLink="/home" class="login" id="login-button">Entrar</button>

I've added a div for if the username or password is incorrect, the div appears showing a toast:

<div *ngIf="alertaUsuarioIncorreto" id="toast"><div id="desc"> <i class="fa fa-close" aria-hidden="true"></i> Nome de usuário ou senha incorretos</div></div>

I declared this variable in my component:

public alertUsernameIncorrect: boolean = false;

This is my role:

  fazerLogin(){
    this.authService.fazerLogin(this.usuario);
    this.alertaUsuarioIncorreto = this.authService.nomeOuSenhaErrados();

    if(this.alertaUsuarioIncorreto = true){
      var x = document.getElementById("toast")
      x.className = "show";
      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
    }
  }

Here are the functions of my service:

      fazerLogin(usuario: Usuario){
        if(usuario.nome === '[email protected]' &&
          usuario.senha === '123'){
            this.usuarioAutenticado = true;
            this.router.navigate(['/home']);
          }else{
            this.usuarioAutenticado = false;
            this.alertaSenhaErrada = true;
          }
      }

      usuarioEstaAutenticado(){
        return this.usuarioAutenticado;
      }

      nomeOuSenhaErrados(){
        return this.alertaSenhaErrada;
      }

It turns out that the first time I click the button, it returns the message:

ERROR TypeError: Cannot set property 'className' of null
    at LoginComponent.push../src/app/components/login/login.component.ts.LoginComponent.fazerLogin

The second time I click the button, the toast message appears.