File

src/lib/kiewit-numerictextbox/kiewit-numerictextbox.component.ts

Metadata

selector kiewit-numerictextbox
styleUrls kiewit-numerictextbox.component.scss
templateUrl ./kiewit-numerictextbox.component.html

Index

Methods
Inputs
Outputs

Inputs

config

Type: IKiewitNumericTextbox

kcsNgModel

Type: string

Outputs

kcsNgModelChange $event type: EventEmitter
kcsValueChange $event type: EventEmitter

Methods

onNgModelChange
onNgModelChange(newValue: )
Parameters :
Name Type Optional Description
newValue
Returns : void
onValueChanged
onValueChanged(value: any)
Parameters :
Name Type Optional Description
value any
Returns : void
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { IKiewitNumericTextbox } from './kiewit-numerictextbox.interface';

@Component({
  selector: 'kiewit-numerictextbox',
  templateUrl: './kiewit-numerictextbox.component.html',
  styleUrls: ['./kiewit-numerictextbox.component.scss']
})
export class KiewitNumericTextboxComponent {

    @Input() config: IKiewitNumericTextbox = {
        spinners: true,
        decimals: 2,
        format: "a0",
    };

  @Input() kcsNgModel: string;
  @Output() kcsNgModelChange = new EventEmitter();
  @Output() kcsValueChange = new EventEmitter();

  onValueChanged(value:any) {
      this.kcsValueChange.emit(value);
  }

  onNgModelChange(newValue) {
      this.kcsNgModel = newValue;
      this.kcsNgModelChange.emit(newValue);
  }

}
<kendo-numerictextbox class="text-box" 
                            [spinners]="config.spinners"
                            [decimals]="config.decimals"
                            [format]="config.format"
                            [value]="config.value"
                            [ngModel]="kcsNgModel" 
                            (ngModelChange)="onNgModelChange($event)"
                            ></kendo-numerictextbox>
Implementation
In Type Script File

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { IKiewitNumericTextbox } from './kiewit-numerictextbox.interface';
@Component({
  selector: 'kiewit-numerictextbox',
  templateUrl: './kiewit-numerictextbox.component.html',
  styleUrls: ['./kiewit-numerictextbox.component.scss']
})
export class KiewitNumericTextboxComponent {

  kiewitNumericTextboxConfig = {
    spinners: false,
    decimals: 4,
    format: '#.## \\%',
    value: 20,
    maxlength: 5
  };
  kiewitNumericTextboxValue = 25;
}

           
In HTML File

          <kiewit-numerictextbox [config]="kiewitNumericTextboxConfig"
                       [(kcsNgModel)]="kiewitNumericTextboxValue" width="10px">
          </kiewit-numerictextbox>
           
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""