Skip to content

Instantly share code, notes, and snippets.

@actarian
Created December 16, 2019 15:26
Show Gist options
  • Select an option

  • Save actarian/608ddac454a8b4bbb1413d6da0ee0953 to your computer and use it in GitHub Desktop.

Select an option

Save actarian/608ddac454a8b4bbb1413d6da0ee0953 to your computer and use it in GitHub Desktop.
RxComp - TodoItemComponent
export default class TodoItemComponent extends Component {
onChanges(changes) {
this.color = color(changes.item.id);
}
onToggle($event) {
this.toggle.next($event);
}
onRemove($event) {
this.remove.next($event);
}
}
TodoItemComponent.meta = {
selector: '[todo-item-component]',
inputs: ['item'],
outputs: ['toggle', 'remove'],
// hosts: { host: HostFactory },
template: /* html */ `
<button type="button" class="btn--toggle" (click)="onToggle(item)">
<div class="date" [innerHTML]="item.date | date : 'en-US' : { month: 'short', day: '2-digit', year: 'numeric' }"></div>
<div class="title" [innerHTML]="item.name"></div>
</button>
<button type="button" class="btn--remove" (click)="onRemove(item)">
<i class="icon--remove"></i>
</button>
`,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment