Ionic 2, Using Angular 2 Pipe breaks on iOS—“Can't find variable: Intl”

Question

Experiencing the same problem with the date, percent, and currency pipes when using them in a template—

For example, I\'m using a simple percent pipe:

Answer 1

Here's what I did with RC3. I think it will work with RC4 too.

Create a pipe by typing ionic g pipe pipe-transform

Clean the code to remove @Injectable. Also, use camel-case to name it like below. Implement PipeTransform.

import { Pipe, PipeTransform} from '@angular/core';

/**
 * Takes a number and transforms into percentage upto
 * specified decimal places
 *
 * Usage:
 * value | percent-pipe: decimalPlaces
 *
 * Example:
 * 0.1335 | percent-pipe:2
*/
@Pipe({
  name: 'percentPipe'
})
export class PercentPipe implements PipeTransform {
  /**
   * Takes a number and returns percentage value
   * @param value: number
   * @param decimalPlaces: number
   */
  transform(value: number, decimalPlaces:number) {
    let val = (value * 100).toFixed(decimalPlaces);
    return val + '%';
  }
}

In your app.module add to declarations array.

Then in the html use it like in the example usage above. Here's my example

 
    {{pd.wtChg | percentPipe: 2}}
  

Notice I'm using an *ngIf and a highlight directive too in case someone needs extra help. Not necessary obviously.