Angular 4 - How can I get my checkbox to change the value of a variable?

Question

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?

Here's an excerpt from my summary.component.html:

<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>

<div class="panel-body">
    <form class="form-horizontal" role="form" style="overflow-x:auto;">
      <fieldset>
        <div class="col-xs-6">
          <div class="form-group" *ngIf="empInfo && empInfo.length > selectedIndex">
            <label class="col-xs-2" style="font-weight: bold;"> &#43; </label>
            <label class="col-xs-4"> Carryover </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoCarry" [(ngModel)]="empInfo[selectedIndex].PTOCarry + timeVar" name="ptoCarry"/>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
</div>

and then here's my summary.component.ts:

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 => this.empInfo = empInfo
        );
    }

    ngOnInit(): void {
        this.getEmpInfo();
    }
}

Here's my empInfo object:

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;
}

Any help is greatly appreciated and welcomed! Thanks in advance!

Answer 1

Just bind your checkbox to a (change) event and make it call a function, and within the function you can change the value of "timeVar" and divide your other variable by 8.

Also you should introduce a new variable to your summary.component.ts to keep track of the state of the checkbox.

In your .html:

<input [(ngModel)]="checkboxValue" (change)="newFunction()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

add checkboxValue:boolean; and newFunction() to your summary.component.ts

I don't exactly understand what you want to do but you can code any logic you want in that function accordingly. It would be something like this.

export class SummaryComponent implements OnInit
{
    empInfo: EmpInfo[];
    selectedIndex = 4;
    timeVar = " hours";
    checkboxValue:boolean;

    newFunction()
    {
      if(!checkboxValue)
      {
        this.timeVar = " days";

        this.empInfo[selectedIndex].PTOCarry = this.empInfo[selectedIndex].PTOCarry / 8;
      }
      else
      {
        this.timeVar = " hours";
        //actually this else part shouldn't be needed
      }
    }

    //the rest...

be careful about the precision though. It wouldn't matter much if you know your values won't introduce issues. Otherwise you should only multiply or divide when the user submits, not when checking and unchecking the checkbox. ...to do this just take the (change)="newFunction()" part and add it to the text input instead of the checkbox.

edit: If you'll move it to the text input you should change the (change) event to a (submit) instead, like this: (submit)="newFunction()". Otherwise the form will submit on every character input.

If you want more help please provide more information. I hope this works.