How can we utilize a pipe in Angular by referencing it with the pipe's name from a string

Question

How can we utilize a pipe in Angular by referencing it with the pipe's name from a string

How can I implement dynamic pipe invocation in Angular 2 using reflection or a similar method? I have a string containing the name of the desired pipe (e.g. "lowercase") and I want to apply that pipe to a value using only the string.

For instance:

JSON

var cols = [{ dataProperty: "city", pipeName: "lowercase"},{ dataProperty: "state", pipeName: "uppercase"}]
var rows = [{city: 'Walla Walla', state: 'wa'}];

HTML (Angular component excerpt)

{{ rowData[col.dataProperty] | this.[col.pipeName] }}

However, this implementation did not yield the expected results.

Is there an alternative to using this.[col.pipeName] to dynamically invoke the appropriate pipe based on the provided pipe name, such as calling uppercase or lowercase, assuming the specified pipe is accessible in my code?

angular typescript

Answer 1

Answer №1

If you need to hardcode your json data

var columns = [{propertyData: "city",  pipe: new LowerCasePipe()},
            {propertyData: "state", pipe: new UpperCasePipe()}]

In your HTML template

{{col.pipe.transform(rowData[col.propertyData])}}

All default angular pipes use the PipeTransform interface, with the transform method.

If your data is from an API

You can keep it as pipeName: "uppercase" and access the corresponding pipe from a dictionary.

export class PipeManager {
  private static _pipes = {
    'upperCase': new UpperCasePipe(),
    'lowerCase': new LowerCasePipe(),
    'currency': new CurrencyPipe('en')
  };

  public static getPipe(key: string) {
    return PipeManager._pipes[key];
  }
}

In your HTML template

{{PipeManager.getPipe(col.pipeName).transform(rowData[col.propertyData])}}

This method could use some refining, but I hope you grasp the concept.

Answer 2

If you need to hardcode your json data

var columns = [{propertyData: "city",  pipe: new LowerCasePipe()},
            {propertyData: "state", pipe: new UpperCasePipe()}]

In your HTML template

{{col.pipe.transform(rowData[col.propertyData])}}

All default angular pipes use the PipeTransform interface, with the transform method.

If your data is from an API

You can keep it as pipeName: "uppercase" and access the corresponding pipe from a dictionary.

export class PipeManager {
  private static _pipes = {
    'upperCase': new UpperCasePipe(),
    'lowerCase': new LowerCasePipe(),
    'currency': new CurrencyPipe('en')
  };

  public static getPipe(key: string) {
    return PipeManager._pipes[key];
  }
}

In your HTML template

{{PipeManager.getPipe(col.pipeName).transform(rowData[col.propertyData])}}

This method could use some refining, but I hope you grasp the concept.

How can we utilize a pipe in Angular by referencing it with the pipe's name from a string

Answer №1

If you need to hardcode your json data

If your data is from an API

Similar questions

Is it possible that the installation issue with 'File' from ionic-native is due to dependencies?

An out of memory exception while running the ng build command in Docker results in a fatal

Is it possible for me to reinstall npm in an Angular project as a solution?

Implementation of search filtering pipe function

"Exploring the World of Websockets Using Ionic 3 and Angular

Utilizing this.$refs in Vue TypeScript: Handling Vue and Element Errors with Vue[] and Element[]

Utilizing npm/buffer package within a TypeScript module

OpenID Connect does not provide confirmation when handling user logouts

Implementing Custom Font Awesome Icons in Your Angular Project

Steps for attaching attributes to a displayed element in TileVectorLayer

What is the best way to modify an object's property before including it in a new array?

Extract an array from a JSON array based on the lowest value of the keys

Executing the Drag and Drop feature with Protractor

Develop a customized interface for exporting styled components

Issues Arising When Trying to Call a Rest API on Express.js Using Angular 2

Struggling to retrieve the 'this' object using a dynamic string

Utilizing the power of HTML datalist and *ngFor to present one value while sending another

Discovering if a consistent value is present in every row of an array list can be achieved using Angular

Enhancing .gitignore with conditional logic for more efficient file exclusion

Adding React with TypeScript to an existing ASP.NET Core MVC application: A step-by-step guide