Pro Yearly is on sale from $80 to $50! »

Angular Elements, .NetDay Bern

Angular Elements, .NetDay Bern

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

May 23, 2019
Tweet

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
  56. None