Conditionally rendering message on HTML page from Typescript in runtime [Angular]

Question

I'm new to Angular. So I may not be able to frame the question correctly. I apologize in advance. I have also tried this question. I have created a login form for my MEAN stack application. Its a simple login with email and password field. My typescript file decides whether the login was successful or not. Here is my code.

login.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
...

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  flag= {
    valid: true
  }

  ...

  constructor( private _auth: AuthService, private _router: Router) {
  }

  ngOnInit() {
  }


  onSubmit() {
    this._auth.loginUser(this.loginUserData)
    .subscribe(
      res => {
        ...
      },
      err => {
        this.flag.valid=false,
        document.querySelector('#login-denied').innerHTML="hello";
      }
    )
  }
}

In the above file, flag is a boolean variable. True means values are OK and False otherwise.

Here is my html code login.component.html

<form>
  <div class="form-group">
      USERNAME FIELD
  </div>

  <div class="form-group">
      PASSWORD FIELD
  </div>
  <button type="submit" (click)="onSubmit()">Submit</button>

  <span *ngIf="flag.valid===false" id="login-denied">
      <i class="fa fa-times-circle" style="color:firebrick;"></i>
  </span>
</form>

Please pay more attention to my span tag. Please correct me. I am getting

"document.querySelector(...) is null"

And here is a also.

As you can see. The fa icon is there. But no message.

score 2 · Accepted Answer · answered Oct 11 '19 at 19:38

In your login component add a string property "message"

export class LoginComponent implements OnInit {
  message: string = '';
  …
}

In your submit method

onSubmit() {
  this._auth.loginUser(this.loginUserData)
  .subscribe(
    res => {
      ...
    },
    err => {
      this.flag.valid=false,
      this.message = "hello";
    }
  )
}

In your html

<span *ngIf="!flag.valid" id="login-denied">
  <i class="fa fa-times-circle" style="color:firebrick;">{{message}}</i>
</span>

Regards

It is not recommended to access the DOM directly in angular, since your are bypassing the Angular renderer. This can produce unwanted and unpredictable results. — Charly Sosa, Oct 11 '19 at 20:01

score 1 · Answer 2 · answered Oct 11 '19 at 19:41

Why you need to do it with

document.querySelector

Because you can do it with a variable a variable in angular that would be more proper

 error message="";
// When error occurred set the message variable

Like this in the error function

err => {
        this.flag.valid=false;
this.errorMessage ="Some Error";
        }

And bind it in the html like this

<span *ngIf="flag.valid===false" id="login-denied">
      <i class="fa fa-times-circle" style="color:firebrick;"></i> {{errorMessage}}
  </span>

I saw this approach somewhere on the internet and it was working for them. — Tanzeel, Oct 11 '19 at 19:52

Conditionally rendering message on HTML page from Typescript in runtime [Angular]

2 Answers2