Swap - Pipes

There are simply no pipes, because anything evaluated in the brackets is considered plain JavaScript. Because this is evaluated as plain javascript, there is simply no need for pipes.

Code

I was looking to do a date formatter Pipe, using day.js

import dayjs from 'dayjs'

dateFormatter(date, format = 'MMM-DD-YYYY') { 
    return dayjs(date).format(format); 
}

<span>{this.dateFormatter(eventData.startDate)} 
    To {this.dateFormatter(eventData.endDate)}</span>

Looking at this bit of code, I find it simpler than using pipes. If I wanted to have a function, that could be used in more than one components, well exporting it from a TS file and importing it here would as well work.

Context

The Q&A below talks about an uppercase pipe, which we are so used to in Angular. ( Well the same can also be achieved via CSS )

{{ value_expression | uppercase }}

For an Alternative - It's easy enough to just create a wrapper function, and use that. For example, if you wanted to create a custom function to uppercase just the first letter, we can define a function

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

and then use it within JSX as -

{capitalizeFirstLetter(this.state.variable)}

Reference

Last updated

Was this helpful?