angular_lit_component_integration_counter_quickstart.ts

1import { Component, Input, Output, EventEmitter } from '@angular/core';
2import { html } from 'lit-html';
3import { LitComponent } from 'ng-lit';
4
5@Component({
6  selector: 'my-app',
7  template: `
8    <my-counter [count]="count" (change)="onCountChange($event)"></my-counter>
9  `
10})
11export class AppComponent {
12  count = 0;
13
14  onCountChange(event: CustomEvent) {
15    this.count = event.detail;
16  }
17}
18
19@Component({
20  selector: 'my-counter',
21  template: ''
22})
23export class CounterComponent extends LitComponent {
24  @Input() count = 0;
25  @Output() change = new EventEmitter<number>();
26
27  render() {
28    return html`
29      <div>
30        <button @click="${() => this.decrement()}">-</button>
31        <span>${this.count}</span>
32        <button @click="${() => this.increment()}">+</button>
33      </div>
34    `;
35  }
36
37  decrement() {
38    this.change.emit(this.count - 1);
39  }
40
41  increment() {
42    this.change.emit(this.count + 1);
43  }
44}