Click here to Skip to main content
15,746,534 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
I work on angular 7 project

I face issue I can't display option Name when click on auto complete textbox

so when click on auto complete text box it not display any thing and not show data related to option Name

and that actually my issue

so How to solve this issue

constructor(private http: HttpClient,private _dataService: DeliverySysService) {
    this._dataService.getExport().subscribe(data => { this.ExportOptions = data 

this display data  as below :

(5) [{…}, {…}, {…}, {…}, {…}]
0: {optionID: 1, optionName: "Export"}
1: {optionID: 2, optionName: "Export Normalized"}
2: {optionID: 3, optionName: "Export Normalized New"}
3: {optionID: 4, optionName: "Export Normalized Relation"}
4: {optionID: 5, optionName: "Export Nxp Comptitor"}

so when click on auto complete text box I expect to display

Export Normalized
Export Normalized New
Export Normalized Relation
Export Nxp Comptitor

What I have tried:

Now use ng -autocomplete tool so I do the following :

on Delivery System Component html component

<div #templ class="ng-autocomplete" style="width:300px; z-index: 5;">
        <ng-autocomplete #auto [data]="exportOptions" [initialValue]="" [searchKeyword]="keyword" [placeHolder]="placeholder"
          [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate" notFoundText="Not found"
          (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)'>
        <ng-template #itemTemplate let-item>
          <a [innerHTML]="item.Text"></a>
        <ng-template #notFoundTemplate let-notFound>
          <div [innerHTML]="notFound"></div>

on DeliverySystemComponent.ts component

export class DeliverySystemComponent implements OnInit {
    keyword = 'Text';
    public placeholder: string = 'Enter Name';
        public Down: string = ""; 
    public ID: number = 0;
    public SP: string = "";

onChangeSearch(val: string) {
    this.Down = "";
selectEvent(item) {
    this.Down = "";
    this.Down = item.Template;
    this.ID = item.optionID;
    this.SP = item.optionName;
    this.TOut = item.OutTemplate;

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900