Slide 1
Slide 1 text
thomasgassmann.net
@gassmannT
Client-Architekturen mit Angular Elements
Thomas Gassmann
Slide 2
Slide 2 text
Agenda
• Intro Angular Elements
• Web Components
• Getting started with Angular Elements
• Outlook
Slide 3
Slide 3 text
Angular Elements
Slide 4
Slide 4 text
«Angular is ideal for building complete applications, and
our tooling, documentation and infrastructure are
primarily aimed at this case.»
Rob Wormald, Angular Team
Slide 5
Slide 5 text
Platform
Dependency
Injection
Decorators Zones
Compile Binding Render
Material Mobile Universal
CLI
Language
Service
Augury
ngUpdate
Router
Animation
i18n
Slide 6
Slide 6 text
«[…] but it’s quite challenging to use in
scenarios that don’t fit that specific Singe Page Application
model.»
Rob Wormald, Angular Team
Slide 7
Slide 7 text
Use Cases
• Enhancing existing HTML Pages
• Content Management Systems integration
• Use components in other environments or frameworks
• Microfrontends
• Migrating Legacy Apps
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Web Components
Slide 10
Slide 10 text
Web Components
Web Components are a set of features added by the W3C
HTML Template
Shadow DOM
HTML Imports
Custom Elements
Slide 11
Slide 11 text
Custom Elements
Custom elements share the same API surface as native
DOM objects:
• Attributes
• Properties
• Methods
• Events
Slide 12
Slide 12 text
Create and Define a Custom Element
Slide 13
Slide 13 text
Reactions
Slide 14
Slide 14 text
Attributes
Slide 15
Slide 15 text
Properties
let games = document.querySelector('world-cup-statistics');
games.country = 'ger';
Slide 16
Slide 16 text
Custom Event
let games = document.querySelector('world-cup-statistics');
games.addEventListener('country-change', event => { ... });
Slide 17
Slide 17 text
Custom Elements in Angular
=> Angular has been designed for this
Slide 18
Slide 18 text
Enter Angular Elements
Transforming
Angular Component
to Custom Element
Slide 19
Slide 19 text
Enter Angular Elements
Provides a bridge from angular concepts to web
components.
@HostBinding() => Attributes
@Input() => Properties
@Output() => CustomEvents
Lifecycle Hooks => Reactions
Slide 20
Slide 20 text
Getting started
Slide 21
Slide 21 text
Platform
Dependency
Injection
Decorators Zones
Compile Binding Render
Material Mobile Universal
CLI
Language
Service
Augury
ngUpdate
Router
Animation
i18n
Slide 22
Slide 22 text
• 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 -v ShadowDom
Slide 23
Slide 23 text
Component
Slide 24
Slide 24 text
Module
Slide 25
Slide 25 text
Module
Slide 26
Slide 26 text
Polyfills
Slide 27
Slide 27 text
• 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';
Slide 28
Slide 28 text
Add Custom Element dynamically
Slide 29
Slide 29 text
DEMO
Slide 30
Slide 30 text
Dependency Injection
Plattform Injector
(Renderer)
Module Injector
(Services)
Component Injector
(ElementRef)
Slide 31
Slide 31 text
DI in Angular Elements
Plattform Injector
(Renderer)
Module Injector
(Services)
Element Injector
(ElementRef)
Element Injector
(ElementRef)
Slide 32
Slide 32 text
Module
Slide 33
Slide 33 text
Shadow DOM
Slide 34
Slide 34 text
DEMO
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
Outlook
Slide 37
Slide 37 text
How to use it today in non
Angular Projects?
Slide 38
Slide 38 text
• 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
Slide 39
Slide 39 text
Output
Slide 40
Slide 40 text
DEMO
Slide 41
Slide 41 text
Thomas Gassmann
• Web development using .NET, Typescript and
Angular
• Trainer, Speaker
@gassmannT thomasgassmann.net
Slide 42
Slide 42 text
Ressources
• github.com/gassmannT/ngElement
• thomasgassmann.net
• swissangular.com
• m.trivadis.com/angular
Slide 43
Slide 43 text
No content