// #docplaster
// #docregion
import { Component }       from '@angular/core';

import { SalesTaxService } from './sales-tax.service';
import { TaxRateService }  from './tax-rate.service';

// #docregion metadata
// #docregion providers
@Component({
// #enddocregion providers
  selector:    'sales-tax',
  template: `
    <h2>Sales Tax Calculator</h2>
    Amount: <input #amountBox (change)="0">

    <div *ngIf="amountBox.value">
    The sales tax is
     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
    </div>
  `,
// #docregion providers
  providers:   [SalesTaxService, TaxRateService]
})
// #enddocregion providers
// #enddocregion metadata
/*
// #docregion metadata, providers
export class SalesTaxComponent { ... }
// #enddocregion metadata, providers
*/
// #docregion class
export class SalesTaxComponent {
// #docregion ctor
  constructor(private salesTaxService: SalesTaxService) { }
// #enddocregion ctor

  getTax(value: string | number) {
    return this.salesTaxService.getVAT(value);
  }
}
// #enddocregion class