davidmarkclements
commented
7 years ago So, each of the examples in the readme shows the full path from element creation to ultimate attachment to the DOM. In some cases, we need multiple files - the Elm example for instance.
In this case, as I understand it - we need 5 files
index.html
<body>
<app></app>
</body>main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
bootstrap: [ AppComponent ]
})
export class AppModule { }app.component
import {Component} from '@angular/core';
@Component({
selector: 'app',
providers: [],
template: `
<custom-button [attr.title]="title"></custom-button>
`
})
export class AppComponent {}button.js
var toCustomElementV1 = require('nanocomponent-adapters/custom-element-v1')
var component = require('nanocomponent')
var html = require('bel')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
// register as custom element
// The second parameter corresponds to a string Array containing
// the names of the attributes you'd like to observe and react to changes.
var CustomButton = toCustomElement(Button, ['title']);
customElements.define('custom-button', CustomButton);To add a new component though, you would only have to add one new file, and alter the app.component template
alterx
yoshuawuyts
toddself
bcomnes
I added a couple of things here:
The v1 API adapter is intentionally written using the new ES2015 class syntax since it won't work with the old ES5 way. I shouldn't affect users since "every browser that implements custom elements also implements class syntax." Also, see this comment.