@angular/core#PipeTransform TypeScript Examples

@Pipe({
  name: 'timelineScoreFormater',
})
export class TimelineScoreFormaterPipe implements PipeTransform {
  formatDate = new DatePipe(this.locale);
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  parseTimeLineForAScoreType(scoreType: string, branch: ProjectBranch[]) {
    return branch
      .filter(({ score }) => Boolean(score)) // filter out null score
      .map(({ score, updatedAt }) => ({
        name: this.formatDate.transform(updatedAt, 'MMM-dd, h:mm'),
        value: score?.[scoreType] || 0,
      }));
  }

  transform(value: ProjectBranch[], ...args: unknown[]) {
    const scoreLabelFormater = new LHScoreLabelFormaterPipe();
    const scores = [
      'pwa',
      'accessibility',
      'seo',
      'bestPractices',
      'performance',
    ];

    return scores
      .sort((a, b) => a[0].localeCompare(b[0]))
      .map((scoreType) => ({
        name: scoreLabelFormater.transform(scoreType),
        series: this.parseTimeLineForAScoreType(scoreType, value),
      }));
  }
}

@Pipe({
  name: 'time',
})
export class TimePipe implements PipeTransform {
  transform(value: number): string {
    const seconds = value % 60;
    const minutes = ((value - seconds) % 3600) / 60;
    const hours = (value - minutes * 60 - seconds) / 3600;

    return `${hours > 0 ? hours + ':' : ''}${
      hours > 0 ? this.pad(minutes) + ':' : minutes > 0 ? minutes + ':' : ''
    }${minutes > 0 || hours > 0 ? this.pad(seconds) : seconds + ''}`;
  }

  pad(value: number) {
    let res = value + '';
    while (res.length < 2) {
      res = '0' + res;
    }

    return res;
  }
}

@Pipe({
  name: 'base64Parse'
})
export class Base64ParsePipe implements PipeTransform {

  transform(value: string | Buffer): unknown {
    if (typeof value === 'string') {
      return atob(value);
    } else {
      return atob(value.toString());
    }
  }

}

@Pipe({ name: 'bigNumberFormat' })
export class BigNumberFormatPipe implements PipeTransform {
  /**
   * Converts number to {@link BIG_NUMBER_FORMAT}.
   * @param value number to convert
   * @param dp decimal places
   * @param toFixed true if decimals in converted number must be strictly equal to {@param dp},
   * false if decimal places can be less than or equal to {@param dp}
   */
  transform(value: BigNumber | string | number, dp = -1, toFixed = false): string {
    if (typeof value === 'number') {
      value = value.toString();
    }

    if (!value) {
      return '';
    }

    if (typeof value === 'string') {
      value = new BigNumber(value.split(',').join(''));
    }

    if (dp !== -1) {
      return !toFixed
        ? value.dp(dp).toFormat(BIG_NUMBER_FORMAT)
        : value.toFormat(dp, BIG_NUMBER_FORMAT);
    }

    return value.toFormat(BIG_NUMBER_FORMAT);
  }
}

@Pipe({
  name: 'escapeUrl',
  pure: false
})
export class EscapeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(content: string|any) {
    return this.sanitizer.bypassSecurityTrustUrl(content);
  }

}

