Angular elements in Angular 10 for creating Web Components

Angular elements: How to use angular elements in Angular 10 for creating Web Components

We take a look at how we can create web components in Angular 10 using Angular elements. Custom elements, Shadow dom and Html slot are the main ingredients of a web component, we implement these using angular 10 and typescript.

0:00 - Introduction
0:33 - Add angular elements to project
2:00 - Create Custom element
5:48 - Shadow DOM encapsulation
6:23 - Inputs for web components
10:35 - Outputs for web components
12:58 - Slots in angular elements

[fundans]

Thank you for this video, well explained and usefull content

[rafiquemohammed]

This video is worth 100 videos out thr in youtube.

[eighties]

Thanks for the video! I'm trying to convert my existing app running angular 10.2.5 to custom element following this video. I follow all the way up to 9:23. My app runs fine under normal angular at localhost:4200 pointing to src/index.html. However, when I comment out the bootstrap in app.module and try to load localhost:4200 or localhost:8080 I get "localhost refused to connect". Can you reply on how you configured the app for localhost to serve your angular app at localhost:4200 but your elements at localhost:8080?

[abhishekjaiswal]

Yes sir your tutorial is knowledgeable on webcomponent currently i am working on this so if i have facing any issue related to web components in angular 8. I asked here sir

[rahulsudhakaran]

Please add more angular videos like ngrx ❤️

[aashutoshshrivastav]

Sir can make a video on ngx-build-plus or on how to bundle up the js file generated from the web component.