Angular – How to display detail based on condition

January 25, 2022

I want to display the detail of employee from ASP.NET Core Web API using Angular-13.

I have these end_points:

{
    "id": 1,
    "employee_name": "Frank Lammmy",
    "charge_mode": 1,
    "charge_value": 12344.55,
    "charge_percent": 
}

What want to achieve on the employee detail is this: if charge_mode = 1, it should display charge_value, but if charge_mode = 2 it should display charge_percent.

I tried this:

  <div class="col-md-6">
    Employee Name: <strong>{{ employeeList.employee_name || 'N/A' }}</strong>
  </div>
  <div class="col-md-6">
    *ngIf="employeeList.charge_mode === 1" Amount: <strong>{{ employeeList?.charge_value || 'N/A' }}</strong>
    *ngIf="employeList.charge_mode === 2" Percentage (%): <strong>{{ employeeList?.charge_percent || 'N/A' }}</strong>
  </div>

but it’s not working, it just display the raw data.

How do I achieve this?

>Solution :

Your provided code is close, but you’ll want to apply the *ngIf directives to some HTML elements.

  <div class="col-md-6">
    Employee Name: <strong>{{ employeeList.employee_name || 'N/A' }}</strong>
  </div>
  <div class="col-md-6">
    <span *ngIf="employeeList.charge_mode === 1">Amount: <strong>{{ employeeList?.charge_value || 'N/A' }}</strong></span>
    <span *ngIf="employeeList.charge_mode === 2">Percentage (%): <strong>{{ employeeList?.charge_percent || 'N/A' }}</strong></span>
  </div>