how to use *ngIf in in displaying input that has id

user_12830334 0
Viewed 162

HI guys im new to ionic i have a problem how to use *ngIf in displaying input field

here is my .html

<div *ngIf="project_group_id=1">

<ion-card>
  <ion-item no-lines>
      <ion-label color="primary">Phase No:</ion-label>
      <ion-select  formControlName="phase_id" placeholder="Select phase number" [(ngModel)]="qa_form.phase_id">

        <ion-option   value="{{phases.id}}" *ngFor="let phases of phase" name="phase_id">{{phases.phase_name}}</ion-option>

      </ion-select>
  </ion-item>
</ion-card>



<ion-card>
  <ion-item>
    <ion-label color="primary">Block No:</ion-label>
    <ion-input  formControlName="block_no"   name="block_no" type="number" text-right placeholder="Enter house block number" [(ngModel)]="qa_form.block_no"></ion-input>
  </ion-item>
</ion-card>


<ion-card>
  <ion-item>
    <ion-label color="primary">Lot No:</ion-label>
    <ion-input type="number"  formControlName="lot_no"  name="lot_no" text-right placeholder="Enter house lot number" [(ngModel)]="qa_form.lot_no"></ion-input> 
  </ion-item>
</ion-card>

</div>

<div *ngIf="project_group_id=2">

  <ion-card>
    <ion-item>
        <ion-label color="primary">Building No:</ion-label>
        <ion-select  formControlName="building_id"  name="building_id" placeholder="Select building number" [(ngModel)]="qa_form.building_id" >
          <ion-option value="1">Building 1</ion-option>
          <ion-option value="2">Building 2</ion-option>
          <ion-option value="3">Building 3</ion-option>
          <ion-option value="4">Building 4</ion-option>
          <ion-option value="5">Building 5</ion-option>
        </ion-select>
    </ion-item>
  </ion-card>
  <ion-card>
    <ion-item>
      <ion-label color="primary">Unit No:</ion-label>
      <ion-input type="number"  formControlName="unit_no"  name="unit_no" text-right placeholder="Enter house unit number" [(ngModel)]="qa_form.unit_no"></ion-input> 
    </ion-item>
  </ion-card>

</div>

if the project_group_id is 1 only the building and unit will display and if the project_group_id is 2 only the lot_no,block_no,phase_no

ionic-native angular5 ionic3 ionic-framework
2 Answers

The expression inside ngIf is a subset of JavaScript expressions. And in JavaScript you need to use the == operator to compare two values, not =.

<div *ngIf="project_group_id == 1">

<div *ngIf="project_group_id == 2">
user_33947700

I think it depends on the type of comparison you want to make. You also need simple quotes.

If you use ==, before comparasion, it converts data to the same type.

<div *ngIf="'project_group_id == 1'">
<div *ngIf="'project_group_id == 2'">

If you use ===, it is a strict comparasion (it is only true if data area the same type and their value is the same).

<div *ngIf="'project_group_id == 1'">
<div *ngIf="'project_group_id == 2'">
user_121540500
Related