# Au-compose in ts

**URL:** <https://discourse.aurelia.io/t/au-compose-in-ts/5349>\
**Category:** vNext\
**Created:** [January 29, 2024, 3:14pm UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349 "2024-01-29T15:14:27Z")\
**Posts on this page:** 9\
**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:** [January 29, 2024, 3:14pm UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/1 "2024-01-29T15:14:27Z")

</div>

In html I can use

```auto
<au-compose component.bind="myComponent" my-prop.bind="myProp"></au-compose>

```

Is there a functionality in Au2 where I can use this in typescript? I would like to do something like this (component/properties are dynamic):

```auto
// Pseudocode
bind() {
    composer.compose({
        component: MyComponent, // provide component
        element: myHtmlElement, // provide html element
        container: myContainer, // provide di container
        model: {
            myProp: 'xy'
        }
    });
}

```

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [January 30, 2024, 6:02am UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/2 "2024-01-30T06:02:37Z")

</div>

Depending on your exact nature of use case, there are at least the following two options.

- [Synthetic views](https://docs.aurelia.io/tutorials/synthetic-view#why-use-synthetic-views): if you want to assemble a dynamic markup for some known/registered components.
- [Controller API](https://stackblitz.com/edit/au2-activation-of-ces-devland?file=src%2Fmy-app.ts): if you want to go more low-level an hydrate a given component directly.

---

<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:** [January 30, 2024, 7:14am UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/3 "2024-01-30T07:14:00Z")

</div>

Hi @Sayan751

Thanks for your feedback. I think I’m still missing something. In Au 1 there was the CompositionEngine, where I could do the following:

```auto
class MyComponent {
    myParam: string;

    activate(model: any) {
       this.myParam = model.myParam;
    }
}

const compositionContext = {
  container: this.container,
  childContainer: childContainer,
  viewModel: MyComponent,
  model: {
      myParam: 'xy'
  },
  bindingContext: null,
  viewResources: this.modalBuilder.container.get(ViewResources),
  owningView: this.owningView,
  viewSlot: new ViewSlot(myDivElement, true),
  host: myDivElement
};

await this.compositionEngine.compose(compositionContext);

```

I would like to dynamically render a component with a binding context.

The controller api looks nice, but I can’t get it to provide parameters to the ViewModel. I’ve added a `@bindable xy` and I scope to your example, but it seems that I am doing something wrong:

> **[au2 activation of CEs - devland (forked) - StackBlitz](https://stackblitz.com/edit/au2-activation-of-ces-devland-vfhlbx?file=src%2Fmy-app.ts)**
>
> A TypeScript project based on @aurelia/kernel, @aurelia/runtime-html, @types/node, copy-webpack-plugin, css-loader, html-loader, html-webpack-plugin, rimraf, style-loader, ts-loader, typescript, webpack, webpack-cli and webpack-dev-server

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [January 30, 2024, 6:23pm UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/4 "2024-01-30T18:23:31Z")

</div>

Hi @elitastic! I have tweaked your example a bit and generated a custom element definition on the fly, and used that for the controller API. I have assumed that the binding context and template comes from a different source.

Here is the working example: [discourse 5349 - StackBlitz](https://stackblitz.com/edit/discourse-5349?file=src%2Fmy-app.ts)

---

<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:** [January 31, 2024, 9:06am UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/5 "2024-01-31T09:06:42Z")

</div>

Thanks @Sayan751. My real use case is to create a modal service which renders any custom element.

I have also tweaked the example a bit to better demonstrate my goal. I have a custom element “MyCe”, this element should be rendered by ts code. The component should behave as it would be rendered in html (including lifecycles, bindables).

> **[render-component-in-ts - StackBlitz](https://stackblitz.com/edit/discourse-5349-wbtjwa?file=src%2Fmy-app.ts)**
>
> A TypeScript project based on @aurelia/kernel, @aurelia/runtime-html, @types/node, copy-webpack-plugin, css-loader, html-loader, html-webpack-plugin, rimraf, style-loader, ts-loader, typescript, webpack, webpack-cli and webpack-dev-server

Currently, I “bind” the data by calling the “activate()” method of the component manually, this works. I would prefer if the bindables could be used like in “normal” custom elements.

```auto
@customElement({
  name: 'my-ce',
  template: 'value from model: ${xy}',
})
export class MyCe {
  @bindable
  xy: string;
}

```

Is this somehow possible?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 1, 2024, 2:04am UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/6 "2024-02-01T02:04:45Z")

</div>

> [@elitastic](#):
>
> Is this somehow possible?

If you had

```ts
class MyCe {
  @bindable a
  @bindable b
}

```

and a call like this

```ts
.open({
  component: MyCe,
  model: { a: 1, b: 2, c: 3 }
})

```

What would happen to the `c` property in the model? Do you just want to ignore it?

I think we aren’t able to map out all the expected behavior of such scenarios, trying to make it natural in some cases will also make it weird in some other cases.

---

<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:** [February 1, 2024, 7:11am UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/7 "2024-02-01T07:11:05Z")

</div>

Thanks for your feedback, @bigopon.

Yes, I would expect to have the `c` property ignored in that case. Just like it is when you do the same in html:

```auto
<my-ce a.bind="1" b.bind="2" c.bind="3"></my-ce>

```

```auto
class MyCe {
  @bindable a: string;
  @bindable b: string;
  c: string; // this property is also ignored in that case
}

```

I understand the argument that it would not be expected in other use cases. It’s fine for me, I can deal with it. Thank you guys!

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [February 1, 2024, 7:14pm UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/8 "2024-02-01T19:14:55Z")

</div>

Hi @elitastic! I find no issues with having an activate method for the modal elements. Somehow, I find that to be cleaner than the alternatives. Having said that, there is a way to make use of bindable properties. Here is a working example: [discourse 5349 - with bindables - StackBlitz](https://stackblitz.com/edit/discourse-5349-with-bindables?file=src%2Fmodal-service.ts,src%2Fmy-app.ts).

It assumes that there is an identity mapping between names of the bindable attributes and the properties in the model object; that is, `model.xy` maps to `@bindable xy` and so on.

---

<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:** [February 2, 2024, 6:50am UTC](https://discourse.aurelia.io/t/au-compose-in-ts/5349/9 "2024-02-02T06:50:34Z")

</div>

This is great, thanks for your help!