AskJuri: Learning about Angular Elements
Where do I find learning material for Angular Elements
2 min read
2 min read
Hi Juri, could you perhaps point me in the right direction with respect to training material for Angular Elements. Also, what are the pros and cons?
I have published an introductory Angular Elements course on Eggehad a while ago. Here’s the link to it: Getting Started with Angular Elements
So, the main benefit of Angular Elements are that you can share your Angular components as “Custom Elements” with other non-Angular projects. Say you have a React application and you’d like to us the - say - payment flow component you created in Angular, then you can wrap that component as an Angular Element, compile it and import it into your React application.
There’s a downside though: building Angular Elements into a single JS file can get quite big, since you also embed parts of the Angular runtime to actually have the Angular Element running. Ivy helps there a bit in terms of better compilation and smaller bundle sizes, but there’s still some way to go until they become really small.
Therefore, for bundling and compiling I’d definitely take a look at Manfred Steyer’s ngx-build-plus, especially how to exclude common things like the Angular Core, RxJs etc and only load them once. That’s especially important if you load multiple Angular Elements on a page.
To get a good overview you can always also go to the Angular docs page for Angular Elements