@Nicoss54
"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
<loading-spinner></loading-spinner>
class loading extends HTMLElement {
...
constructor(){}
...
}
customElements.define('loading-spinner', loading)
Custom Elements are considered HTMLUnknowElement until updated
class loading extends HTMLElement {
...
constructor(){}
connectedCallback(){
...
}
disconnectedCallback(){
...
}
}
Lyfecycle of our web components
class loading extends HTMLElement {
...
constructor(){}
static get observedAttributes() {
return ['mode'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'mode') {
...
}
}
}
<loading-spinner mode="single-mode"></loading-spinner>
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
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 => { ... });
<loading-spinner
[mode]="mode"
[attr.mode]="mode"
(modeChange)="doSomething($event)"
[value]="progress">
</loading-spinner>
Angular is based on this model modèle !!!
Finally Custom Elements looks like ... Composants Angular
@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);
}
}
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
}
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);
});
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);
Renderer, Sanitizer
Module-Wide Services
Element Ref, ChangeDetectorRef
Renderer, Sanitizer
Module-Wide Services
Element Ref, ChangeDetectorRef
Element Ref, ChangeDetectorRef