How to set defualt value for primeng autocomplete <p-autocomplete>

Question

I tried below but didn't worked.

Added below to <p-autocomplete>

[ngModelOptions]="{standalone: true}" and [(ngModel)]="sampleModelData"

and in .ts file added

this.sampleModelData='ramesh';

even I tried setting as below in .ts file but this too didn't work. (<HTMLInputElement>document.getElementById('sampleModelData')).value='ramesh123';

How to resolve issue

Answer 1

you need to get a reference to the autocomplete component that you can access to the input native element

  @ViewChild('autoItems', { static: true }) public autoItems: AutoComplete; // 👈

  setAutoValue() {

    this.selectedValue = {label:'Apple' , value:'apple'}; 
    this.autoItems.inputEL.nativeElement.value = this.selectedValue.label; // 👈
  }

template

<p-autoComplete [(ngModel)]="selectedValue" field="label" [suggestions]="result" 
   (completeMethod)="search($event)"#autoItems>
</p-autoComplete>

demo 🚀