How to use ngIf else in angular?

Question

add.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentAPIService } from 'src/app/services/student-api.service';
import { Student } from 'src/app/model/student';


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

  public res: any;
  showMsg: boolean = false;
  errorMsg: boolean = false;

  constructor( private studentAPI: StudentAPIService ) { }

  ngOnInit(): void {
  }

  registration(fm){
    this.studentAPI.registerStudent(fm).subscribe(res=>{
      if(res === "Email already exist!")
      {
        this.errorMsg = true;
      }
      else
      {
        this.showMsg = true;
      }
    });
  }

}

add.component.html

<div class="control-group" *ngIf="showMsg">
    <label for="registration">
        <p class="alert alert-success">
    Student Registration Success!
  </p>
    </label>
</div>

<div class="control-group" *ngIf="errorMsg">
    <label for="registration">
        <p class="alert alert-danger">
    Email already exist! Please register with different email.
  </p>
    </label>
</div>

In the above code I simply want to show success or error message using *ngIf else. Here, What happen when I click on button then if email id exist in database then errorMsg show but when I enter another mail id then errorMsg not hide and showMsg are showing above errorMsg. Now, I want to show one message at a time. So, How can I do this? Please help me.

Thank You

Does this answer your question? [How can I use "\*ngIf else"?](https://stackoverflow.com/questions/43006550/how-can-i-use-ngif-else) — Amer, Mar 17 '22 at 07:18

score 0 · Accepted Answer · answered Mar 17 '22 at 05:33

In your case you can try

 if(res === "Email already exist!")
  {
    this.errorMsg = true;
    this.showMsg = false;
  }
  else
  {
    this.errorMsg = false;
    this.showMsg = true;
  }

Not a best practice but it should solve your problem for showing one message at a time

Kien Nguyen · Answer 2 · 2022-03-17T06:00:32.603

Both messages show when you enter another mail id because you only have logic to set the flags errorMsg/showMsg to true while there is no logic to set them to false otherwise.

It will be better if you use only 1 variable to mark the registration successful or not:

add.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentAPIService } from 'src/app/services/student-api.service';
import { Student } from 'src/app/model/student';


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

  public res: any;
  success: boolean;

  constructor( private studentAPI: StudentAPIService ) { }

  ngOnInit(): void {
  }

  registration(fm){
    this.studentAPI.registerStudent(fm).subscribe(res=>{
      this.success = (res !== "Email already exist!")
    });
  }

}

add.component.html

<div class="control-group" *ngIf="success">
    <label for="registration">
        <p class="alert alert-success">
    Student Registration Success!
  </p>
    </label>
</div>

<div class="control-group" *ngIf="success === false">
    <label for="registration">
        <p class="alert alert-danger">
    Email already exist! Please register with different email.
  </p>
    </label>
</div>

How to use ngIf else in angular?

2 Answers2