File
Metadata
selector |
kiewit-autocomplete |
styleUrls |
kiewit-autocomplete.component.scss |
templateUrl |
./kiewit-autocomplete.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Outputs
onSelectValue
|
$event type: EventEmitter<any>
|
|
Methods
selectValueEvent
|
selectValueEvent(newVal: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
newVal |
|
|
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'kiewit-autocomplete',
templateUrl: './kiewit-autocomplete.component.html',
styleUrls: ['./kiewit-autocomplete.component.scss']
})
export class KiewitAutoCompleteComponent {
model1: string;
@Input()
dataSource: any[];
@Output()
onSelectValue: EventEmitter<any> = new EventEmitter();
selectValueEvent(newVal) {
this.onSelectValue.emit(newVal);
}
}
<div ng2-auto-complete
[source]="dataSource"
(valueChanged)="selectValueEvent($event)">
<input placeholder="" [ngModel]="model1" />
</div>
Implementation
In Type Script File
nimport { Component, Input, Output, EventEmitter } from '@angular/core';
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
@Component({
selector: 'kiewit-autocomplete',
templateUrl: './kiewit-autocomplete.component.html',
styleUrls: ['./kiewit-autocomplete.component.scss']
})
export class KiewitAutoCompleteComponent implements OnInit {
public UsersDataConfig: any[];
public listformatter: any = 'Name';
public displaypropertyname: any = 'Name'
ngOnInit(): void {
//Get call to Service to load Auto Complete TextBox
this.Service.getUsers().subscribe(data => {
if (data.length > 0) {
this.UsersDataConfig = data;
}
});
}
getSelectedUser(value) {
// logic based on selection text
}
}
In HTML File
<kiewit-autocomplete [dataSource]="UsersDataConfig" [listformatter]="listformatter" [displaypropertyname]="displaypropertyname" (kcsValueChange)="getSelectedUser($event)" >
</kiewit-autocomplete >
Legend
Html element with directive