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.

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

9. Long Term maintainability

10. Web component and Angular
Elements

12. Web component:
Framework Independent
Components

13. Shadow dom
Standards behinds Web components
Templates
Custom Element
Default present in Angular
@Coponent(encapsulation..)
Angular Element

14. Angular Element

15. Using Custom Element
<pie-chart></pie-chart>

16. Demo

17. Polyfils

18. All this can be polyfill
down to IE11 and (more
or less)

19. Polyfills
1. @webcomponents/webcomponentsjs
2. Others..

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

26. Loading External Web
Component

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