# Data Events

The code for the following examples are available in the [building-a-component](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/building-a-component) project inside the `\data-events` folder.

In the previous example, [Hello World](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/building-a-component/hello-world), the binding was *static*.  This means the information displayed inside the component does not change after its initial binding.  

Often times its desired that a component react to something a user does in another component on a page.  In WireBootstrap, [data events](https://docs.wirebootstrap.com/wirebootstrap/dataevents) can be used to listen for changes to data that may be of interest to a component.  Using data events, component data bindings can be *dynamic* where the data displayed inside a component changes based on other changes on a page.

In the example below, the component sets up a data event listener for an event called `my-component-change` and then rebinds to the data sent in the event when its fired on the page.

```javascript
...

// Listen for data event and re-bind
wire.data.DataEventManager.event("my-component-change").when((cfg) => {
    document.getElementById(el).innerHTML = cfg.data.value;
});

...
```

```javascript
// Fire data event passing a new 'value'
new wire.data.DataEvent()
  .event("my-component-change")
  .data({ value: "Hello Data Event" })
  .raise();

```