簡易計數器範例

app.component.html

<app-counter-button [step]="-2" (changed)="change($event)"></app-counter-button>
{{ counter }}
<app-counter-button [step]="5" (changed)="change($event)"></app-counter-button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  counter = 0;

  change(v) {
    this.counter += v;
    // this.counter = this.counter + v;
  }
}

counter-button.component.html

<!-- counter-button/counter-button.component.html -->

<button (click)="count()">{{ value }}</button>

counter-button.component.ts

/* counter-button/counter-button.component.ts */

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-counter-button',
  templateUrl: './counter-button.component.html',
  styleUrls: ['./counter-button.component.css']
})
export class CounterButtonComponent implements OnInit {
  @Input('step') value = 1;

  @Output('changed') valueChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  count() {
    this.valueChange.emit(this.value);
  }

}