Creating a custom pipe in Angular 2 allows you to manipulate data like a currency or number within your application

Question

Creating a custom pipe in Angular 2 allows you to manipulate data like a currency or number within your application

Can someone help me figure out how to call the numberPipe on my custom pipe? I came across this solution:

Angular2 use basic pipe in custom pipe

Unfortunately, the solution provided doesn't seem to work for me. I keep getting an error message saying "The pipe 'bigInteger' could not be found."

import { Pipe, PipeTransform } from "@angular/core"
import { CurrencyPipe  } from "@angular/common"

@Pipe({
 name: "bigInteger"
 })
 export class BigInteger extends CurrencyPipe implements PipeTransform {
   transform(value: any): string {
    return value
 }
}

angular typescript pipe

Answer 1

Answer №1

Perhaps outdated, but I found success with this approach using Angular 5:

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

@Pipe({
  name: 'bigInteger'
})
export class BigInteger extends DecimalPipe implements PipeTransform {
  transform(value: any, args?: any): any {

    let result;
    result = super.transform(value, args);

    //add any custom transformations here

    return result;
  }

}

You can then use it similar to the regular number pipe, but with the flexibility to customize as needed:

<span>{{someValue | bigInteger : '1.2-2'}}</span>

Answer 2

Perhaps outdated, but I found success with this approach using Angular 5:

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

@Pipe({
  name: 'bigInteger'
})
export class BigInteger extends DecimalPipe implements PipeTransform {
  transform(value: any, args?: any): any {

    let result;
    result = super.transform(value, args);

    //add any custom transformations here

    return result;
  }

}

You can then use it similar to the regular number pipe, but with the flexibility to customize as needed:

<span>{{someValue | bigInteger : '1.2-2'}}</span>

Answer 3

Answer №2

update

This issue has been resolved for a while in Angular 4.

original

There was a known problem with Dependency Injection and classes that extend other classes.

https://github.com/angular/angular/issues/8694

Until this is fully resolved, consider using composition instead of inheritance:

@Pipe({
  name: "bigInteger"
})
export class BigInteger implements PipeTransform {

  constructor(private currencyPipe:CurrencyPipe) {}

  transform(value: any): string {
     return this.currencyPipe.transform(value);
  }
}

Answer 4

update

This issue has been resolved for a while in Angular 4.

original

There was a known problem with Dependency Injection and classes that extend other classes.

https://github.com/angular/angular/issues/8694

Until this is fully resolved, consider using composition instead of inheritance:

@Pipe({
  name: "bigInteger"
})
export class BigInteger implements PipeTransform {

  constructor(private currencyPipe:CurrencyPipe) {}

  transform(value: any): string {
     return this.currencyPipe.transform(value);
  }
}

Creating a custom pipe in Angular 2 allows you to manipulate data like a currency or number within your application

Answer №1

Answer №2

Similar questions

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

Router outlet fails to load identical child component

Displaying hidden Divs in React Typescript that are currently not visible

"Troubleshoot: Main child route in Angular 2 not functioning correctly

The specified type 'Observable<{}' cannot be assigned to the type 'Observable<HttpEvent<any>>'

What is the best way to create a custom hook that updates in response to changes in state?

The process of combining objects is greatly influenced by the specific typed values allowed in a function

The implementation of user context failed to meet expectations in terms of writing

Tips for Troubleshooting TypeScript Code in Chrome Instead of JavaScript Code?

Unable to send back transaction response from callback to the user

Can the rxjs take operator be utilized to restrict the number of observables yielded by a service?

How can we effectively utilize LESS variables in styles.less when working with LESS files within components in Angular versions 6 or 7?

Retrieving array-like form data in a TypeScript file

Tips for injecting Angular service for login in Cypress tests

Filtering an array does not restrict the type of elements within it

Sort columns in a MUI datatable

Reversing the order of items in Angular 2 for repetition

Issue with TypeScript not recognizing node_modules symlink in Docker container

How do I retrieve a specific svg element in Angular among multiple elements?

Testing Vue components with Typescript and Jest does not display the expected values in the HTML output