Angular Elements, .NetDay Bern

Transcript

1. Angular Elements .NET Day Bern, 23.05.2019 Thomas Gassmann @gassmannT 22.05.2019 .NET Day Bern - Angular Elements 1
2. Thomas Gassmann Principal Consultant, Trainer, Speaker thomasgassmann.ch @gassmannT 22.05.2019 .NET Day Bern - Angular Elements 2
3. Agenda 22.05.2019 .NET Day Bern - Angular Elements 3 ▪ Intro Angular Elements ▪ Web Components ▪ Getting started with Angular Elements ▪ Outlook
4. Angular Elements 22.05.2019 .NET Day Bern - Angular Elements 4
5. 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
6. 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
7. 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
8. 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
9. 22.05.2019 .NET Day Bern - Angular Elements 9
10. 22.05.2019 .NET Day Bern - Angular Elements 10 Web Components
11. 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
12. 22.05.2019 .NET Day Bern - Angular Elements 12 <world-cup-statistics></world-cup-statistics>
13. 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
14. Create and Define a Custom Element 22.05.2019 .NET Day Bern - Angular Elements 14 class myElement extends HTMLElement { … } customElements.define('my-element', myElement);
15. Reactions 22.05.2019 .NET Day Bern - Angular Elements 15 class myElement extends HTMLElement { connectedCallback() { ... } disconnectedCallback() { ... } }
16. 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 } } }
17. 22.05.2019 .NET Day Bern - Angular Elements 17 <world-cup-statistics country="sui"></world-cup-statistics>
18. 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); } }
19. 22.05.2019 .NET Day Bern - Angular Elements 19 let games = document.querySelector('world-cup-statistics'); games.country = 'ger';
20. 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 })); } }
21. 22.05.2019 .NET Day Bern - Angular Elements 21 let games = document.querySelector('world-cup-statistics'); games.addEventListener('country-change', event => { ... });
22. Custom Elements in Angular 22.05.2019 .NET Day Bern - Angular Elements 22 <world-cup-statistics [country]="'sui'" (countryChanged)="foobar($event)" > </world-cup-statistics > => Angular has been designed for this
23. Enter Angular Elements 22.05.2019 .NET Day Bern - Angular Elements 23 Transforming Angular Component to Custom Element
24. 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
25. A lot of framework exists 22.05.2019 .NET Day Bern - Angular Elements 25
26. Getting started 22.05.2019 .NET Day Bern - Angular Elements 26
27. 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
28. 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 <NAME> -v ShadowDom Generate new component
29. 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<Game[]>; constructor(private service: GameService) {} ngOnInit() {… } }
30. 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); } }
31. Module 22.05.2019 .NET Day Bern - Angular Elements 31 @NgModule({ imports: [BrowserModule, HttpClientModule], declarations: [WorldCupStatisticsComponent], entryComponents: [WorldCupStatisticsComponent], bootstrap: […] }) export class AppModule { … }
32. Module 22.05.2019 .NET Day Bern - Angular Elements 32 @NgModule({ imports: [BrowserModule, HttpClientModule], declarations: [WorldCupStatisticsComponent], entryComponents: [WorldCupStatisticsComponent], bootstrap: […] }) export class AppModule { … }
33. 22.05.2019 .NET Day Bern - Angular Elements 33 <world-cup-statistics></world-cup-statistics>
34. Polyfills 22.05.2019 .NET Day Bern - Angular Elements 34
35. 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';
36. 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);
37. Demo 22.05.2019 .NET Day Bern - Angular Elements 37
38. 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; }
39. Dependency Injection 22.05.2019 .NET Day Bern - Angular Elements 39 Plattform Injector (Renderer) Module Injector (Services) Component Injector (ElementRef)
40. 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)
41. 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); } }
42. 22.05.2019 .NET Day Bern - Angular Elements 42 Dependency Injection works!
43. Content Projection 22.05.2019 .NET Day Bern - Angular Elements 43 <app-test> <span>Hallo Welt</span> </app-test> @Component({ selector: 'app-test', template: ` <ng-content></ng-content> ` }) export class TestComponent { }
44. Shadow DOM 22.05.2019 .NET Day Bern - Angular Elements 44 @Component({ … encapsulation: ViewEncapsulation.ShadowDom }) export class WorldCupStatisticsComponent implements OnInit { … }
45. Demo 22.05.2019 .NET Day Bern - Angular Elements 45
46. 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.
47. Outlook 22.05.2019 .NET Day Bern - Angular Elements 47 @Component({ selector: 'app-test', template: '...', customElement: true }) export class TestComponent { ... }
48. 22.05.2019 .NET Day Bern - Angular Elements 48 How to use it today in non Angular Projects?
49. 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
50. Output 22.05.2019 .NET Day Bern - Angular Elements 50
51. Demo 22.05.2019 .NET Day Bern - Angular Elements 51
52. 22.05.2019 .NET Day Bern - Angular Elements 52 It is just the beginning. Stay tuned with Angular 8+
53. A Special Thanks To 22.05.2019 .NET Day Bern - Angular Elements 53 Manfred Steyer https://www.softwarearchitekt.at/
54. 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
55. Thank you Thomas Gassmann @gassmannT thomasgassmann.net thomas.gassmann@trivadis.com 22.05.2019 .NET Day Bern - Angular Elements 55