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!

ngModel should have empInfo[selectedIndex][PTOCarry + timeVar], can you share you empInfo object? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 1, 2017 at 14:56
How would I rewrite that as a 2D array? and updating original post. — rcarcia02
– rcarcia02, Commented Jun 1, 2017 at 15:01

Community · Accepted Answer · 2020-01-21 14:40:20Z

18

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.

edited Jan 21, 2020 at 14:40

CommunityBot

11 silver badge

answered Jun 1, 2017 at 16:17

842Mono

1,9882 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sajal rajabhoj Over a year ago

hi @Mina, thanks for answer but I am facing weird issue, as we have same variable for each checkbox in ngModel, when I click on one checkbox all check boxes are getting automatically checked, can you please suggest me way out? thanks!

842Mono Over a year ago

This is called 2 way binding. You say that all the check-boxes are have the same ngModel. This means that when any change happens to that ngModel it will reflect on all the checkboxes. You just need to make a separate ngModel with a different name for each checkbox. @sajabhoj

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related