CODEWITHSUNDEEP
htmlangular
Woody
Woody

Reputation: 1787

Why does this ng-if statement not evaluate properly?

I have 3 tiles populated from an array called tiles. The array has a column/property called format which describes how a particular number in that array should be formatted:

tiles: Tile[] = [
    {
      rate: 0.585,
      cols: 1,
      rows: 1,
      color: "#fff",
      name: "Customer Rate",
      format: "percent"
    },
    {
      rate: 0.75,
      cols: 1,
      rows: 1,
      color: "#fff",
      name: "Sales Rate",
      format: "percent"
    },
    {
      rate: 54349.54,
      cols: 1,
      rows: 1,
      color: "#fff",
      name: "Sales"
      format: "currency"
    }
  ];

I'm trying to use ng-if to format numbers a particular way:

<mat-grid-list cols="3" rowHeight="85px">
    <mat-grid-tile class="metric-tile" *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
      [style.background]="tile.color">
      <div style="font-size: 12px">{{tile.name}}</div>
      <div ng-if="tile.format == 'percent'" style="font-size: 60px">{{tile.rate | percent }}</div>
      <div ng-if="tile.format == 'currency'" style="font-size: 60px">{{tile.rate | currency }}</div>
      <div style="font-size: 24px">{{tile.label}}</div>
    </mat-grid-tile>
  </mat-grid-list>

But in every tile I get the rate value twice, once formatted as a percentage and one formatted as a currency. What am I doing wrong?

Upvotes: 0

Views: 153

Answers (2)

Sunil
Sunil

Reputation: 11243

Issue : You had mixed AngularJs and Angular 2+. Instead of using ng-if you must use *ngIf 

<mat-grid-list cols="3" rowHeight="85px">
    <mat-grid-tile class="metric-tile" *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
      [style.background]="tile.color">
      <div style="font-size: 12px">{{tile.name}}</div>
      <div *ngIf="tile.format == 'percent'" style="font-size: 60px">{{tile.rate | percent }}</div>
      <div *ngIf="tile.format == 'currency'" style="font-size: 60px">{{tile.rate | currency }}</div>
      <div style="font-size: 24px">{{tile.label}}</div>
    </mat-grid-tile>
  </mat-grid-list>

Upvotes: 2

Ben Steward
Ben Steward

Reputation: 2408

The correct syntax is *ngIf="tile.format == 'percent'". You are using the AngularJS directive, not the Angular 6 one.

Upvotes: 1

Related Questions