File

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

Metadata

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

Index

Methods
Inputs
Outputs

Inputs

config

Type: IKiewitDropdown

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 { 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)">
        
Implementation
In Type Script File

                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>
           
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""