Slide 1
Slide 1 text
Angular Elements
.NET Day Bern, 23.05.2019
Thomas Gassmann @gassmannT
22.05.2019 .NET Day Bern - Angular Elements
1
Slide 2
Slide 2 text
Thomas Gassmann
Principal Consultant,
Trainer, Speaker
thomasgassmann.ch
@gassmannT
22.05.2019 .NET Day Bern - Angular Elements
2
Slide 3
Slide 3 text
Agenda
22.05.2019 .NET Day Bern - Angular Elements
3
▪ Intro Angular Elements
▪ Web Components
▪ Getting started with Angular Elements
▪ Outlook
Slide 4
Slide 4 text
Angular Elements
22.05.2019 .NET Day Bern - Angular Elements
4
Slide 5
Slide 5 text
22.05.2019 .NET Day Bern - Angular Elements
5
«Angular is ideal for building complete applications, and
our tooling, documentation and infrastructure are
primarily aimed at this case.»
Rob Wormald, Angular Team
Slide 6
Slide 6 text
Platform
22.05.2019 .NET Day Bern - Angular Elements
6
Dependency
Injection
Decorators Zones
Compile Binding Render
Material Mobile Universal
CLI Language Service Augury
ngUpdate
Router
Animation
i18n
Slide 7
Slide 7 text
22.05.2019 .NET Day Bern - Angular Elements
7
«[…] but it’s quite challenging to use in
scenarios that don’t fit that specific Singe Page
Application model.»
Rob Wormald, Angular Team
Slide 8
Slide 8 text
Use case
22.05.2019 .NET Day Bern - Angular Elements
8
▪ Enhancing existing HTML Pages
▪ Content Management Systems integration
▪ Use components in other environments or frameworks
▪ Microfrontends
▪ Migrating Legacy Apps
Slide 9
Slide 9 text
22.05.2019 .NET Day Bern - Angular Elements 9
Slide 10
Slide 10 text
22.05.2019 .NET Day Bern - Angular Elements
10
Web Components
Slide 11
Slide 11 text
Web Components
22.05.2019 .NET Day Bern - Angular Elements
11
Web Components are a set of features added by the W3C
HTML Template
Shadow DOM
HTML Imports
Custom Elements
Slide 12
Slide 12 text
22.05.2019 .NET Day Bern - Angular Elements
12
Slide 13
Slide 13 text
Custom Elements
22.05.2019 .NET Day Bern - Angular Elements
13
Custom elements share the same API surface as native
DOM objects:
▪ Attributes
▪ Properties
▪ Methods
▪ Events
Slide 14
Slide 14 text
Create and Define a Custom Element
22.05.2019 .NET Day Bern - Angular Elements
14
class myElement extends HTMLElement {
…
}
customElements.define('my-element', myElement);
Slide 15
Slide 15 text
Reactions
22.05.2019 .NET Day Bern - Angular Elements
15
class myElement extends HTMLElement {
connectedCallback() {
...
}
disconnectedCallback() {
...
}
}
Slide 16
Slide 16 text
Attributes
22.05.2019 .NET Day Bern - Angular Elements
16
class myElement extends HTMLElement {
static get observedAttributes() {
return ['country'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'country') {
// do something with newValue
}
}
}
Slide 17
Slide 17 text
22.05.2019 .NET Day Bern - Angular Elements
17
Slide 18
Slide 18 text
Properties
22.05.2019 .NET Day Bern - Angular Elements
18
class myElement extends HTMLElement {
get country() {
return this.getAttribute('country');
}
set country(val) {
this.setAttribute('country', val);
}
}
Slide 19
Slide 19 text
22.05.2019 .NET Day Bern - Angular Elements
19
let games = document.querySelector('world-cup-statistics');
games.country = 'ger';
Slide 20
Slide 20 text
Custom Events
22.05.2019 .NET Day Bern - Angular Elements
20
class myElement extends HTMLElement {
emitCountryChange() {
this.dispatchEvent(
new CustomEvent('country-change', {
detail: this.country
}));
}
}
Slide 21
Slide 21 text
22.05.2019 .NET Day Bern - Angular Elements
21
let games = document.querySelector('world-cup-statistics');
games.addEventListener('country-change', event => { ... });
Slide 22
Slide 22 text
Custom Elements in Angular
22.05.2019 .NET Day Bern - Angular Elements
22
=> Angular has been designed for this
Slide 23
Slide 23 text
Enter Angular Elements
22.05.2019 .NET Day Bern - Angular Elements
23
Transforming
Angular Component to
Custom Element
Slide 24
Slide 24 text
Enter Angular Elements
22.05.2019 .NET Day Bern - Angular Elements
24
Provides a bridge from angular concepts to web
components.
▪ @HostBinding() => Attributes
▪ @Input() => Properties
▪ @Output() => CustomEvents
▪ Lifecycle Hooks => Reactions
Slide 25
Slide 25 text
A lot of framework exists
22.05.2019 .NET Day Bern - Angular Elements
25
Slide 26
Slide 26 text
Getting started
22.05.2019 .NET Day Bern - Angular Elements
26
Slide 27
Slide 27 text
Platform
22.05.2019 .NET Day Bern - Angular Elements
27
Dependency
Injection
Decorators Zones
Compile Binding Render
Material Mobile Universal
CLI Language Service Augury
ngUpdate
Router
Animation
i18n
Slide 28
Slide 28 text
First Steps
22.05.2019 .NET Day Bern - Angular Elements
28
Update Angular CLI Update Angular CLI to > 6
ng new angularElements Create a new Angular CLI project
ng add @angular/elements Add support for angular elements
ng g c -v ShadowDom Generate new component
Slide 29
Slide 29 text
Component
22.05.2019 .NET Day Bern - Angular Elements
29
@Component({
selector: 'app-world-cup-statistics',
templateUrl: '…',
encapsulation: ViewEncapsulation.ShadowDom
})
export class WorldCupStatisticsComponent implements OnInit {
public games$: Observable;
constructor(private service: GameService) {}
ngOnInit() {… }
}
Slide 30
Slide 30 text
Module
22.05.2019 .NET Day Bern - Angular Elements
30
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el1 = createCustomElement(
WorldCupStatisticsComponent,
{ injector: this.injector });
customElements.define('world-cup-statistics', el1);
}
}
Slide 31
Slide 31 text
Module
22.05.2019 .NET Day Bern - Angular Elements
31
@NgModule({
imports: [BrowserModule, HttpClientModule],
declarations: [WorldCupStatisticsComponent],
entryComponents: [WorldCupStatisticsComponent],
bootstrap: […]
})
export class AppModule {
…
}
Slide 32
Slide 32 text
Module
22.05.2019 .NET Day Bern - Angular Elements
32
@NgModule({
imports: [BrowserModule, HttpClientModule],
declarations: [WorldCupStatisticsComponent],
entryComponents: [WorldCupStatisticsComponent],
bootstrap: […]
})
export class AppModule {
…
}
Slide 33
Slide 33 text
22.05.2019 .NET Day Bern - Angular Elements
33
Slide 34
Slide 34 text
Polyfills
22.05.2019 .NET Day Bern - Angular Elements
34
Slide 35
Slide 35 text
First Steps
22.05.2019 .NET Day Bern - Angular Elements
35
▪ Install NPM Package
npm install @webcomponents/custom-elements –-save
▪ Add import to polyfills.ts
import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim';
Slide 36
Slide 36 text
Add Custom Element dynamically
22.05.2019 .NET Day Bern - Angular Elements
36
const el = document.createElement('myElement');
el.country = 'SUI';
el.setAttribute('country', 'GER’);
el.addEventListener([]);
document.body.appendChild(el);
Slide 37
Slide 37 text
Demo
22.05.2019 .NET Day Bern - Angular Elements
37
Slide 38
Slide 38 text
Angular Elements are the Host Element
22.05.2019 .NET Day Bern - Angular Elements
38
export class TestComponent implements OnInit {
constructor(el: ElementRef) {
el.nativeElement // <- Angular Element
}
@HostListener('click’)
onHostClick($event) { ... }
@HostBinding('attr.selected')
isActive: boolean;
}
Slide 39
Slide 39 text
Dependency Injection
22.05.2019 .NET Day Bern - Angular Elements
39
Plattform Injector
(Renderer)
Module Injector
(Services)
Component Injector
(ElementRef)
Slide 40
Slide 40 text
Dependency Injection in Angular Elements
22.05.2019 .NET Day Bern - Angular Elements
40
Plattform Injector
(Renderer)
Module Injector
(Services)
Element Injector
(ElementRef)
Element Injector
(ElementRef)
Slide 41
Slide 41 text
Module
22.05.2019 .NET Day Bern - Angular Elements
41
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el1 = createCustomElement(
WorldCupStatisticsComponent,
{ injector: this.injector });
customElements.define('world-cup-statistics', el1);
}
}
Slide 42
Slide 42 text
22.05.2019 .NET Day Bern - Angular Elements
42
Dependency Injection works!
Slide 43
Slide 43 text
Content Projection
22.05.2019 .NET Day Bern - Angular Elements
43
Hallo Welt
@Component({
selector: 'app-test',
template: `
`
})
export class TestComponent {
}
Slide 44
Slide 44 text
Shadow DOM
22.05.2019 .NET Day Bern - Angular Elements
44
@Component({
…
encapsulation: ViewEncapsulation.ShadowDom
})
export class WorldCupStatisticsComponent implements
OnInit {
…
}
Slide 45
Slide 45 text
Demo
22.05.2019 .NET Day Bern - Angular Elements
45
Slide 46
Slide 46 text
Angular Elements in V7
22.05.2019 .NET Day Bern - Angular Elements
46
▪ It is just the beginning
▪ Size is too big for shipping in non Angular projects
▪ Will be much better with Ivy (V8)
▪ Will be much easier with V8+
▪ Browser Support.
Slide 47
Slide 47 text
Outlook
22.05.2019 .NET Day Bern - Angular Elements
47
@Component({
selector: 'app-test',
template: '...',
customElement: true
})
export class TestComponent {
...
}
Slide 48
Slide 48 text
22.05.2019 .NET Day Bern - Angular Elements
48
How to use it today in non Angular Projects?
Slide 49
Slide 49 text
Optimize and combine bundle in a single file
22.05.2019 .NET Day Bern - Angular Elements
49
npm install ngx-build-plus Install package ngx-build-plus
"build:element": "ng build --prod --output-
hashing=none --single-bundle --keep-polyfills"
Add script command
npm run build:element Run Command
ng add ngx-build-plus Install package ngx-build-plus
Slide 50
Slide 50 text
Output
22.05.2019 .NET Day Bern - Angular Elements
50
Slide 51
Slide 51 text
Demo
22.05.2019 .NET Day Bern - Angular Elements
51
Slide 52
Slide 52 text
22.05.2019 .NET Day Bern - Angular Elements
52
It is just the beginning. Stay tuned
with Angular 8+
Slide 53
Slide 53 text
A Special Thanks To
22.05.2019 .NET Day Bern - Angular Elements
53
Manfred Steyer
https://www.softwarearchitekt.at/
Slide 54
Slide 54 text
Ressources
22.05.2019 .NET Day Bern - Angular Elements
54
▪ github.com/gassmannT/ngElement
▪ thomasgassmann.net
▪ swissangular.com
▪ m.trivadis.com/angular
▪ angular-academy.ch
Slide 55
Slide 55 text
Thank you
Thomas Gassmann
@gassmannT
thomasgassmann.net
[email protected]
22.05.2019 .NET Day Bern - Angular Elements
55
Slide 56
Slide 56 text
No content