Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Elements, .NetDay Bern

Angular Elements, .NetDay Bern

Thomas Gassmann

May 23, 2019
Tweet

More Decks by Thomas Gassmann

Other Decks in Programming

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 [email protected] 22.05.2019 .NET Day

    Bern - Angular Elements 55
  56. None