Angularコンポーネントの継承 - 3.継承してカスタマイズ

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.2?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app');
</script>
</head>

<body>
<my-app></my-app>
</body>
</html>

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

@Component({
  selector: 'my-app',
  template: `
    <h2>InputNumber</h2>
    <input-number [(value)]="value1"></input-number>
    <h2>InputCurrency</h2>
    <input-currency [(value)]="value1"></input-currency>
    <h2>Input</h2>
    <input [(ngModel)]="value1">
  `
})
export class AppComponent {
  value1: number;
  constructor() {
    this.value1 = 1;
  }
}

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

@Component({
  selector: 'input-number',
  template: `
    <div class="value">{{value}}</div>
    <button (click)="decrement()">-</button>
    <button (click)="increment()">+</button>
  `,
  styles: [`
    .value {
      width: 100px;
      float: left;
      border: thin solid;
      padding: 2px 4px;
      text-align: right;
    }
  `]
})
export class InputNumberComponent {
  _value: number;
  constructor() {
    this._value = 0;
  }
  @Input() get value(): number {
    return this._value;
  }
  @Output() valueChange = new EventEmitter();
  set value(v: number) {
    this._value = v;
    this.valueChange.emit(this._value);
  }
  increment(): void {
    this.value++;
  }
  decrement(): void {
    this.value--;
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component';
import { InputNumberComponent }  from './input-number.component';
import { InputCurrencyComponent }  from './input-currency.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, InputNumberComponent, InputCurrencyComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { InputNumberComponent }  from './input-number.component';

@Component({
  selector: 'input-currency',
  template: `
    <div class="value">¥{{value}}</div>
    <button (click)="decrement()">-</button>
    <button (click)="increment()">+</button>
  `,
  styles: [`
    .value {
      width: 100px;
      float: left;
      border: thin solid;
      padding: 2px 4px;
      text-align: right;
    }
  `]
})
export class InputCurrencyComponent extends InputNumberComponent {
  decrement(): void {
    this.value--;
    if (this.value < 0) this.value = 0;
  }
}