import { Component , Event , EventEmitter , h , State } from "@stencil/core" ; @ Component ( { tag : 'ui-todo-input' , styleUrl : 'ui-todo-input.scss' } ) export class UiTodoInput { @ State ( ) title : string ; @ Event ( ) newTodoTitle : EventEmitter < string > ; constructor ( ) { } private handleAddClick ( clickEvent ) { clickEvent . preventDefault ( ) ; this . newTodoTitle . emit ( this . title ) ; this . title = '' ; } render ( ) { return ( < form class = "ui-todo-input" > { } < input class = "input" placeholder = "Enter new Todo Title" value = { this . title } onInput = { ( e ) => { this . title = e . target . value ; } } /> < button type = "submit" class = "add-button" onClick = { this . handleAddClick . bind ( this ) } > ADD < /button> < /form>); } }