This document provides an introduction to Angular Elements, which allows Angular components to be used as custom elements in non-Angular applications. It discusses how Angular Elements leverage Web Components standards like custom elements and shadow DOM. It also outlines how to get started with Angular Elements, including generating a component, adding polyfills, handling dependency injection, and optimizing bundles. The document concludes with a look at using Angular Elements in production today and the future outlook as browser support improves.

1. thomasgassmann.net@gassmannT
Client-Architekturen mit Angular Elements
Thomas Gassmann

2. Agenda
• Intro Angular Elements
• Web Components
• Getting started with Angular Elements
• Outlook

3. Angular Elements

4. «Angular is ideal for building complete applications, and
our tooling, documentation and infrastructure are
primarily aimed at this case.»
Rob Wormald, Angular Team

5. Platform
Dependency
Injection
Decorators Zones
Compile Binding Render
Material Mobile Universal
CLI
Language
Service
Augury
ngUpdate
Router
Animation
i18n

6. «[…] but it’s quite challenging to use in
scenarios that don’t fit that specific Singe Page Application
model.»
Rob Wormald, Angular Team

7. Use Cases
• Enhancing existing HTML Pages
• Content Management Systems integration
• Use components in other environments or frameworks
• Microfrontends
• Migrating Legacy Apps

9. Web Components

10. Web Components
Web Components are a set of features added by the W3C
HTML Template
Shadow DOM
HTML Imports
Custom Elements

11. Custom Elements
Custom elements share the same API surface as native
DOM objects:
• Attributes
• Properties
• Methods
• Events

12. Create and Define a Custom Element

13. Reactions

14. Attributes
<world-cup-statistics country="sui"></world-cup-statistics>

15. Properties
let games = document.querySelector('world-cup-statistics');
games.country = 'ger';

16. Custom Event
let games = document.querySelector('world-cup-statistics');
games.addEventListener('country-change', event => { ... });

17. Custom Elements in Angular
=> Angular has been designed for this

18. Enter Angular Elements
Transforming
Angular Component
to Custom Element

19. Enter Angular Elements
Provides a bridge from angular concepts to web
components.
@HostBinding() => Attributes
@Input() => Properties
@Output() => CustomEvents
Lifecycle Hooks => Reactions

20. Getting started

21. Platform
Dependency
Injection
Decorators Zones
Compile Binding Render
Material Mobile Universal
CLI
Language
Service
Augury
ngUpdate
Router
Animation
i18n

22. • Create a new Angular CLI project
ng new angularElements
First Steps
• Update Angular CLI
• Add support for angular elements
ng add @angular/elements
• Generate new component
ng g c <NAME> -v ShadowDom

23. Component

24. Module

25. Module
<world-cup-statistics></world-cup-statistics>

26. Polyfills

27. • Install NPM Package
npm install @webcomponents/custom-elements –-save
First Steps
• Add import to polyfills.ts
import '@webcomponents/custom-elements/custom
-elements.min';
import '@webcomponents/custom-elements/src/native-shim';

28. Add Custom Element dynamically

29. DEMO

30. Dependency Injection
Plattform Injector
(Renderer)
Module Injector
(Services)
Component Injector
(ElementRef)

31. DI in Angular Elements
Plattform Injector
(Renderer)
Module Injector
(Services)
Element Injector
(ElementRef)
Element Injector
(ElementRef)

32. Module

33. Shadow DOM

34. DEMO

35. Angular Elements in V8
• It is just the beginning
• Size is too big for shipping in non Angular projects
• Will be much better with Ivy (V9)
• Will be much easier with V9+
• Browser Support.

36. Outlook

37. How to use it today in non
Angular Projects?

38. • Install package ngx-build-plus
ng add ngx-build-plus
Optimize and combine bundle
• Add script command
"build:element": "ng build --prod --output-hashing=none --
single-bundle --keep-polyfills"
• Run Command
npm run build:element

39. Output

40. DEMO

41. Thomas Gassmann
• Web development using .NET, Typescript and
Angular
• Trainer, Speaker
@gassmannT thomasgassmann.net

42. Ressources
• github.com/gassmannT/ngElement
• thomasgassmann.net
• swissangular.com
• m.trivadis.com/angular