ANGULAR ELEMENT

@Nicoss54

Nicolas Frizzarin

  • At Sfeir since 2 years
     
  • Front developer
     
  • Passionnate about Web new technologies particularly Angular

Let's go !!!

"Angular is deal for building complete application, and our tooling, documentation and infrastructure are primarily aimed at this

case."

 

Rob Wormal, Angular Team

"... but it's quite challenging to use in scenarios that don't fit that specific Single Page Application Model"

 

Rob Wormal, Angular Team

Multiples Uses Cases

  • Reusable - reuse component across different teams
     
  • CMS Pages - include standalone application in web sites managed by CMS
     
  • Widgets - include our component in another framework like react or Vue js

WEB COMPONENTS

Web Components

  • Templates -- All HTML 5 tags
     
  • Shadow Dom -- DOM and Style encapsulation
     
  • Custom Elements -- Expend web vocabulary

Custom elements share the same API as DOM Native Objects

<loading-spinner></loading-spinner>

Custom Elements

  • Attributs
     
  • Properties
     
  • Custom Events
     
  • Reactions

Defining Custom Elements

class loading extends HTMLElement {
    ...
    constructor(){}
    ...
}
customElements.define('loading-spinner', loading)

Custom Elements are considered HTMLUnknowElement until updated

Reactions

class loading extends HTMLElement {
    ...
    constructor(){}
    
    connectedCallback(){
        ...
    }
    disconnectedCallback(){
        ...
    }
}

Lyfecycle of our web components

Attributs

class loading extends HTMLElement {
    ...
    constructor(){}

    static get observedAttributes() {
        return ['mode'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'mode') {
          ...
        }
    }
}
<loading-spinner mode="single-mode"></loading-spinner>

Properties

class LoadingSpinner extends HTMLElement {
  ...
  get mode() {
    return this.getAttribute('mode');
  }

  set mode(val) {
    this.setAttribute('mode', val);
  }
}
<loading-spinner></loading-spinner>
let spinner = document.querySelector('loading-spinner');
spinner['mode'] = 'single-mode

Custom Events

 

class LoadingSpinner extends HTMLElement {
  ...
  emitModeChange() {
    this.dispatchEvent(new CustomEvent('mode-change', {
      detail: this.mode
    }));
  }
}
<loading-spinner></loading-spinner>
let spinner = document.querySelector('loading-spinner');
spinner.addEventListener('mode-change', event => { ... });

Custom Elements

 

Custom Element inside Angular

 

<loading-spinner
  [mode]="mode"
  [attr.mode]="mode"
  (modeChange)="doSomething($event)"
  [value]="progress">
</loading-spinner>

Angular is based on this model modèle !!! 

Why not Polymer

 

Transposition CE -> NG

 

Finally Custom Elements looks like ... Composants Angular

  • Attributes
     
  • Properties
     
  • CustomEvent
     
  • Reactions
  • @HostBinding()
     
  • @Input()
     
  • @Output()
     
  • Angular Lifecycle

Angular Elements

 

  • Easy Writting "to the component"
     
  • Requires no additional knowledge
     
  • Extremely Fast
     
  • Angular Lovers <3

Angular Elements

 

@Component({
  selector: 'hello-world',
  template: `
    <h1>Hello {{name}}</h1>
    <input type="text" [(ngModel)]="name">
    <button (click)="changeName()">Save</button>
  `
})
class HelloWorld {
  @Input() name: string;
  @Output() nameChange = new EventEmitter();
  changeName() {
    this.nameChange.emit(this.name);
  }
}

Angular Elements

 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloWorld } from './hello-world';

@NgModule({
  imports: [BrowserModule, ...],
  declarations: [HelloWorld],
  entryComponents: [HelloWorld]
})
export class HelloWorldModule {
  ngDoBootstrap() {} // required in bootstrap module
}

Angular Elements

 

import { HelloWorldModule } from './app';
import { HelloWorld } from './hello-world';
import { createCustomElement } from '@angular/elements';

platformBrowserDynamic()
  .bootstrapModule(HelloWorldModule)
  .then(({injector}) => {
    const HelloWorldElement = createCustomElement(HelloWorld, {
      injector
    });
    customElements.define('hello-world', HelloWorldElement);
  });

Angular Elements

 

import { createCustomElement } from '@angular/elements';

@NgModule({...})
export class HelloWorldModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    customElements.define(
      'hello-world',
      createCustomElement(HelloWorld, { injector: this.injector })
    );
  }
}
import { HelloWorldModule } from './app';
platformBrowserDynamic().bootstrapModule(HelloWorldModule);

Angular Elements

 

Time to Demo

 

Time to Resume

 

Platform Injector

Renderer, Sanitizer

Module Injector

Module-Wide Services

Component Injector

Element Ref, ChangeDetectorRef

Time to Resume

 

Platform Injector

Renderer, Sanitizer

Module Injector

Module-Wide Services

Element Injector

Element Ref, ChangeDetectorRef

Element Injector

Element Ref, ChangeDetectorRef

Et Maintenant

 

Next Step

 

Vous !!!!!

Made with Slides.com