Using Ionic 4 with Aurelia

#1

Hi,

I’m trying to figure out how to use Ionic 4 together with Aurelia. As Ionic makes use of Web Components it shouldn’t be that difficult.

One thing I really don’t know why it is not working is the two-way binding i.e. ion-input. See https://github.com/stenet/au-ionic. There is an ion-input in app.html with a two-way binding to value. The value will be initialy set but changes are not reflected.

Does someone already have some experience with it and knows the reason?
Any help would be highly appreciated.

Best regards.

BTW: I saw on Twitter that @EisenbergEffect already is in contact with some guy from Ionic. Is there already something going on in background?

2 Likes

#2

Template:

<input value.bind="message" />

will be analyzed twice:

  1. by SyntaxIntepreter to determine real binding mode for this binding value.bind="message" (two way)
  2. by ObserverLocator to determine observation strategy for this binding (value property on <input/>)

By default, Aurelia uses EventManager to observe built-in form elements (input, select...) for certain properties, via events:

  • value property on <input/> as seen in <input value.bind="message"/>: use input event
  • checked property on <input /> as seen in <input type="checked" checked.bind="isSelected"/>: use change event
    … (source code link)

What you described about ion-input is exactly the expected behavior, because both analyzers lack knowledge about it:

  • SyntaxIntepreter doesn’t know <ion-input value.bind="message"/> should be two way
  • ObserverLocator + EventManager don’t know value.bind="message" on <ion-input/> should be observed via what events, so they fallback to defining reactive property value on <ion-input/>

What you can do is to teach EventManager about <ion-input/> value property binding:

export function configure(aurelia) {
  aurelia.container.get(EventManager).registerElementConfig({
    tagName: 'ion-input',
    properties: {
      value: ['ion-input-change-event'], // find the real event from ion input and replace this
    }
})

then you can do

<ion-input value.two-way="message" />

and it will work similarly to native <input/>

Note that SyntaxIntepreter supports for overriding bind command involves :monkey_face: patching, so I think we better do it explicitly via value.two-way

3 Likes

#3

Hi @bigopon,

thanks a lot! :slight_smile: I really appreciate your answers here as they’re very detailed and I learn a lot about the internals.

I’ll update my code later and reply here whether it works as expected.

1 Like

#4

Works pretty well :wink:
Thanks again!

1 Like

#5

This API was designed exactly for the use case of web component integration, so I’m glad you got it working :smile:

We are talking with Ionic to see if we can build a plugin for Aurelia vNext that would package up all this type of configuration so that you wouldn’t have to do it yourself. @stefan Any chance you might be interested in helping us out with that based on your use of Ionic? I think it could be huge for our community, especially as part of a vNext launch.

2 Likes

#6

Please don’t write <any-thing /> in html5. /> is treated as same as > in htm5.

1 Like

#7

To be honest I never used Ionic before. Therefore my experience is rather low.

My first test was quite nice and straightforward, although I don’t see a big benefit if you’re already using Aurelia together with a component suite like DevExtreme and “just” want to target PWAs.

So I’m not sure if I’m the right person for that. But sure, if there is something I can assist let me know.

1 Like

#8

Sounds good. Let us know if you encounter any other issues and we’ll let you know how things evolve with Ionic.

2 Likes

#9

I am also very interested in using Ionic together with Aurelia. I have made an integration with the Google Material Design Components for the Web; see https://github.com/arjendeblok/aurelia-material-skeleton . I use this in all my current projects. But I could also help with integration with Ionic.

2 Likes

#10

Awesome! In the next few weeks, we’re hoping to push out 0.4.0 of Aurelia vNext, which should be stable enough for us to start writing plugins. We’re planning to port over a number of our core plugins such as i18n, store, validation, http, etc. Some of these are started already, but the rest are waiting for this 0.4.0 milestone. Once that hits, I think it would be a good time to start putting together a vNext Ionic integration. We’ll have a blog post when that goes out, so be on the lookout for that.

3 Likes

#11

@EisenbergEffect Do you recommend this version (0.4.0) for Aurelia-Toolbelt vNext or better still wait?

1 Like

#12

I think that the Aurelia-Toolkit and any community plugins can probably start working with us once we hit that milestone, yes. You could do it now, but it’s a bit unstable, and might be more frustration than if you waited a bit. We’re hoping to land the last major refactors in the next few weeks, which means the core will be pretty solid.

3 Likes

#13

I have been working with Ionic for quite a while now (since ionic v1) mostly Angular1/2. Aurelia has been my goto framework for web around 2/3 years now. I would love to see the Aurelia and the Ionic worlds come together!

Let me know if I can test anything. Would love to see this happening as soon as possible, so that I can drop the Angular part. :muscle:

1 Like