To create a UI component, you need only create two files, one for each of the component parts. Let's create a simple "Hello" component. To do that we'll need a hello.js for our view-model and hello.html for our view. Here's the source for each :
hello.js : ES Next
export class Hello {
constructor() {
this.firstName = 'John';
this.lastName = 'Doe';
}
sayHello() {
alert(`Hello ${this.firstName} ${this.lastName}. Nice to meet you.`);
}
}
hello.ts : TypeScript
export class Hello {
firstName: string = 'John';
lastName: string = 'Doe';
sayHello() {
alert(`Hello ${this.firstName} ${this.lastName}. Nice to meet you.`);
}
}
hello.html
<template>
<input value.bind="firstName">
<input value.bind="lastName">
<button click.trigger="sayHello()">Say Hello</button>
</template>
