how to render html on the basis of if conditions

Question

I want to show different html text on the basis of my if conditions in my component.ts file my HTML code is

<div class="login">
    <div *ngIf="emailStatus == EmailStatus.verified">
        <h1>Your email has been verified.</h1>
        <a href routerLink="/authenticate/login">Please login</a>
    </div>
    <div *ngIf="emailStatus == EmailStatus.alreadyVerified">
        This email has already been verified. Please login.
        <a href routerLink ="/authenticate/login">Please login</a>
    </div>
    <div *ngIf="emailStatus == EmailStatus.Failed">
        <p>Verification failed, The email verification link might have been expired. Please request verification link again.</p>
    </div>
</div>

my component.ts file is

import { Component, OnInit } from '@angular/core';
import { TeacherAuthService } from 'src/app/service/teacher-auth.service';
import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';

enum EmailStatus {
  alreadyVerified,
  Failed,
  verified
}
@Component({
  selector: 'app-verify',
  templateUrl: './verify.component.html',
  styleUrls: ['./verify.component.scss']
})
export class VerifyComponent implements OnInit {
  EmailStatus = EmailStatus;
  emailStatus = EmailStatus.alreadyVerified;

  constructor(private teacherService: TeacherAuthService, private http: HttpClient,
    private route: ActivatedRoute, private _snackBar: MatSnackBar,
    private router: Router) { }

  ngOnInit(): void {
    const token = this.route.snapshot.params['token'];
    this.teacherService.verifyEmail(token)
      .subscribe(res => {
        console.log(res)
        this.emailStatus = EmailStatus.verified;
        this._snackBar.open('Verification successful, you can now login.', "Ok");
        
      }, err => {
        console.log(err)
        if (err?.error?.type === "already-verified")
          this.emailStatus = EmailStatus.alreadyVerified;
        else (err?.error?.type === 'not-verified')
          this.emailStatus = EmailStatus.Failed
      })
  }
}

When I click my email verification link it works fine. But when I click that again it should show the message "This email has already been verified. Please login." But it is showing the other error message Verification failed, The email verification link might have been expired. Please request verification link again

Answer 1

You need to use :

else if (err?.error?.type === 'not-verified')

instead of :

else (err?.error?.type === 'not-verified')