Web Components with Angular Elements: Beyond the Basics | Manfred Steyer
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about lazy loading or dynamically adding Angular components, and about exposing Angular code as framework-agnostic custom elements.
Recommended by 2 people across 2 different months, 2019 to 2020.
What it is
A conference talk by Manfred Steyer at ng-conf on moving past the basics of Angular Elements, which package Angular components as framework-independent web components. It covers bundling options, dependencies, polyfills, lazy loading, Ivy, zone.js and change tracking, and content projection.
What people said
Recommends MiakovA · 2019-05 · Stack Overflow · on “How to add component dynamically through custom directive”
you can use ng-template for this: <div> <ng-template myDirective> <!-- dynamically add component through directive --> </ng-template> <span>Hello</span> </div> check this example I just created on Stackblitz [LINK] . Hope this works! Note: If you want to load components both lazily and dynamically check Manfred Steyer [LINK] Presentation in ng-conf [this video] Update: I've put some logic inside the directive. Also, I don't understand why you don't want to add ng-template.
Recommends sagat · 2020-07 · Stack Overflow · on “How to make angular project as a library and use it in JS project?”
Yes, there are possibillities to achieve framework agnostic components by using Angular Elements and uploading that for example to a private npm registry/proxy like Verdaccio [LINK] . (Or even NPM) Angular has extensive documentation on creating so called Custom elements with Angular Elements. Custom elements is a standard, supported by a large amount of browsers, that seeks to create HTML components in a framework agnostic way. Here you can find the official docs for the angular approach Angular Elements [LINK] . There are quite good videos on youtube by Manfred Steyer from the ng-conf , where he is somewhat deep diving into it --> A Deep Look At Angular Elements | Manfred Steyer [LINK] and
Cites gyozo kudor · 2020-08 · Stack Overflow · on “How can I do a default export for a custom element created with angular”
I'm very new to custom elements. I need to create a custom element to integrate into another app at our company. The problem is my custom element should be a default export I think. I need to make my custom element created by angular somehow accessible as module.default when the host loads it. There are 2 applications: the HOST app and MY App . I cannot change the host app. The host app is completely outside my control . The Host app is a React app btw. The host app does something similar to this: <script type="module"> import('/my-angular-bundle.js') .then(module => window.customElements.define('unique-custom-element-name', module.default)) .catch(error => console.error(error)) </script> ..