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

ngComponent als wiederverwendbare Komponente für beliebige JavaScript Apps

ngComponent als wiederverwendbare Komponente für beliebige JavaScript Apps

Slides from my presentation about Angular Elements at Developer Week (DWX) 2018 in Nürnberg, Germany.
Demo can be found at https://github.com/gassmannT/WorldCupComponent

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

June 26, 2018
Tweet

Transcript

  1. ngComponent als wiederverwendbare Komponente für beliebige JavaScript Apps DWX Nürnberg

    2018 Thomas Gassmann @gassmannT
  2. Thomas Gassmann Senior Consultant, Trainer, Speaker thomasgassmann.ch @gassmannT 26.06.2018 Angular

    Elements 3
  3. Agenda 26.06.2018 Angular Elements 4 ▪ Intro Angular Elements ▪

    Web Components ▪ Getting started with Angular Elements ▪ Outlook v7
  4. Angular Elements 26.06.2018 Angular Elements 5

  5. 26.06.2018 Angular Elements 6 «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 26.06.2018 Angular Elements 7 Dependency Injection Decorators Zones Compile

    Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
  7. 26.06.2018 Angular Elements 8 «[…] 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 26.06.2018 Angular Elements 9 ▪ Enhancing existing HTML

    Pages ▪ Content Management Systems ▪ Use components in other environments or frameworks ▪ Microfrontends ▪ Reuse components across teams
  9. 26.06.2018 Angular Elements 10

  10. 26.06.2018 Angular Elements 11 Web Components

  11. Web Components 26.06.2018 Angular Elements 12 Web Components are a

    set of features added by the W3C ▪ HTML Template: Template of the HTML ▪ Shadow DOM: DOM and style encapsulation ▪ HTML Imports: Imports in HTML ▪ Custom Elements: Ability to add to the HTML vocabulary
  12. 26.06.2018 Angular Elements 13 <app-matches-today></app-matches-today>

  13. Custom Elements 26.06.2018 Angular Elements 14 Custom elements share the

    same API surface as native DOM objects: ▪ Attributes ▪ Properties ▪ Methods ▪ Events
  14. Create and Define a Custom Element 26.06.2018 Angular Elements 15

    class myElement extends HTMLElement { … } customElements.define('my-element', myElement);
  15. Reactions 26.06.2018 Angular Elements 16 class myElement extends HTMLElement {

    connectedCallback() { ... } disconnectedCallback() { ... } }
  16. Attributes 26.06.2018 Angular Elements 17 class myElement extends HTMLElement {

    static get observedAttributes() { return ['country']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'country') { // do something with newValue } } }
  17. 26.06.2018 Angular Elements 18 <app-matches-by-country country="sui"></app-matches-by-country>

  18. Properties 26.06.2018 Angular Elements 19 class myElement extends HTMLElement {

    get country() { return this.getAttribute('country'); } set country(val) { this.setAttribute('country', val); } }
  19. 26.06.2018 Angular Elements 20 let matches = document.querySelector('app-matches-by-country’); matches.country =

    'ger';
  20. Custom Events 26.06.2018 Angular Elements 21 class myElement extends HTMLElement

    { emitCountryChange() { this.dispatchEvent( new CustomEvent('country-change', { detail: this.country })); } }
  21. 26.06.2018 Angular Elements 22 let matches = document.querySelector('app-matches-by-country’); matches.addEventListener('country-change', event

    => { ... });
  22. Custom Elements in Angular 26.06.2018 Angular Elements 23 <app-matches-by-country [country]="sui"

    (countryChanged)="foobar($event)" > </app-matches-by-country> => Angular has been designed for this
  23. Enter Angular Elements 26.06.2018 Angular Elements 24 Provides a bridge

    from angular concepts to web components. ▪ @HostBinding() => Attributes ▪ @Input() => Properties ▪ @Output() => CustomEvents ▪ Lifecycle Hooks => Reactions
  24. A lot of framework exists 26.06.2018 Angular Elements 25

  25. Getting started 26.06.2018 Angular Elements 26

  26. Platform 26.06.2018 Angular Elements 27 Dependency Injection Decorators Zones Compile

    Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
  27. First Steps 26.06.2018 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 matchToday -v Native Generate new component
  28. Component 26.06.2018 Angular Elements 29 @Component({ selector: 'app-matches-today', templateUrl: 'matches-today.component.html’,

    styleUrls: ['matches-today.component.css’], encapsulation: ViewEncapsulation.Native }) export class MatchesTodayComponent implements OnInit { public matches$: Observable<Match[]>; constructor(private matchService: MatchService) {} ngOnInit() { this.matches$ = this.matchService.getTodayMatches(); } }
  29. Module 26.06.2018 Angular Elements 30 @NgModule({ imports: [BrowserModule, HttpClientModule], declarations:

    [AppComponent, MatchesTodayComponent], entryComponents: [MatchesTodayComponent], providers: [] }) export class AppModule { … }
  30. Module 26.06.2018 Angular Elements 31 export class AppModule { constructor(private

    injector: Injector) {} ngDoBootstrap() { const el1 = createCustomElement( MatchesTodayComponent, { injector: this.injector }); customElements.define('app-matches-today', el1); } }
  31. 26.06.2018 Angular Elements 32 <app-matches-today></app-matches-today>

  32. Use with Javascript 26.06.2018 Angular Elements 33 const matchesToday =

    document.createElement('app- matches-today'); document.body.appendChild(matchesToday); matchesToday.country = 'SUI'; matchesToday.setAttribute('country', 'GER');
  33. Use with Custom Element API 26.06.2018 Angular Elements 34 const

    MatchToday = document.get('app-matches-today’); const matchToday = new MatchToday(); // or const matchToday = new MatchToday(differencInjector);
  34. Angular Elements are the Host Element 26.06.2018 Angular Elements 35

    export class TestComponent implements OnInit { constructor(el: ElementRef) { el.nativeElement // <- Angular Element } @HostListener('click’) onHostClick($event) { ... } @HostBinding('attr.selected') isActive: boolean; }
  35. Dependency Injection 26.06.2018 Angular Elements 36 Plattform Injector (Renderer) Module

    Injector (Services) Component Injector (ElementRef)
  36. Dependency Injection in Angular Elements 26.06.2018 Angular Elements 37 Plattform

    Injector (Renderer) Module Injector (Services) Element Injector (ElementRef) Element Injector (ElementRef)
  37. Module 26.06.2018 Angular Elements 38 export class AppModule { constructor(private

    injector: Injector) {} ngDoBootstrap() { const el1 = createCustomElement( MatchesTodayComponent, { injector: this.injector }); customElements.define('app-matches-today', el1); } }
  38. 26.06.2018 Angular Elements 39 Dependency Injection works!

  39. Demo 26.06.2018 Angular Elements 40

  40. Content Projection 26.06.2018 Angular Elements 41 <app-test> <span>Hallo DWX</span> </app-test>

    @Component({ selector: 'app-test’, template: ` <ng-content></ng-content> ` }) export class TestComponent { }
  41. Shadow DOM 26.06.2018 Angular Elements 42 @Component({ … encapsulation: ViewEncapsulation.Native

    }) export class MatchesTodayComponent implements OnInit { … }
  42. Demo 26.06.2018 Angular Elements 43

  43. Angular Elements in V6 26.06.2018 Angular Elements 44 ▪ It

    is just the beginning ▪ Size is too big for shipping in non Angular projects ▪ Will be much better with Ivy (V7) ▪ Will be much easier with V7 ▪ Browser Support.
  44. Outlook V7 26.06.2018 Angular Elements 45 @Component({ selector: 'app-test', template:

    '...', customElement: true }) export class TestComponent { ... }
  45. 26.06.2018 Angular Elements 46 How to use it today in

    non Angular Projects?
  46. Combine bundle in a single file 26.06.2018 Angular Elements 47

    npm install concat --save-dev Install package concat npm install fs-extra --save-dev Install package fs-extra "build:elements": "ng build --prod --output- hashing none && node build-elements.js" Add script command
  47. build-elements.js 26.06.2018 Angular Elements 48 const fs = require('fs-extra'); const

    concat = require('concat'); (async function build() { const files = [ './dist/dwxComponent/runtime.js’, './dist/dwxComponent/scripts.js’, './dist/dwxComponent/polyfills.js’, './dist/dwxComponent/main.js’ ]; await fs.ensureDir('elements’); await concat(files, 'elements/world-cup.js'); console.info('Wold Cup Element created successfully!'); })();
  48. Demo 26.06.2018 Angular Elements 49

  49. 26.06.2018 Angular Elements 50 It is just the beginning. Stay

    tuned with Angular 7
  50. Ressources 26.06.2018 Angular Elements 51 ▪ github.com/gassmannT/WorldCupComponent ▪ thomasgassmann.net ▪

    swissangular.com ▪ m.trivadis.com/angular ▪ angular-academy.ch
  51. Thank you Thomas Gassmann @gassmannT thomasgassmann.net thomas.gassmann@trivadis.com 26.06.2018 Angular Elements

    52
  52. None