# Class.bind with object

**URL:** <https://discourse.aurelia.io/t/class-bind-with-object/3517>\
**Category:** Framework Knowledge\
**Created:** [May 27, 2020, 11:00am UTC](https://discourse.aurelia.io/t/class-bind-with-object/3517 "2020-05-27T11:00:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [May 27, 2020, 11:00am UTC](https://discourse.aurelia.io/t/class-bind-with-object/3517/1 "2020-05-27T11:00:56Z")

</div>

Is it correct that this is **not** a valid class binding syntax:

```
<span class.bind="{ 'class1': prop1 == 'x', 'class2': prop2 == 'y' }"></span>

```

How should I write this?

The following approach does not look very elegant to me:

```
<span class="${prop1 == 'x' ? 'class1' : ''} ${prop2 == 'y' ? 'class2' : ''}"></span>
```

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [May 28, 2020, 2:26am UTC](https://discourse.aurelia.io/t/class-bind-with-object/3517/2 "2020-05-28T02:26:23Z")

</div>

Thats correct. There a lot of flexibility here though

one way is using a custom attribute to populate classes.

```javascript
// classes-custom-attribute.ts
import { dynamicOptions, inject } from 'aurelia-framework';
import { getLogger} from 'aurelia-logging';

@dynamicOptions
@inject(Element)
export class ClassesCustomAttribute {
  logger = getLogger('classes');

  constructor(private element: Element) { }

  propertyChanged(name: string, newValue: boolean, oldValue: boolean) {
    this.logger.debug('changed', name, newValue, oldValue);
    newValue ? this.element.classList.add(name)
      : this.element.classList.remove(name);
  }
}

```

and then use it like

```auto
<template>
  <require from="./classes-custom-attribute"></require>

  <div class="static-class" classes="class1.bind: prop1 == 'x'"></div>
</template>

```

* * *

another way with a custom attribute

```javascript
// classes-custom-attribute.ts
import { inject } from 'aurelia-framework';
import { getLogger} from 'aurelia-logging';

@inject(Element)
export class ClassesCustomAttribute {
  logger = getLogger('classes');

  constructor(private element: Element) { }

  value: Record<string, any>;

  valueChanged(newValue: any, oldValue: any) {
    this.logger.debug('changed', newValue, oldValue);

    Object.keys(newValue).forEach(key => {
      newValue[key] ? this.element.classList.add(key)
        : this.element.classList.remove(key);
    });
  }
}

```

and use it like

```auto
<template>
  <require from="./classes-custom-attribute"></require>

  <div class="static-class" classes.bind="{class1: prop1 == 'x', class2: prop2 == 'y'}"></div>
</template>

```

* * *

or use a value converter

```javascript
// filter-class-value-converter.ts
export class FilterClassValueConverter {
  toView(newValue: Record<string, any>): string {
    if (!newValue) return '';

    return Object.keys(newValue)
      .filter(key => {
        return newValue[key];
      })
      .join(' ')
  }
}

```

and use it like

```auto
<template>
  <require from="./filter-class-value-converter"></require>

  <div class="static-class ${{class1: prop1 == 'x', class2: prop2 == 'y'} | filterClass }"></div>
  or
  <div class.bind="{class1: prop1 == 'x', class2: prop2 == 'y'} | filterClass "></div>
</template>

```

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [May 28, 2020, 2:28am UTC](https://discourse.aurelia.io/t/class-bind-with-object/3517/3 "2020-05-28T02:28:18Z")

</div>

you could make any of the above a global resource too so you don’t have to require in each of your templates

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [May 29, 2020, 1:33am UTC](https://discourse.aurelia.io/t/class-bind-with-object/3517/4 "2020-05-29T01:33:24Z")

</div>

Au2 can handle this natively. Basically anything clsx can do plus more.

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [May 29, 2020, 7:44am UTC](https://discourse.aurelia.io/t/class-bind-with-object/3517/5 "2020-05-29T07:44:37Z")

</div>

Many thanks to all of you!