Angular Wrappers and Other QoL Improvements

[e111077]

I know we have Angular users out there, but we would like to make the experience easier for our users. The big problem here is that the Material Web team doesn't really have much experience with modern Angular, so we would need some light direction from passionate Angular users on best practices for achieving this as well as how to automate / maintain them.

Please comment below with any ideas or whether you'd be interested in pitching in!

EDIT: stackblitz to proof of concept

[tanishqmanuja]

I am also unaware of using material web with angular in a 'type safe' way. Material components have experimental support for MD3 but i guess it would take a huge amount of time for it to be on par with material web.

[tanishqmanuja]

Good PoC for early development.

Wouldn't there be double change detection in this example ?

i guess, add event listener is patched by zone.js it will trigger the first CD and then reEmit will trigger second CD

Legacy angular material wrappers used runOutsideNgZone, could it be used here as well ?

Also, Can you explain what is requestActivation 😅 ( I am unable to grasp that )

Another discussion could be - is Auto Generated Wrapper absolutely necessary, Manual wrapper are easier to write ( given number of components are less 30ish or so and also offer finer control over per component change detection, formValueAccessor), If the number of components increase then only maintaining becomes difficult.

[tanishqmanuja]

I was also experimenting with manual wrappers a few months ago, and got stuck by an angular cli issue .. which is now fixed. So will retry the process.

https://github.com/tanishqmanuja/issue.ngx-material

EDIT (Updated): https://github.com/tanishqmanuja/ngx-material

[e111077]

Legacy angular material wrappers used runOutsideNgZone, could it be used here as well ?

This is exactly why I'm happy you're providing feedback. I don't much about how zonejs works or the millions of facets of Angular. I'll have to look into this now.

Can you explain what is requestActivation

request-activation is a custom event dispatched by md-list-item and listened-to by md-list. See docs.

is Auto Generated Wrapper absolutely necessary

Wrappers are not strictly necessary, but frameworks like Angular and React don't support custom element typesafety, so we really should make the wrappers. Since they're not required, we need to minimize maintenance. Also, since we need to support many teams within Google and outside Google, keeping all the properties and attributes in sync across each framework becomes less and less maintainable. What's worse is that Google's internal infrastructure is a giant monorepo with only one version of all of our code, so whenever we make a change, we have to immediately migrate everyone, which makes the maintenance bad already.

On top of that, we have to determine whether the continued maintenance burden of simply adding type safety and an idiomatic experience for a specific framework is worth it – especially when this is something the frameworks should be supporting. Also, this team is a bit short-staffed, and we need to be able to support (and continue to support) all of our users with the headcount we have.

So automation is an easy "we take a week or two to build this generator and we're basically done" vs "we take a week to write out all the wrappers and all their inputs and then update them every time we make a change to the underlying library".

Again, thanks for the feedback, I'll have to look at your code make some changes

[tanishqmanuja]

Thanks for clarifying all my doubts and questions.

Lit team developers could also contribute possibly as they are/were developing for the same cause.

Links/Ideas for future reference

• Lit angular wrapper: https://github.com/lit/lit/blob/1b00c07a58707f45ad066809cd79f878fc3590d2/packages/labs/gen-wrapper-angular/src/lib/wrapper-module-template.ts

• Stencil wrapper by Ionic:
  https://github.com/ionic-team/ionic-framework/blob/e440051764fa6224a67224ef2b473ce7d51a9174/packages/angular/standalone/src/directives/angular-component-lib/utils.ts#L48

[e111077]

I’m hoping to commit these automations into the Lit repo after proving them out on this repo first since the Lit angular wrapper generator has not had anyone dedicated to it for a while + it came before standalone components were a thing in Angular

[austinw-fineart]

I actually use Lit elements including material-web inside Angular as-is. The major problem with this approach is that Angular does not play nicely with custom elements which has been a longstanding issue since... forever. You end up littering CUSTOM_ELEMENTS_SCHEMA everywhere with no help from vscode or the compiler. While I would never consider wrapping every custom element I use, I suppose I wouldn't mind using them if they were provided. That said I really feel like the responsibility lies on Angular rather than individual component libraries.

[e111077]

Thanks for the perspective! We agree that this should probably be fixed in Angular, but the likelihood of that being fixed anytime soon is likely low.

I agree that most CE authors likely wouldn’t want to wrap them themselves, but seeing our occasion bug reports from Angular and React users, there seems to be some demand for idiomatic development with CEs in respective frameworks today.

Hopefully this is something we can deliver with the least amount of performance impact + most utility to Angular users in a more-timely manner.