Two-way binding/ngModel using Angular

[r-jasinski]

Please guys, how are you handling the data binding when using web-components and Angular? Is it possible to have two-way binding or use ngModel?

[deebloo]

It should work just fine? Angular binds to dom properties so it should work well with web components. Are you having a particular issue?

[e-oz]

Hi! I've never seen shoelace before, but you can read how to work with WebComponents in Angular here: https://angular.io/guide/elements

[ChellappanRajan]

ngDefaultControl directive can be used for simple form controls, but if you need more complex functionality, you will need to implement a custom ControlValueAccessor.

You can refer this article for how to implement CVA for custom component :https://coryrylan.com/blog/using-web-components-in-angular-forms-with-element-internals

[claviska]

In addition to the other suggestions, there are some potentially helpful responses to my tweet here.

[mariohamann]

In a project I'm working in we've followed the exact same concept of Shoelace's React wrappers to build Angular wrappers:
https://github.com/SickDesignSystem/synergy/tree/main/packages/components/scripts/jobs/angular

These wrappers make it possible to provide all special Angular syntax for models, event listeners, methods etc. including TypeScript/intellisense support (I'm personally not an Angular user, maybe some stuff could be improved here):
https://github.com/SickDesignSystem/synergy/blob/main/packages/_private/angular-demo/src/app/app.component.html

(Note: Our prefix is syn instead of sl)

@claviska Would you be interested in a PR to provide Angular wrappers in addition to your React wrappers?

[claviska]

I'm mostly worried about documenting things for yet another framework. React still has poor custom element support to this day, but they were the only major framework that had that problem so wrappers were necessary. React also continues to hold the majority of market share, so it played a big part in making Shoelace usable in it.

If we wrap for every framework, including those that already support web components, we perpetuate the idea that it's OK to ignore custom elements. Next will come Vue, Solid, etc. I'd prefer to see the effort put into frameworks to improve support for platform APIs instead of patching every single one of them.

The work to write and update the Shoelace docs has at least doubled because we now have to provide a second example for every demo just for React — and there are currently about 330 of them. Unless there's a way to automate this for all the other frameworks, I don't think we'll have the bandwidth to manage more than we currently are.

Instead of wrapping, can we provide a custom directive or a similar utility like we do with Vue? I'm not an Angular user, so I may not have the best understanding of the pain this is causing, but adding wrappers and examples just to facilitate binding seems like overkill and a slippery slope.

[deebloo]

the only reason I could see wanting to add anything angular specific is implementing a ControlValueAccesssor directive so that shoelace integrates smoothly with the forms module. I don't think you would need full wrappers by any means. If the ControlValueAccessor implementation is simple enough (I think it would be) it may be more of a documentation issue than code that should live in the shoelace repo

[deebloo]

noticing this was brought up earlier in the thread by @ChellappanRajan

[mariohamann]

I missed the documentation part, thanks for pointing that out. In the project I'm working in, the demand was very high for explicit Angular wrappers (or it could have even been a show stopper).

My thought was that it could raise the usage of Shoelace even more, but I totally get that it's not worth the hustle.

If we're creating an unofficial, auto-updating package with those Angular wrappers, would you be open to link to it in your docs?

[claviska]

Yeah, for sure! Again, I'd be open to supporting a utility that makes things easier too.