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.

Charly Sosa · Accepted Answer · 2019-10-11 19:38:07Z

2

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

answered Oct 11, 2019 at 19:38

Charly Sosa

5753 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charly Sosa Over a year ago

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.

Hitech Hitesh · Accepted Answer · 2019-10-11 19:41:50Z

1

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>

answered Oct 11, 2019 at 19:41

Hitech Hitesh

1,6351 gold badge11 silver badges18 bronze badges

1 Comment

Tanzeel Over a year ago

I saw this approach somewhere on the internet and it was working for them.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related