# Formatters

Formatters are functions that mutate the incoming and/or outgoing value of a binding. You can use them to format dates, numbers, currencies, etc. and because they work in a similar fashion to the Unix pipeline, the output of each feeds directly as input to the next one, so you can stack as many of them together as you like.

```javascript
tinybind.formatters.date = function(value){
  return moment(value).format('MMM DD, YYYY')
}
```

Formatters are applied by piping them to binding declarations using `|` as a delimiter.

```html
<span wr-text="event.startDate | date"></span>
```

## Computed

Computed values can be stored on an object as functions.  Use the  `watch` formatter to track changes on one or more dependent properties that must be passed as arguments.

Consider the person object in the example below.

```javascript
const person = {
    firstName: "Jen",
    lastName: "Stevens",
    fullName: ()=> {
        return this.firstName + " " + this.lastName;
    }
}
```

In the binding below, the `fullName` function will be called each time the `firstName` or `lastName` properties change.

```html
<label wr-text="fullName | watch firstName lastName"></label>
```

## Event Args

It's not possible to pass parameters to a standard [TinyBind event binding](https://blikblum.github.io/tinybind/docs/reference/#on-\[event]).  Use the `args` formatter to pass parameters to an event.

In the following example, the word `red` is passed to the `myClick` `click` event.

```javascript
class MyComponent extends wire.ui.WebComponent {

  myClick(ev, color) => {
    // handle click event
  }

  static get template() {
    return '<button wr-on-click="myClick | args 'red'"></button>';
  }
      
}
```

## Property

Use the `property` formatter to dynamically reference a property on a object. &#x20;

In the example below, the value in the `name` property on the `item` objects in the `items` array will be put into the `label`. &#x20;

```html
<ul>
  <li wr-each-item="items">
    <label><{item | property 'name'}<label>
  </li>
<ul>
```

The `name` parameter to the `property` formatter can be passed to the component as an attribute to make the reference dynamic.

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      'property-name': true
  }
  static get templateUrl() {
    return './my-component.html';
  }
      
}
```

```html
<!-- my-component.html -->
<ul>
  <li wr-each-item="items">
    <label><{item | property property-name}<label>
  </li>
<ul>
```

For more on formatters, visit the [Tinybind formatters page](https://blikblum.github.io/tinybind/docs/guide/#formatters).