# Observable as ux:Class property

**URL:** <https://forums.fusetools.com/t/observable-as-ux-class-property/5932>\
**Category:** How-to Discussions\
**Created:** [February 5, 2016, 8:40am UTC](https://forums.fusetools.com/t/observable-as-ux-class-property/5932 "2016-02-05T08:40:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![oskar](https://avatars.discourse-cdn.com/v4/letter/o/f07891/32.png) [@oskar](https://forums.fusetools.com/u/oskar)\
**Post date:** [February 5, 2016, 8:40am UTC](https://forums.fusetools.com/t/observable-as-ux-class-property/5932/1 "2016-02-05T08:40:17Z")

</div>

I created a Dropdown component with some animations and such. The options are populated iterating over {options} items. Can I use the component like this?:

```auto
<Dropdown options="{order.sendingOptions}" />

```

In other words: can I specify options as a property of the component?

Right not it seems not, so, do you have any suggestion on how to approach this?

Thank you!!

---

<div class="post-metadata">

**Author:** ![Rene](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/rene/32/318_2.png) [@Rene](https://forums.fusetools.com/u/Rene)\
**Post date:** [July 29, 2016, 6:01am UTC](https://forums.fusetools.com/t/observable-as-ux-class-property/5932/2 "2016-07-29T06:01:30Z")

</div>

Bump

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [July 29, 2016, 6:50am UTC](https://forums.fusetools.com/t/observable-as-ux-class-property/5932/3 "2016-07-29T06:50:00Z")

</div>

Hi!

This is now possible 🙂 Here is a short example (notice `<object ux:Property="Items" />`):

```auto
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        items = Observable(1,2,3,4,5);

        module.exports = {
            items : items
        };
    </JavaScript>
    <Panel>

        <Panel ux:Class="List" Margin="5">
            <object ux:Property="Items" />
            <float4 ux:Property="ItemColor"/>

            <StackPanel ItemSpacing="10">
                <Each Items="{Property this.Items}">
                    <Rectangle Color="{Property this.ItemColor}" Height="10"/>
                </Each>
            </StackPanel>
        </Panel>

        <Grid ColumnCount="2" RowCount="2">
            <List Items="{items}" ItemColor="#f00"/>
            <List Items="{items}" ItemColor="#f0f"/>
            <List Items="{items}" ItemColor="#ff0"/>
            <List Items="{items}" ItemColor="#0ff"/>
        </Grid>

    </Panel>
</App>

```