> For the complete documentation index, see [llms.txt](https://jsf.gitbook.io/jsf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jsf.gitbook.io/jsf/schema/creating-custom-handler/working-with-arrays.md).

# Working with arrays

In order to know when items change in array you can subscribe to events. Array prop builder supports following observables:

* `onItemAdd` - called when new item is added.
* `onItemRemove` - called when item is removed.
* `onItemsSet` - called when `setValue` or `setJsonValue` is called.

{% hint style="info" %}
All prob builders also provide observable:

* `valueChange(): Observable<ValueChangeInterface>`

Observable will emit value every time value is change, exception is only if setValue is called with silent option.

* `get statusChange(): Observable<PropStatus>`

Observable will emit status every tiem status is changed (VALID, INVALID, PENDING, DISABLED). Please note this can happen at any moment since it is controled by JSF resolver.
{% endhint %}

### Example usage from core table layout

```typescript
this.propBuilder.onItemsSet
  .pipe(takeUntil(this.ngUnsubscribe))
  .subscribe(() => {
    this.detectChanges();
  });

this.propBuilder.onItemAdd
  .pipe(takeUntil(this.ngUnsubscribe))
  .subscribe(() => {
    this.detectChanges();
  });

this.propBuilder.onItemRemove
  .pipe(takeUntil(this.ngUnsubscribe))
  .subscribe(() => {
    this.detectChanges();
  });
```