> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/formatters.md).

# 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).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/webcomponents/formatters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.