Angular Elements, .NetDay Bern

Transcript

1. Angular Elements
   .NET Day Bern, 23.05.2019
   Thomas Gassmann @gassmannT
   22.05.2019 .NET Day Bern - Angular Elements
   1
   

   View Slide

2. Thomas Gassmann
   Principal Consultant,
   Trainer, Speaker
   thomasgassmann.ch
   @gassmannT
   22.05.2019 .NET Day Bern - Angular Elements
   2
   

   View Slide

3. Agenda
   22.05.2019 .NET Day Bern - Angular Elements
   3
   ▪ Intro Angular Elements
   ▪ Web Components
   ▪ Getting started with Angular Elements
   ▪ Outlook
   

   View Slide

4. Angular Elements
   22.05.2019 .NET Day Bern - Angular Elements
   4
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. 22.05.2019 .NET Day Bern - Angular Elements 9
   

   View Slide

10. 22.05.2019 .NET Day Bern - Angular Elements
    10
    Web Components
    

    View Slide

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
    

    View Slide

12. 22.05.2019 .NET Day Bern - Angular Elements
    12
    
    

    View Slide

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
    

    View Slide

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);
    

    View Slide

15. Reactions
    22.05.2019 .NET Day Bern - Angular Elements
    15
    class myElement extends HTMLElement {
    connectedCallback() {
    ...
    }
    disconnectedCallback() {
    ...
    }
    }
    

    View Slide

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
    }
    }
    }
    

    View Slide

17. 22.05.2019 .NET Day Bern - Angular Elements
    17
    
    

    View Slide

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);
    }
    }
    

    View Slide

19. 22.05.2019 .NET Day Bern - Angular Elements
    19
    let games = document.querySelector('world-cup-statistics');
    games.country = 'ger';
    

    View Slide

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
    }));
    }
    }
    

    View Slide

21. 22.05.2019 .NET Day Bern - Angular Elements
    21
    let games = document.querySelector('world-cup-statistics');
    games.addEventListener('country-change', event => { ... });
    

    View Slide

22. Custom Elements in Angular
    22.05.2019 .NET Day Bern - Angular Elements
    22
    [country]="'sui'"
    (countryChanged)="foobar($event)"
    >
    
    => Angular has been designed for this
    

    View Slide

23. Enter Angular Elements
    22.05.2019 .NET Day Bern - Angular Elements
    23
    Transforming
    Angular Component to
    Custom Element
    

    View Slide

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
    

    View Slide

25. A lot of framework exists
    22.05.2019 .NET Day Bern - Angular Elements
    25
    

    View Slide

26. Getting started
    22.05.2019 .NET Day Bern - Angular Elements
    26
    

    View Slide

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
    

    View Slide

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 -v ShadowDom Generate new component
    

    View Slide

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;
    constructor(private service: GameService) {}
    ngOnInit() {… }
    }
    

    View Slide

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);
    }
    }
    

    View Slide

31. Module
    22.05.2019 .NET Day Bern - Angular Elements
    31
    @NgModule({
    imports: [BrowserModule, HttpClientModule],
    declarations: [WorldCupStatisticsComponent],
    entryComponents: [WorldCupStatisticsComponent],
    bootstrap: […]
    })
    export class AppModule {
    …
    }
    

    View Slide

32. Module
    22.05.2019 .NET Day Bern - Angular Elements
    32
    @NgModule({
    imports: [BrowserModule, HttpClientModule],
    declarations: [WorldCupStatisticsComponent],
    entryComponents: [WorldCupStatisticsComponent],
    bootstrap: […]
    })
    export class AppModule {
    …
    }
    

    View Slide

33. 22.05.2019 .NET Day Bern - Angular Elements
    33
    
    

    View Slide

34. Polyfills
    22.05.2019 .NET Day Bern - Angular Elements
    34
    

    View Slide

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';
    

    View Slide

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);
    

    View Slide

37. Demo
    22.05.2019 .NET Day Bern - Angular Elements
    37
    

    View Slide

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;
    }
    

    View Slide

39. Dependency Injection
    22.05.2019 .NET Day Bern - Angular Elements
    39
    Plattform Injector
    (Renderer)
    Module Injector
    (Services)
    Component Injector
    (ElementRef)
    

    View Slide

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)
    

    View Slide

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);
    }
    }
    

    View Slide

42. 22.05.2019 .NET Day Bern - Angular Elements
    42
    Dependency Injection works!
    

    View Slide

43. Content Projection
    22.05.2019 .NET Day Bern - Angular Elements
    43
    
    Hallo Welt
    
    @Component({
    selector: 'app-test',
    template: `
    
    `
    })
    export class TestComponent {
    }
    

    View Slide

44. Shadow DOM
    22.05.2019 .NET Day Bern - Angular Elements
    44
    @Component({
    …
    encapsulation: ViewEncapsulation.ShadowDom
    })
    export class WorldCupStatisticsComponent implements
    OnInit {
    …
    }
    

    View Slide

45. Demo
    22.05.2019 .NET Day Bern - Angular Elements
    45
    

    View Slide

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.
    

    View Slide

47. Outlook
    22.05.2019 .NET Day Bern - Angular Elements
    47
    @Component({
    selector: 'app-test',
    template: '...',
    customElement: true
    })
    export class TestComponent {
    ...
    }
    

    View Slide

48. 22.05.2019 .NET Day Bern - Angular Elements
    48
    How to use it today in non Angular Projects?
    

    View Slide

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
    

    View Slide

50. Output
    22.05.2019 .NET Day Bern - Angular Elements
    50
    

    View Slide

51. Demo
    22.05.2019 .NET Day Bern - Angular Elements
    51
    

    View Slide

52. 22.05.2019 .NET Day Bern - Angular Elements
    52
    It is just the beginning. Stay tuned
    with Angular 8+
    

    View Slide

53. A Special Thanks To
    22.05.2019 .NET Day Bern - Angular Elements
    53
    Manfred Steyer
    https://www.softwarearchitekt.at/
    

    View Slide

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
    

    View Slide

55. Thank you
    Thomas Gassmann
    @gassmannT
    thomasgassmann.net
    thomas.gassmann@trivadis.com
    22.05.2019 .NET Day Bern - Angular Elements
    55
    

    View Slide

56. View Slide