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

Angular Elements

Angular Elements

Slides from my talk about Angular Elements our first Swiss Angular Meetup
Demo can be found at https://github.com/gassmannT/WorldCupComponent

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

September 13, 2018
Tweet

More Decks by Thomas Gassmann

Other Decks in Programming

Transcript

  1. ngComponent als wiederverwendbare Komponente für beliebige JavaScript Apps Swiss Angular

    Meetup 13.09.2018 Thomas Gassmann @gassmannT
  2. Thomas Gassmann Senior Consultant, Trainer, Speaker thomasgassmann.ch @gassmannT

  3. Agenda 13.09.2018 Swiss Angular Meetup - Angular Elements 3 ▪

    Intro Angular Elements ▪ Web Components ▪ Getting started with Angular Elements ▪ Outlook v7
  4. Angular Elements 13.09.2018 Swiss Angular Meetup - Angular Elements 4

  5. 13.09.2018 Swiss Angular Meetup - 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 13.09.2018 Swiss Angular Meetup - Angular Elements 6 Dependency

    Injection Decorators Zones Compile Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
  7. 13.09.2018 Swiss Angular Meetup - 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 13.09.2018 Swiss Angular Meetup - Angular Elements 8

    ▪ Enhancing existing HTML Pages ▪ Content Management Systems ▪ Use components in other environments or frameworks ▪ Microfrontends ▪ Reuse components across teams
  9. 13.09.2018 Swiss Angular Meetup - Angular Elements 9

  10. 13.09.2018 Swiss Angular Meetup - Angular Elements 10 Web Components

  11. Web Components 13.09.2018 Swiss Angular Meetup - Angular Elements 11

    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. 13.09.2018 Swiss Angular Meetup - Angular Elements 12 <app-matches-today></app-matches-today>

  13. Custom Elements 13.09.2018 Swiss Angular Meetup - 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 13.09.2018 Swiss Angular Meetup

    - Angular Elements 14 class myElement extends HTMLElement { … } customElements.define('my-element', myElement);
  15. Reactions 13.09.2018 Swiss Angular Meetup - Angular Elements 15 class

    myElement extends HTMLElement { connectedCallback() { ... } disconnectedCallback() { ... } }
  16. Attributes 13.09.2018 Swiss Angular Meetup - Angular Elements 16 class

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

  18. Properties 13.09.2018 Swiss Angular Meetup - Angular Elements 18 class

    myElement extends HTMLElement { get country() { return this.getAttribute('country'); } set country(val) { this.setAttribute('country', val); } }
  19. 13.09.2018 Swiss Angular Meetup - Angular Elements 19 let matches

    = document.querySelector('app-matches-by-country’); matches.country = 'ger';
  20. Custom Events 13.09.2018 Swiss Angular Meetup - Angular Elements 20

    class myElement extends HTMLElement { emitCountryChange() { this.dispatchEvent( new CustomEvent('country-change', { detail: this.country })); } }
  21. 13.09.2018 Swiss Angular Meetup - Angular Elements 21 let matches

    = document.querySelector('app-matches-by-country’); matches.addEventListener('country-change', event => { ... });
  22. Custom Elements in Angular 13.09.2018 Swiss Angular Meetup - Angular

    Elements 22 <app-matches-by-country [country]="sui" (countryChanged)="foobar($event)" > </app-matches-by-country> => Angular has been designed for this
  23. Enter Angular Elements 13.09.2018 Swiss Angular Meetup - Angular Elements

    23 Provides a bridge from angular concepts to web components. ▪ @HostBinding() => Attributes ▪ @Input() => Properties ▪ @Output() => CustomEvents ▪ Lifecycle Hooks => Reactions
  24. A lot of framework exists 13.09.2018 Swiss Angular Meetup -

    Angular Elements 24
  25. Getting started 13.09.2018 Swiss Angular Meetup - Angular Elements 25

  26. Platform 13.09.2018 Swiss Angular Meetup - Angular Elements 26 Dependency

    Injection Decorators Zones Compile Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
  27. First Steps 13.09.2018 Swiss Angular Meetup - Angular Elements 27

    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 13.09.2018 Swiss Angular Meetup - Angular Elements 28 @Component({

    selector: 'app-matches-today', templateUrl: 'matches-today.component.html’, styleUrls: ['matches-today.component.css’], encapsulation: ViewEncapsulation.ShadowDom }) export class MatchesTodayComponent implements OnInit { public matches$: Observable<Match[]>; constructor(private matchService: MatchService) {} ngOnInit() { this.matches$ = this.matchService.getTodayMatches(); } }
  29. Module 13.09.2018 Swiss Angular Meetup - Angular Elements 29 @NgModule({

    imports: [BrowserModule, HttpClientModule], declarations: [AppComponent, MatchesTodayComponent], entryComponents: [MatchesTodayComponent], providers: [] }) export class AppModule { … }
  30. Module 13.09.2018 Swiss Angular Meetup - Angular Elements 30 export

    class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { const el1 = createCustomElement( MatchesTodayComponent, { injector: this.injector }); customElements.define('app-matches-today', el1); } }
  31. 13.09.2018 Swiss Angular Meetup - Angular Elements 31 <app-matches-today></app-matches-today>

  32. Use with Javascript 13.09.2018 Swiss Angular Meetup - Angular Elements

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

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

    - Angular Elements 34 export class TestComponent implements OnInit { constructor(el: ElementRef) { el.nativeElement // <- Angular Element } @HostListener('click’) onHostClick($event) { ... } @HostBinding('attr.selected') isActive: boolean; }
  35. Dependency Injection 13.09.2018 Swiss Angular Meetup - Angular Elements 35

    Plattform Injector (Renderer) Module Injector (Services) Component Injector (ElementRef)
  36. Dependency Injection in Angular Elements 13.09.2018 Swiss Angular Meetup -

    Angular Elements 36 Plattform Injector (Renderer) Module Injector (Services) Element Injector (ElementRef) Element Injector (ElementRef)
  37. Module 13.09.2018 Swiss Angular Meetup - Angular Elements 37 export

    class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { const el1 = createCustomElement( MatchesTodayComponent, { injector: this.injector }); customElements.define('app-matches-today', el1); } }
  38. 13.09.2018 Swiss Angular Meetup - Angular Elements 38 Dependency Injection

    works!
  39. Demo 13.09.2018 Swiss Angular Meetup - Angular Elements 39

  40. Content Projection 13.09.2018 Swiss Angular Meetup - Angular Elements 40

    <app-test> <span>Hallo Angular Meetup</span> </app-test> @Component({ selector: 'app-test’, template: ` <ng-content></ng-content> ` }) export class TestComponent { }
  41. Shadow DOM 13.09.2018 Swiss Angular Meetup - Angular Elements 41

    @Component({ … encapsulation: ViewEncapsulation.ShadowDom }) export class MatchesTodayComponent implements OnInit { … }
  42. Demo 13.09.2018 Swiss Angular Meetup - Angular Elements 42

  43. Angular Elements in V6 13.09.2018 Swiss Angular Meetup - Angular

    Elements 43 ▪ 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 13.09.2018 Swiss Angular Meetup - Angular Elements 44

    @Component({ selector: 'app-test', template: '...', customElement: true }) export class TestComponent { ... }
  45. 13.09.2018 Swiss Angular Meetup - Angular Elements 45 How to

    use it today in non Angular Projects?
  46. Combine bundle in a single file 13.09.2018 Swiss Angular Meetup

    - Angular Elements 46 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 13.09.2018 Swiss Angular Meetup - Angular Elements 47 const

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

  49. 13.09.2018 Swiss Angular Meetup - Angular Elements 49 It is

    just the beginning. Stay tuned with Angular 7
  50. Ressources 13.09.2018 Swiss Angular Meetup - Angular Elements 50 ▪

    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 13.09.2018 Swiss Angular

    Meetup - Angular Elements 51
  52. None