Create multiple root components in Angular with Angular Elements
The main use case for compiling Angular Components into standalone Angular Elements and bundle them into a single JS file, is to use them within other environments. Such might include server side CMS systems or micro frontends. In such scenarios, an Angular Element or web component should be isolated, fulfil a single functionality and communicate with the outside world using inputs & outputs.
You can however also compile multiple Angular Elements out of a single Angular app, use them separately inside some index.html file and even have them share the state over Angular services! Let's learn how!
Instructor: [00:00] The main idea behind compiling down Angular components into custom elements, and being able to use them outside of Angular as a single script file include is usually because you want to fix them into existing applications, or you might even want to build some kind of micro front end where you have React application, maybe even Vue, Jest, and Angular components managed by some vanilla Jest router, for instance.
[00:25] In those use cases, these custom elements, these web components, should be as independent as possible, so they fulfill certain functionality. Then they communicate via inputs and outputs with the other part of the application, which then might be vanilla Jest, or even a React application.
[00:41] However, you might also have the situation where you have different kind of components, which you wanted to export as a single JavaScript file. You want to have to communicate via services, and this totally works. Let's generate a new Angular component using the Angular CLI component. Let's call it display component. Let's also generate a service. Let's call it share.
[01:02] Now, if we take a look here, we see our share service. We see the feedback form component. We also see that newly generated component, that display component. Now, first of all, what we want to have here is we want in the display component, just visualize the name that gets entered here by the user and submitted.
[01:19] We go to that HTML part here, and we can directly use that share service. Let's call it like this, shareService.name. In the share service, we will have a property -- for now, let's just call it here name -- which will be set by our feedback form component.
[01:37] In the feedback form component, in the constructor, let's import that share service. This is a normal sharing state over an Angular service, just as you would do in a normal Angular application. We call shareService.name equals, and say value.name, which is here, that input form, which is here, returned by this form control. Let's save this.
[02:00] The display component, we also need to make sure that we get here a reference to that share service. We need to make it public, such that it can be accessed here directly in our template, and display the name.
[02:15] Great. Now, we have wired up some components, which use the same service, which is a singleton class. Thus, can set and greet property names from that service. Now, we also need here to register a new web component, a new custom Angular element.
[02:31] We have our display component, which should also go here to those entry components. We also want to register it as a custom element. We then need to adjust, of course, here our name. Let's call it display component.
[02:49] We also need to pass in here our display element. Now, since this is side bootstrapping Angular element, we can also move that whole logic down here into that ngDoBootstrap. It works also in the constructor, but it's probably more clean to place it down here, as this is where everything gets bootstrapped.
[03:07] Now, let's just adjust here the code. We need to use the dist here, since we're referencing now the injector, which gets passed in here via the constructor. Now, once we have that, let's build these web components.
[03:22] Once the compilation finishes, we can go to our index.html file here, can remove this part here, because we don't need it anymore. Let's place here some other HTML text inside. Then we can use our display component.
[03:40] Let's save this. Now, you see here, this gets already precompiled, because we pass in the input here via that HTML attribute. Now, if I submit, we can see that we have our other component below here, which is our display component.
[03:54] Which gets this state shared over that service, which we have just built. Whenever I change here .name, and submit it, it will be set on the service, just as we've seen before. This one will automatically update. What you can see here is now, effectively having multiple root-level components for our Angular app, which is normally not possible.