Angular Elements, .NetDay Bern

Angular Elements, .NetDay Bern

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

May 23, 2019
Tweet

Transcript

  1. 3.

    Agenda 22.05.2019 .NET Day Bern - Angular Elements 3 ▪

    Intro Angular Elements ▪ Web Components ▪ Getting started with Angular Elements ▪ Outlook
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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);
  9. 15.

    Reactions 22.05.2019 .NET Day Bern - Angular Elements 15 class

    myElement extends HTMLElement { connectedCallback() { ... } disconnectedCallback() { ... } }
  10. 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 } } }
  11. 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); } }
  12. 19.

    22.05.2019 .NET Day Bern - Angular Elements 19 let games

    = document.querySelector('world-cup-statistics'); games.country = 'ger';
  13. 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 })); } }
  14. 21.

    22.05.2019 .NET Day Bern - Angular Elements 21 let games

    = document.querySelector('world-cup-statistics'); games.addEventListener('country-change', event => { ... });
  15. 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
  16. 23.

    Enter Angular Elements 22.05.2019 .NET Day Bern - Angular Elements

    23 Transforming Angular Component to Custom Element
  17. 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
  18. 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
  19. 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
  20. 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() {… } }
  21. 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); } }
  22. 31.

    Module 22.05.2019 .NET Day Bern - Angular Elements 31 @NgModule({

    imports: [BrowserModule, HttpClientModule], declarations: [WorldCupStatisticsComponent], entryComponents: [WorldCupStatisticsComponent], bootstrap: […] }) export class AppModule { … }
  23. 32.

    Module 22.05.2019 .NET Day Bern - Angular Elements 32 @NgModule({

    imports: [BrowserModule, HttpClientModule], declarations: [WorldCupStatisticsComponent], entryComponents: [WorldCupStatisticsComponent], bootstrap: […] }) export class AppModule { … }
  24. 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';
  25. 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);
  26. 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; }
  27. 39.

    Dependency Injection 22.05.2019 .NET Day Bern - Angular Elements 39

    Plattform Injector (Renderer) Module Injector (Services) Component Injector (ElementRef)
  28. 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)
  29. 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); } }
  30. 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 { }
  31. 44.

    Shadow DOM 22.05.2019 .NET Day Bern - Angular Elements 44

    @Component({ … encapsulation: ViewEncapsulation.ShadowDom }) export class WorldCupStatisticsComponent implements OnInit { … }
  32. 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.
  33. 47.

    Outlook 22.05.2019 .NET Day Bern - Angular Elements 47 @Component({

    selector: 'app-test', template: '...', customElement: true }) export class TestComponent { ... }
  34. 48.

    22.05.2019 .NET Day Bern - Angular Elements 48 How to

    use it today in non Angular Projects?
  35. 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
  36. 52.

    22.05.2019 .NET Day Bern - Angular Elements 52 It is

    just the beginning. Stay tuned with Angular 8+
  37. 53.

    A Special Thanks To 22.05.2019 .NET Day Bern - Angular

    Elements 53 Manfred Steyer https://www.softwarearchitekt.at/
  38. 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
  39. 56.