@Pipe({
  name: 'camelCase',
})
export class LgCamelCasePipe implements PipeTransform {
  transform(str: string): string {
    return !str
      ? str
      : str
        .replace(/(['"])/g, '')
        .replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) =>
          idx === 0
            ? ltr.toLowerCase()
            : ltr.toUpperCase(),
        )
        .replace(/(\s|-|\/|')/g, '');
  }
}

@Pipe({
  name: 'searchByLogin'
})
export class SearchByLoginPipe implements PipeTransform {

  transform(members: MemberEntity[], value: string): MemberEntity[] {
    return members.filter(
      member => member.login.toLowerCase().includes(value.toLowerCase())
    );
  }

}

@Pipe({
  name: 'champions',
  pure: false
})
export class ChampionsPipe implements PipeTransform {
  transform(items: any[], filter: string): any {
    if (!items || !filter) {
      return items;
    }
    // filter items array, items which match and return true will be
    // kept, false will be filtered out
    return items.filter(item => item.alt.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }

}

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }
}

@Pipe({
  name: "detail",
})
export class DetailPipe implements PipeTransform {
  transform(session: Session): string {
    switch (session.type) {
      case SessionType.awsIamRoleFederated:
        return (session as AwsIamRoleFederatedSession).roleArn.split("role/")[1] || "";
      case SessionType.azure:
        return (session as AzureSession).subscriptionId;
      case SessionType.awsIamUser:
        return ""; // (sessions as AwsIamUserSession).sessionName;
      case SessionType.awsSsoRole:
        const splittedRoleArn = (session as AwsSsoRoleSession).roleArn.split("/");
        splittedRoleArn.splice(0, 1);
        return splittedRoleArn.join("/");
      case SessionType.awsIamRoleChained:
        return (session as AwsIamRoleChainedSession).roleArn.split("role/")[1] || "";
    }
  }
}

@Pipe({
  name: 'multTable',
})
export class MultTablePipe implements PipeTransform {
  transform(_, digit: number, limit: number): Array<string> {
    if (!digit || !limit) {
      return [];
    }
    return new Array(Math.floor(limit)).fill(0).map((_, index) => {
      return `${digit} * ${index + 1} = ${digit * (index + 1)}`;
    });
  }
}

@Pipe({
  name: 'assetUnits'
})
export class AssetUnitsPipe implements PipeTransform {

  transform(value: unknown, unit: number): unknown {

    const int = Number(value);

    if (typeof int === 'number') {
      return int / 10 ** unit;
    } else {
      console.error(`error parsing ${value} into number`);
      return '-';
    }

    return null;
  }

}

/**
 * Resolves to the name of an application's symbolic name.
 */
@Pipe({name: 'devtoolsAppName'})
export class AppNamePipe implements PipeTransform {

  constructor(private _manifestService: DevToolsManifestService) {
  }

  public transform(symbolicName: string): string | undefined {
    return this._manifestService.getApplication(symbolicName)?.name;
  }
}

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

@Pipe({
  name: '_',
  pure: false
})
export class TranslatePipe implements PipeTransform {

  constructor(private languageService: LanguageService) {}

  transform(label: LabelKeys): string {
    return this.languageService.getLabel(label);
  }

}

@Pipe({ name: 'orderBy' })
export class OrderByPipe implements PipeTransform {
    transform(records: Array<any>, args?: any): any {
        return records.sort((a, b) => {
            const iA = a[args.property] || '';
            const iB = b[args.property] || '';
            if (iA < iB) {
                return -1 * args.direction;
            } else if (iA > iB) {
                return 1 * args.direction;
            } else {
                return 0;
            }
        });
    }
}

@Pipe({
  name: "downloadCount",
})
export class DownloadCountPipe implements PipeTransform {
  public constructor(private translateService: TranslateService) {}

  public transform(value: number): string {
    const numMatches = /(e\+\d+)/.exec(value.toExponential());
    if (!numMatches) {
      throw new Error("Failed to get matches");
    }

    const suffix = numMatches[1];

    const params = {
      rawCount: value,
      count: shortenDownloadCount(value, 3),
      simpleCount: shortenDownloadCount(value, 1),
      myriadCount: shortenDownloadCount(value, 4),
    };

    return suffix ? this.translateService.instant("COMMON.DOWNLOAD_COUNT." + suffix, params) : value.toString();
  }
}

@Pipe({
  name: 'filterBrand',
})
export class FilterBrandPipe implements PipeTransform {
  transform(value: Brand[], filterText: string): Brand[] {
    return value.filter((b: Brand) =>
      b.name.toLocaleLowerCase().includes(filterText.toLocaleLowerCase())
    );
  }
}

@Pipe({ name: 'ngxAuthToken' })
export class AuthPipe implements PipeTransform {
  constructor(private authService: NbAuthService) {}

  transform(url: string): Observable<string> {
    if (!url) {
      return observableOf(url);
    }
    return this.authService.getToken()
      .pipe(map((token: NbAuthToken) => {
        const separator = url.indexOf('?') > 0 ? '&' : '?';
        return `${url}${separator}token=${token.getValue()}`;
      }));

  }
}

@Pipe({
  name: 'auiI18n',
})
export class I18nPipe implements PipeTransform {
  constructor(private readonly i18n: I18nService) {}
  transform(value: any, data?: StringMap) {
    return this.i18n.translate(value, data);
  }
}

@Pipe({ name: 'bcAddCommas' })
export class AddCommasPipe implements PipeTransform {
  transform(authors: null | string[]) {
    if (!authors) {
      return 'Author Unknown';
    }

    switch (authors.length) {
      case 0:
        return 'Author Unknown';
      case 1:
        return authors[0];
      case 2:
        return authors.join(' and ');
      default:
        const last = authors[authors.length - 1];
        const remaining = authors.slice(0, -1);
        return `${remaining.join(', ')}, and ${last}`;
    }
  }
}

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {

  }

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

@Pipe({name: 'countryPlaceholder'})
export class CountryPlaceholder implements PipeTransform {
  transform(country: CountryI, inputPlaceholder: string, separateDialCode: boolean, fallbackPlaceholder: string): string {
    if (inputPlaceholder && inputPlaceholder.length > 0) {
      return inputPlaceholder;
    }

    const phoneUtil = PhoneNumberUtil.getInstance();
    try {
      const placeholder = phoneUtil.format(phoneUtil.getExampleNumber(country.isoCode), PhoneNumberFormat.INTERNATIONAL);
      if (placeholder) {
        if (separateDialCode) {
          return placeholder.substr(placeholder.indexOf(' ') + 1);
        } else {
          return placeholder;
        }
      }
    } catch (e) {
      return fallbackPlaceholder;
    }
  }
}

@Pipe({ name: 'ago' })
export class AgoPipe implements PipeTransform {
   transform(value: number): string {

      if (value === 0) {
         return '';
      }

      const date = moment.unix(value);
      return date.fromNow();
   }
}

@Pipe({
    name: 'coinNotation'
})
export class CoinNotationPipe implements PipeTransform {
    private coinUnit: string | undefined;
    // private coinNotation: number;

    constructor(private globalService: GlobalService) {
        this.setCoinUnit();
    }

    transform(value: number): string {
      return this.globalService.transform(value);
    }

    getCoinUnit() {
        return this.coinUnit;
    }

    setCoinUnit() {
        this.coinUnit = this.globalService.getCoinUnit();
    }
}

@Pipe({
  name: 'activityDateDisplay'
})
export class ActivityDateDisplayPipe implements PipeTransform {

  constructor(private dateService: DateService) { }

  transform(activity: Activity): string {
    let display: string = '';

    if (activity) {
      if (activity.startDate) {
        let startDate: number = this.dateService.convertToLocal(activity.startDate);

        display = this.dateService.getShortDateAndTimeDisplay(startDate);

        if (activity.endDate) {
          let endDate = this.dateService.convertToLocal(activity.endDate);

          let startTimeDisplay: string = this.dateService.getShortTimeDisplay(startDate);
          let endTimeDisplay: string = this.dateService.getShortTimeDisplay(endDate);

          let startDateDisplay: string = this.dateService.getShortDateDisplay(startDate);
          let endDateDisplay: string = this.dateService.getShortDateDisplay(endDate);

          if (startDateDisplay == endDateDisplay) {
            display = startDateDisplay + " " + startTimeDisplay + " - " + endTimeDisplay;
          } else {
            display = display + " - " + this.dateService.getShortDateAndTimeDisplay(endDate);
          }
        }
      }
    }

    return display;
  }
}

@Pipe({ name: 'toNiceName' })
export class ToNiceNamePipe implements PipeTransform {
  sectors: { original: string; nice: string }[] = [
    { original: 'ResearchAndEducation', nice: 'Research and education' },
    { original: 'NGOs', nice: 'NGOs' },
    { original: 'Media', nice: 'Media' },
    { original: 'Insurances', nice: 'Insurances' },
    { original: 'IT', nice: 'IT' },
    { original: 'Gov_Federal', nice: 'Federal government' },
    { original: 'Gov_Companies', nice: 'Governmental companies' },
    { original: 'Gov_Cities', nice: 'Cities' },
    { original: 'Gov_Cantons', nice: 'Cantons' },
    { original: 'Communities', nice: 'Communities' },
    { original: 'Banking', nice: 'Banking and finance' },
    { original: 'Others', nice: 'Others' },
    { original: 'true', nice: 'Yes' },
    { original: 'false', nice: 'No' },
  ];

  transform(value: any): string {
    const name: any = this.sectors.find(
      (sector) => sector.original === value.toString()
    );
    return name ? name.nice : value;
  }
}

@Pipe({
  name: 'dataPropertyGetter'
})
export class DataPropertyGetterPipe implements PipeTransform {

  transform(object: any, keyName: string, ...args: unknown[]): unknown {
    return object[keyName];
  }

}