Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

AskJuri: Learning about Angular Elements

Where do I find learning material for Angular Elements

2 min read

About questions I’m getting asked online, on Twitter, in person…wherever and which I find useful to share with the general public


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?


Hi! Sure.

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

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus