Is it possible to invoke an Angular2 pipe within another pipe?

When I receive data from the server, it includes an object with columns and rows. I want to loop through the columns and rows to create an HTML table, formatting the cells based on the column type using a "format" pipe.

For example:

Server Response:

{
  "columns" [{"precision":10,"name":"PAGES","typeName":"INTEGER","scale":0...,
  "rows":[{"PAGES":6531....}, [{"PAGES":6531....}]
}

HTML snippet:

<tr *ngFor="let row of invoices?.rows">
  <td *ngFor="let column of invoices?.columns>
    {{row[column.name] | format : column}}
  </td>
</tr>

Is there a way for my "format" pipe to delegate to the appropriate built-in pipe (if available) based on the column type? I'd prefer not to have to reimplement DecimalPipe, DatePipe, etc.

Answer №1

A handy method for utilizing pipes is by simply creating an instance of them and invoking the transform function:

transformData(cell: any, column: any): any {
    if (column.typeName === "INTEGER") {
        let customPipe = new DecimalPipe();
        return customPipe.transform(cell, "1.0-0");
    }
    // add more functionality here ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identifying Classifications Based on Input Parameters

I'm encountering some difficulty in typing a function that calls an external API and returns data based on the parameters sent. Here is what I have so far... import axios from 'axios'; interface IGetContactArgs { properties?: string[]; } ...

Guide on incorporating jQuery-extended bootstrap components in Angular

Currently, I am exploring the integration of the Bootstrap 3.3.7 popover component (since I cannot use the ng version) into a new Angular 4 application. To achieve this, I initially installed: npm install --save jquery @types/jquery bootstrap Following t ...

Deciding Between Utilizing Observables or Promises in Angular

Having delved into Observables after transitioning from a predominantly Promise-based application, I recognize their effectiveness in handling streams and event patterns. However, I can't help but feel that there are instances where using Observables ...

The compilation of TypeScript extending DataType can sometimes result in errors

I have written a custom extension in my extensions/date.ts file which adds a method to the Date interface: interface Date { addDays: (days: number) => Date } Date.prototype.addDays = function(days: number): Date { if (!days) return this; let dat ...

What is the best way for a playwright to retrieve a model value from an Angular 2-way binding if there are multiple dropdowns with the same name?

I have several dropdown menus with the same name, and I want to access the current selected values that are bound in two ways using Angular. I am trying to verify if all the currently displayed values are set to "Complete" as shown here: Validate dropdowns ...

When using ngFor, the ion-select with multiple="true" does not work as expected

I have observed that when attempting to include ion-select within ngFor on a list generated dynamically by a function, the lists are not being displayed in the DOM. Interestingly, the DOM renders correctly if I move the individual element outside of the n ...

Angular Form: displaying multiple hashtags within an input field

Utilizing Angular CLI and Angular Material, I have created a form to input new hashtags. I am facing difficulty in displaying previously added hashtags in the input field. Below is the code I have written: form.component.html <form [formGroup]="crea ...

Creating seamless compatibility between the elliptic library in JavaScript and the ecdsa library in Golang for efficient cross-platform operations

I am having issues with validating a signature created using the elliptic JavaScript library and the ecdsa library from Golang. The elliptic curve in question is secp256k1. Below are some snippets of code: Here are the TypeScript utility functions: impor ...

How can the value of a number in Angular be changed without altering its original value?

Imagine having the initial number 100. If I enter 50 in another input, it should add 50 to 100. However, if I then change the value from 50 to 80, the total should be 180 and not 230. The goal is always to add numbers to the original sum, not the new valu ...

Preventing a particular CSS file from being applied to my Angular component

Currently, my modal component is built using bootstrap, but we encountered an issue with our project's CSS file which also utilizes the same classes as bootstrap (.Modal, .Modal-header). This conflicting styling was causing problems for the design of ...

Question about how to add a new item to an object in TypeScript where the new property is an array

As a total novice, I have created properties for the myGlobalVariables object and set them as empty. My solution involves using TypeScript and numerous React components without incorporating additional frameworks or libraries. export class Variables exte ...

What is the process for linking to data-content?

Attempting to implement the code found at http://getbootstrap.com/javascript/#popovers-examples <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It&apo ...

Typescript polymorphism allows for the ability to create various

Take a look at the following code snippet: class Salutation { message: string; constructor(text: string) { this.message = text; } greet() { return "Bonjour, " + this.message; } } class Greetings extends Salutation { ...

Unable to retrieve any response data in Angular 2

I'm having trouble retrieving the response from my API. Despite being able to do so with PostMan, my variable "this.data" remains null. I've experimented with various approaches to no avail. Any assistance would be greatly appreciated. The method ...

What is the proper way to initialize a function that interacts with the redux state?

Imagine a scenario where I have a function that retrieves a filepath from the state based on the filename provided as an input parameter. If the filepath does not exist in the state, it then fetches the filepath from a server URL. const getFilepath = (stat ...

What is the command to determine the version of TypeScript being used in the command line interface (CLI)?

I recently added TypeScript 1.7.4 using Visual Studio 2015, and it appears correctly installed within the IDE. However, when I check the version using tsc --version in the command line, it shows a different, older version - 1.0.3.0 instead of 1.7.4. Is t ...

When using tsdx with React, null values can prevent proper usage of hooks

Recently, I attempted to develop a React TypeScript component using tsdx for compilation and encountered a roadblock while debugging. The package appears to be successfully published and installed without any errors. However, when trying to use it, I consi ...

Ways to refresh the DOM prior to completion of the change event

I've set up a file input for opening a video and I want to display that video input only if my_variable exists. Here's the HTML code: <input type="file" (change)="handleFileInput($event)" accept="video/mp4"> <div *ngIf="my_variable"> ...

One-Way Communication in Angular 2 Components

I am curious as to why one-way binding in Angular 2 only works for string properties and not for an array of strings, for example. In my setup, I have a parent component and a child component. I pass both a collection of strings and a single string, and i ...

Sending selected IDs from the JSON data

In my project, there is a JSON file named "workers" which contains information about all the workers. I have created a select component to display the names of the workers like this: https://i.sstatic.net/0Glyf.png Currently, I am selecting some workers ...