Embedded Angular elements (custom elements or web components)

Question

I'm working with angular elements 10.1.6, developing a custom element (custom-element2.js) that makes use of another custom element (custom-element1.js) developed with version 7.3.3 of angular, that is, custom-element1 .js is embedded in custom-element2.js. When compiling the project, custom-element2.js builds successfully with no errors. For some reason, when using custom-element2.js the application does not show custom-element1.js, it generates the html but nothing is shown. Do you know if it is possible to use embedded custom elements? In the angular documentation I did not find something that says that it is possible or that it is not.

embedded angular elements

Answer 1

You will need custom-element1 to know about custom-element2. You can either do this in an Angular Component way or in a Web Component way.

For the former load custom-element2 as a library in custom-element1's Angular project and then you can use it as you would any other Angular component. Details on how to create a library are in the documentation https://angular.io/guide/creating-libraries

For the latter you will register custom-element2 with the DOM\Browser as a Custom Element. You can do this in the custom-element1 code or anywhere within the DOM as long as you call createCustomElement('custom-element2') somewhere. Then you will need to set the custom element schema in custom-element1's Angular app so it knows that <custom-element2> can be a custom element. Detail on the schema are in the Angular documentation https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA