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?
by SyntaxIntepreter to determine real binding mode for this binding value.bind="message" (two way)
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 patching, so I think we better do it explicitly via value.two-way
This API was designed exactly for the use case of web component integration, so I’m glad you got it working
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.
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.
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.
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.
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.
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.
We’re a little behind on 0.4.0. Primarily, we’re in the middle of a big refactor that unifies multiple binding strategies and enables really cool stuff like async component lifecycle callbacks and timeslicing. It’s very complicated to work out all the combinations and ensure consistency and adequate test coverage. This is the big piece that we’re holding on before 0.4.0.
In parallel to that work, we’ve also been working on a new router. So, there will absolutely be something in place for routing as part of that release. It might be quite volatile, in terms of its API though. But, there will be something there.
In general, 0.4.0 will be pretty strong, but still considered “early adopter” tech. I’m building an app with our dev build now and it’s working quite well, but there are definitely issues and missing things that you would be used to. So, depending on how adventurous you are, you still might want to wait longer. (Nothing technically preventing you from getting the nightlies now and doing something with it…just no real documentation outside of the “hello world” setups.)
One other thing I’m working on is a documentation plan for vNext. That’s in the repo now. I need to fill out a few more details. Once I have what I think will be a nice set of goals, I’ll also post here in discourse for feedback from the community. That may or may not coincide with 0.4.0. It depends on how the various timetables play out.
patching, so I think we better do it explicitly via 
I really appreciate your answers here as they’re very detailed and I learn a lot about the internals.
