Hi Oasis,
We have created a sample for
adding the custom values to the popup and shared the sample link below for
reference. In the below code snippet, when the custom value is entered, by using a
button click even the custom value is added to the popup.
[app.component.html]
|
<ejs-autocomplete id='games' #sample [dataSource]='sportsData' [(value)]='value'
[placeholder]='waterMark' [fields]='fields' (change)='onChange($event)'>
<ng-template #noRecordsTemplate>
<div id="nodata"> No matched item, do you want to add it as new item in list?</div> <button (click)="addNewItem($event)" class="e-control e-btn">Add New Item</button>
</ng-template></ejs-autocomplete>
</div>
|
[app.component.ts]
|
public addNewItem = () => {
let customValue: string = (
this.AutoCompleteObj.element.getElementsByClassName(
'e-input'
)[0] as HTMLInputElement
).value;
let newItem: { [key: string]: Object } = {
Id: customValue,
Game: customValue,
};
(this.AutoCompleteObj.dataSource as Object[]).push(newItem);
this.AutoCompleteObj.hidePopup();
this.AutoCompleteObj.addItem(newItem);
this.AutoCompleteObj.value = customValue;
};
|
Sample: https://stackblitz.com/edit/angular-cbpp7q?file=app.component.html,app.component.ts
Kindly try the above sample
and let us know if this meets your requirement.
Regards,
Udhaya Kumar D
