Angular & Web Components - Using Angular Elements to create Custom Elements

Web Components is a standard to create framework agnostic HTML elements. In Angular we create an Angular Component, using Angular Elements to expose this Component as a Custom Element and use it outside of Angular. This video provides a step-by-step introduction how to create a custom component with Angular, how to use it in plain HTML and to deal with Input and Output of that custom element.

(00:00) - Intro to Web Components / Custom Elements
(02:19) - Setup and Create an Angular Component
(06:14) - Bootstrap Custom Element with Angular Elements
(09:26) - Build and Use Custom Element
(12:45) - Use Input and Output
(15:57) - Outro

[huw]

Great tutorial! Very well made. Worked a treat. Exactly what I needed.

[mihaimicsa]

Clear and concise, thank you for this!!!

[hellooojoe]

How would you create a custom web element using a standalone component and a main.ts that just has bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); Note that appConfig is where all providers are added.

[banana-qfzn]

Cool tutorial and it works... until I want to run it in an HTML. It doesn't generate the runtime.js and I get loads of errors when I try to run the index.html. Anyone got a solution for that?

[francoXHardCore]

gracias genio. no sabia como agregar Atributos.

[alexcoroza]

The best one i found so far. I still have some questions though.
1. Angular 17 now defaults new project into using standalone components, meaning there are no modules present by default. I am planning to convert my current widget app into standalone approach in the future. It would be nice it you can create another video tackling this topic.
2. Another is, how can I test this locally? Is it possible to test it via "ng serve"? Remember we emptied the bootstrap array thats why (maybe) running ng serve does nothing and cannot detect our widget component. The way i can test this currently is by copying the generated files into the public/plain-html folder and running it

[khanhluan]

Hi, if i can use this custom elements to use in different website only with script difined to point to the url of this element ?

[sskrishna]

Hi, I have one issue and below is a usecase.
In child application, when clicked on an icon, I am invoking a component based on a route and using the router parameter in the invoked component . After creating custom element for this and using in parent app, and on click of the button, its redirecting to the new route, but child app is not able to fetch the router parameter. Any solution to this.

[FernandoDiegoSantillanVaras]

can you teach the example with Angular 17, because dont exists app.module

[scsluwq]

Thank you nice tutorial.. 13:10 u mentioned something like caput syntax.. what is that ?

[alnes]

Sadly dont work in Angular 17, like all the others Tutorials ive found.... :-/