Angular 4 Ignore HTML Display of Empty Fields

Question

In the following HTML snippet:

<div class="twelve wide column">
  <div class="value">
    MaxPower: {{ powerPlant.maxPower }} MinPower: {{ powerPlant.minPower }}
  </div>
  <div class="value">
    PowerPlantType: {{ powerPlant.powerPlantType }} Organization: {{ powerPlant.powerPlantName }}
  </div>
  <div class="value">
    RampPowerRate: {{ powerPlant.rampPowerRate }} RampRateInSeconds: {{ powerPlant.rampRateInSeconds }}
  </div>
</div>

The powerPlant.rampPowerRate and powerPlant.rampRateInSeconds are optional fields in the associated model which is as below:

export interface PowerPlant {
  powerPlantId: number;
  powerPlantName: string;
  minPower: number;
  maxPower: number;
  powerPlantType: string;
  rampRateInSeconds?: number;
  rampPowerRate?: number;
}

How can check for this when I display? I would effectively want to completely omit the div depending on if the value is present or not! Any ideas?

Sajeetharan · Accepted Answer · 2017-08-30 17:28:39Z

1

You can just check using *ngIf

<div *ngIf="powerPlant.maxPower && powerPlant.powerPlantType && powerPlant.rampPowerRate" class="twelve wide column">
  <div class="value">
    MaxPower: {{ powerPlant.maxPower }} MinPower: {{ powerPlant.minPower }}
  </div>
  <div class="value">
    PowerPlantType: {{ powerPlant.powerPlantType }} Organization: {{ powerPlant.powerPlantName }}
  </div>
  <div class="value">
    RampPowerRate: {{ powerPlant.rampPowerRate }} RampRateInSeconds: {{ powerPlant.rampRateInSeconds }}
  </div>
</div>

answered Aug 30, 2017 at 17:28

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

joesan Over a year ago

Cool! Thanks for the hint!

Collectives™ on Stack Overflow

Angular 4 Ignore HTML Display of Empty Fields

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related