Standalone Components with Angular Elements to generate Web Components

The video explores the use of Standalone Components with Angular Elements and demonstrates how to create a reusable component that can be used in multiple projects. The presenter guides the viewer through the process of building a standalone component using Angular Elements and shows how to export it as a custom element that can be used in any web application. The video also showcases how to use the created component in another project, demonstrating its flexibility and versatility. By the end of the video, viewers will have a solid understanding of how to build standalone components with Angular Elements and use them in their own projects.
Read the full article here: www.devbyseb.c...
Github code: github.com/Dev...

[@igorparampam5984]

Wonderful video. Thank you very much

[@stupid-handle]

Man, your channel is clearly underrated. I personally don't have problems providing, fetching or analysing data from/to web apps (I'm used to write cgi's/fastcgi's in C), but I started learning angular two days ago, mainly to learn something new (and to aid with the cross-browser/html hell if I ever need to), and I find it a complete mess, same as python. In my opinion one thing is to add functionality to an existing codebase, and some other is to start changing core variables and function names just because might look "prettier", breaking legacy code and all the literature written along the way. But well... The first project I'd like to tackle is making a component or element that would allow picking items from a list (actually several of these might be in a grid within a page) to refine a given search, I think this it's called incremental search. You can see an example of this if you look for, say, "digikey eeprom". That should lead you to a page with results that might be further refined by using these sort of lists I mention. These are basically multi-selection (scrollable) lists, that can also be cleared if you change your mind later (normally causing an update on the results), or even removed completely from the page in some other engines I've seen, leaving more screen available for other filters. So, can you offer some advise? I guess if I use standalone components I'd still fall into the cross-browser/html hell, and the only other thing I've seen are mat-lists which induce quite an overhead into the app and the project by pulling stuff I don't really want to use (animations, etc). Also, is there some common way angular developers reuse *template* projects? I mean, for local/personal development. Have used `ng new' a couple of times over the last couple of days and because each time it downloads like half a gigabyte (!!) I'm running out of mobile data already. Don't understand either why installation couldn't be global and simply pull whenever one wants to update. An approach like the one seen in the nvm project could be used for both, API and binaries if specific or clashing versions are needed or wanted for some reason in particular, instead of forcing users to have like 30 folders 500MB each on disk. Modern (non-solid state) hdd's are really top notch, but this is precisely one of the things that kills them prematurely.

[@DevBySeb]

Thanks for your awesome feedback mate! I understand your frustrations and concerns about Angular and the challenges you've encountered while learning it. Migrating to a new framework can indeed be overwhelming, especially when it comes with its own conventions and patterns. However, with time and practice, you'll likely become more comfortable with Angular and find it to be a powerful tool for building web applications. Regarding the specific functionality you mentioned - creating a component or element for incremental search with multi-selection lists - Angular provides several options that can help you achieve this without reinventing the wheel. While you mentioned that using existing components like mat-lists may introduce some overhead, they can still be a viable solution depending on your specific requirements. If you're concerned about the extra weight added by importing unnecessary dependencies, you can try using Angular's tree-shaking feature to eliminate unused code during the production build. This way, you can include the mat-list component without worrying about the unused features impacting your app's performance. Regarding the installation of Angular, it's true that running ng new downloads a significant amount of data because it fetches the latest Angular packages and dependencies. One way to avoid this is by caching the downloaded packages so that subsequent runs of ng new don't require re-downloading. You can use a package manager like npm or Yarn, which has built-in caching capabilities. This way, you'll only need to download the packages once, and subsequent installations will be much faster.

[@MaddesMat]

Great work👏

[@DevBySeb]

🙏🙏🙏

[@lahirumadushan2492]

It was very helpful. thanks. subscribed !

[@DevBySeb]

Thank you for watching mate 🙏🙏

[@marc_gutii]

Very useful, thanks :)

[@DevBySeb]

Thank you and thanks for watching mate 🙏🏼

[@sandeshmargaj3446]

Can you please share how we can do the same in Angular 17 using standalone components

[@DevBySeb]

There is a comment here outlining that answer mate 😁

[@Piri8]

How would you go about creating multiple elements in the same angular project? Lets say you are migrating an old web application so you have to create one angular element at the time but the goal is that eventually you will use the angular app as a whole.

[@DevBySeb]

That's a good question mate. Usually, the answer would differ from project to project due to different business cases. What we've (in the teams I have been a part of/leading) done before is that we for instance extracted the core components like Header/Footer to Web components, and more simple components like buttons, chips, etc. What you want to avoid is spending too much time to ensure that the web components work :)

[@javidcarlos]

How to load assets folder images of web app in host application.

[@DevBySeb]

Good question mate. If the target Host application is written in Angular, you would have to include it under assets in angular.json-file.

[@MarkusThiel]

So the idea here is to create a application for each component you want to use a custom element in eg. index-test.html ?

[@DevBySeb]

Good question mate. The idea is that you create a complete component library in Angular, which then could be utilized in any framework. In this video, I use it in index-test.html to simulate how it could be used with vanilla.js. The index-test file could utilize multiple components from the generated code :)

[@MarkusThiel]

@@DevBySeb hmmm.. but so the app is create just to be able to generate files needed?

[@DevBySeb]

​@@MarkusThiel Not sure I understood you correctly mate. But let's say, you got a couple of projects you want to work with. Thus, the main application shall be in Angular, meanwhile, the other applications might be in React, Vue, or even in Vanilla.js. You can generate a chunk of that Angular application if created as a component library as standalone components together with Angular Elements. This will make it possible for your team to get the same "look" and feel cross different applications. And since we're using Angular within Vanilla.js, there are a couple of things we need to set up which doesn't come out of the box, for instance, the event emitter. Hope that was clear mate. And once again, thanks for your interest! :)

[@dawidkostka1346]

@MarkusThiel NX build system is what you're looking for

[@MarkusThiel]

@@dawidkostka1346 I have been using Nx for the past 3-4 years.. how does it solve the question?

[@sw3tyy]

Is there a way to make Debugging possible with this component?

[@DevBySeb]

Excellent question mate. It's quite difficult to set up debugging for this. What you could do is build without a prettified version for instance with sourceMap: true :)

[@bbbjames1]

how does this work with angular 17? Theres no runtime.js file that gets generated in the build. Does the runtime.js happen in main.js now with angular 17? Is the bootstrap process the same?

[@bbbjames1]

Figured it out and sharing here in case anyone else has this question. You just need to cat the polyfill & main js files. Another thing to note is that since Angular v17 uses esbuild, you have to run the test index file on a server to see the custom element otherwise you'll get a CORS error in the client (it'll say failed to export from lib but its really a cors error).

[@DevBySeb]

Sorry for the late response mate and thank you for sharing with us mate! Much appreciated! 🙏🏼

[@hasan11911]

@@bbbjames1 Hi, thanks for the tip. I tried this but it is not working. Followed all steps you mentioned.

[@sandeshmargaj3446]

@@bbbjames1 Can you share your code with Angular 17. I am getting error when I render bundled js

[@alnes204]

"Uncaught SyntaxError: Unexpected token 'export' (at component-lib.js:9:144957)" i thing you mean this error ? @@bbbjames1

[@MarektAtJJ]

Not working for angular 18

[@DevBySeb]

@@MarektAtJJ thanks for the feedback mate. I might try it out and make a video for it 😁

[@MarektAtJJ]

@@DevBySeb Yes it's will works by doing soke workaround but as soon as I include more features I ended up with some errors who are kind of wearied.

[@luxiansheng2268]

how were the styles handled?

[@DevBySeb]

In a similar way it would be done as if its a regular Angular component mate 😁

[@luxiansheng2268]

Thanks for your reply. You know there'll be another style file for a regular Angular app. But I didn't see you handling, contacting or importing the style file. That's why I'm asking.@@DevBySeb

[@shriramjadhav]

Angular component animation does not work with Angular Elements!!!

[@DevBySeb]

I haven't tested that out to be honest mate. Thanks for that input - I would then recommend using CSS animations if possible. :)

[@shriramjadhav]

@@DevBySeb Thank you.