Angular - Component should render currency or date values

Question

I have an Angular component and it is just a label which renders a value and if it has an associated pipe, the output of the pipe should be rendered as value of the label. But I don't want to declare all the pipes in the component. Currently I would like to use the currency pipe and the date pipe with their parameters. But maybe I can extend the component to use other pipes.

Would you pass the pipes as input parameter of the component or what would be your approach to achieve that? Any idea?

Update Here you have my StackBlitz. If you can see, I pass a type of a pipe and its params as parameters, if I want to use any pipe. The component could also render a label without using a pipe.

https://stackblitz.com/edit/angular-label-render

app.component.ts

<app-custom-label value="10000" title="My Title for a Currency render" datatype="currency" param="EUR"></app-custom-label>

<app-custom-label value="01.10.1980" title="My Title for a Date render" datatype="date" param="dd MMMM"></app-custom-label>

custom.label.component.html

<h1>{{ title }}</h1>
<label> {{ value }} </label>

custom.label.component.ts

import { Component, Input, OnInit  } from '@angular/core';
import { DataType } from './type';
import { CurrencyPipe, DatePipe } from '@angular/common';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);

@Component({
  selector: 'app-custom-label',
  templateUrl: './custom.label.component.html'
})
export class CustomLabelComponent implements OnInit {
  @Input() value: string;
  @Input() title: string;
  @Input() datatype: DataType;
  @Input() param: string;


  constructor() {}

  ngOnInit(){
    if (this.datatype === "currency") {
      this.value = (new CurrencyPipe('de-DE')).transform(this.value, this.param, true);
    } else if (this.datatype === "date") {
      this.value = (new DatePipe('de-DE')).transform(this.value, this.param);
    }
  }
}

If you don’t like the pipes available, you can always create your own pipe. I wouldn’t pass the pipe as an input. Try and keep it simple. Make your component as dumb as possible. Can you make a stackblitz so we can see what you are attempting? — Andy Danger Gagne, Feb 17 '19 at 04:03

score 0 · Answer 1 · answered Feb 18 '19 at 07:07

Creating a component for transforming value seems to be an overkill, I am saying this in light of the following:

A pipe gets data as an input, transforms it and outputs this data in another way.
A Directives adds behavior to an existing DOM element or an existing component instance
A component, rather than adding/modifying behavior, actually creates its own view (hierarchy of DOM elements) with attached behavior.
referencing this & this;

Check this stackblitz on using a custom pipe to achieve your objective - look forward to other experts for their input on this understanding and solution also.

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

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
registerLocaleData(localeDe, 'de-DE', localeDeExtra);


@Pipe({name: 'customConvert'})
export class customConvertPipe implements PipeTransform {
  transform(value: number, passedObj:string): any {
    console.log( value);
    var newObj = JSON.parse(passedObj);
    console.log(newObj);
    if (newObj.datatype === "currency") {
      return (new CurrencyPipe('de-DE')).transform(value, newObj.param, true);
    } else if (newObj.datatype === "date") {
      return (new DatePipe('de-DE')).transform(value, newObj.param);
    } else if (newObj.datatype === "string"){
      return value;
    }
  }
}

Angular - Component should render currency or date values

1 Answers1