Web componenet using angular element
0 likes71 views
This document discusses using Angular elements and web components. It provides an introduction to web components and Angular elements, how to dynamically add web components, load external web components, and exclude zone.js for zone-less change detection. It also demonstrates content projection and slot APIs. The document aims to explain how web components can provide framework independence and long term maintainability for applications.
Web componenet using angular element
- 1. Web component: Using Angular Element Himanshu Tamrakar
- 2. About me Himanshu Tamrakar | Developer at Decimal Email: himanshu.tamrakar@outlook.com Contact No. : (+91)-8989468903 Github: https://github.com/Himanshu-Tamrakar
- 3. Contents ➔ Recap : Last session ➔ Introduction ➔ Webcomponent and Angular Element ➔ Dynamically adding web component ➔ Loading external Web component ➔ Zone-less change detection ➔ Content Projection and slot api
- 4. Recap: Angular Based Frontend Architecture
- 5. Angular Based Architecture Recap (npm)-package Advantages Disadvantages How to create Mono repo Advantages Disadvantages How to achieve using CLI and NX Micro Frontend Advantages Disadvantages How to achieve using Hyperlink and Shell based app Decision Tree How to choose architecture for such a use case
- 7. Summary We have adopted npm package and Micro frontend for vahana 2.0. More specifically we are using Hyperlink, npm package, Web components andiframe for our vahana 2.0 Architecture. The next session will be devoted to explain Vahana 2.0 Frontend architecture,, so stay tuned.
- 8. Introduction
- 10. Web component and Angular Elements
- 13. Shadow dom Standards behinds Web components Templates Custom Element Default present in Angular @Coponent(encapsulation..) Angular Element
- 14. Angular Element
- 16. Demo
- 17. Polyfils
- 18. All this can be polyfill down to IE11 and (more or less)
- 20. Polyfills 1. Loader polyfills 2. Es5-adapter polyfills
- 21. Differential Loading CLI >= 8+: Angular generates two builds one for modern browser and another for older browser that support es5. We can be safe on installing polyfills. Instead we will create two builds. ES 2015+ ES5 browserlist IE9-11 tsconfig target: ES2015
- 22. Differential Loading <script src=”bundle-es5.js” nomodule></script> <script src=”bundle-es2015.js” type=”module”></sript>
- 23. Demo
- 24. Dynamically loading the web component
- 25. Demo
- 27. Custom Elements Bundle Application uses bundle Bundling is not supported officially
- 28. Demo
- 29. Zone Less Change Detection
- 30. Why zone.js? ● Used by angular change detection ● Patches each browser event ● Notify angular after each event handler
- 31. Why not zone.js? ● Because it is heavy in size wise ● Awkward to force consumers of our web component to load zone.js ● Issues with native (async/await) (>=ES2017) Because zone.js cannot patch native async/await.
- 32. How to exclude zone.js? platformBrowserDynamic() .bootstrapModule(AppModule, {ngZone: ‘noop’}) .catch(err => console.error(err)); And remove import from polyfills
- 33. Consequences ● Manual change detection ● Change detection via Observable
- 34. Demo
- 35. Content Projection and Slot api
- 36. Demo
- 37. Quesion?
- 38. References Enterprise Angular Confluence: Angular Library Confluence: Architecture Web Based Enterprise application Confluence: Web components