src/lib/kiewit-dropdown/kiewit-dropdown.component.ts
selector | kiewit-dropdown |
styleUrls | kiewit-dropdown.component.scss |
templateUrl | ./kiewit-dropdown.component.html |
Methods |
Inputs |
Outputs |
config
|
Type: |
kcsNgModel
|
Type: |
kcsNgModelChange
|
$event type: EventEmitter
|
kcsValueChange
|
$event type: EventEmitter
|
onNgModelChange | ||||||||
onNgModelChange(newValue: )
|
||||||||
Parameters :
Returns :
void
|
onValueChanged | ||||||||
onValueChanged(value: any)
|
||||||||
Parameters :
Returns :
void
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { IKiewitDropdown } from './kiewit-dropdown.interface';
@Component({
selector: 'kiewit-dropdown',
templateUrl: './kiewit-dropdown.component.html',
styleUrls: ['./kiewit-dropdown.component.scss']
})
export class KiewitDropdownComponent {
@Input() config: IKiewitDropdown = {
data: [],
textField: "",
valueField: "",
};
@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-dropdownlist class="kiewitdropdown"
[data]="config.data"
[textField]="config.textField"
[valueField]="config.valueField"
[defaultItem]="config.defaultItem"
[disabled]="config.disabled"
(valueChange)="onValueChanged($event)"
[ngModel]="kcsNgModel"
(ngModelChange)="onNgModelChange($event)">
import { Component } from '@angular/core';
@Component({
selector: 'kiewit-dropdown',
templateUrl: './kiewit-dropdown.component.html',
styleUrls: ['./kiewit-dropdown.component.scss']
})
export class KiewitDropdownComponent {
public selectedUser: any = null;
this.ddlUserConfig.data = [{
"USER_ID": 1,
"USER_NAME": "KiewitUser"
},
{
"USER_ID": 2,
"USER_NAME": "KiewitUser1"
},
{
"USER_ID": 3,
"USER_NAME": "KiewitUser2"
}];
}
In HTML File
<kiewit-dropdown id="ddluser"
[config]="ddlUserConfig"
[(kcsNgModel)]="selectedUser">
</kiewit-dropdown>