title: Angular 4 - How can I get my checkbox to change the value of a variable?
body: <p>I'm pretty new to Angular 4 and I want to change the value of my variable from "hours" to " days" and also divide the value that's given by my ngModel by 8. How exactly would I go about doing that?</p>
  
  <p>Here's an excerpt from my summary.component.html: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="onoffswitch"&gt;
    &lt;input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked&gt;
    &lt;label class="onoffswitch-label" for="myonoffswitch"&gt;
      &lt;span class="onoffswitch-inner"&gt;&lt;/span&gt;
      &lt;span class="onoffswitch-switch"&gt;&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="panel-body"&gt;
      &lt;form class="form-horizontal" role="form" style="overflow-x:auto;"&gt;
        &lt;fieldset&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group" *ngIf="empInfo &amp;&amp; empInfo.length &gt; selectedIndex"&gt;
              &lt;label class="col-xs-2" style="font-weight: bold;"&gt; &amp;#43; &lt;/label&gt;
              &lt;label class="col-xs-4"&gt; Carryover &lt;/label&gt;
              &lt;div class="col-xs-6"&gt;
                &lt;input class='form-control' type="text" id="ptoCarry" [(ngModel)]="empInfo[selectedIndex].PTOCarry + timeVar" name="ptoCarry"/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and then here's my summary.component.ts: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { EmpInfoService } from './emp-info.service';
  
  import { EmpInfo } from './emp-info'; 
  
  @Component({
      selector: 'pto-summary',
      templateUrl: `./summary.component.html`,
      styleUrls: ['./summary.component.css']
  })
  
  export class SummaryComponent implements OnInit{
      empInfo: EmpInfo[];
      selectedIndex = 4;
      timeVar = " hours";
  
      constructor(private empInfoService: EmpInfoService) { }
  
      getEmpInfo(): void {
          this.empInfoService.getEmpInfos().then(
              empInfo =&gt; this.empInfo = empInfo
          );
      }
  
      ngOnInit(): void {
          this.getEmpInfo();
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my empInfo object:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class EmpInfo {
      EmpKey: number;
      EmpID: string;
      Firstname: string;
      LastName: string;
      EmpStat: string;
      StartDate: Date;
      AdjustedStart: Date;
      Anniversary: number;
      PTOYear: number;
      STDLTD: number;
      Uncharged: number;
      ETOEarned: number;
      ETORequests: number;
      ETORemaining: number;
      PTOBase: number;
      PTOCarry: number;
      PTOBorrowed: number;
      PTOBalance: number;
      PTORequests: number;
      PTORemaining: number;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is greatly appreciated and welcomed! Thanks in advance!</p>