jeudi 1 juin 2017

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

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

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




Aucun commentaire:

Enregistrer un commentaire