title: PrimeNG AutoComplete inside a Table
body: <p>I am sill a bit new to Angular, I am trying to use p-autoComplete inside a table, once a row is selected my auto complete should preselect the current value..I tried using [(ngModel)]="row.bsaName" but it is not working. Since [suggestion] is an Array of object it is not binding.
  I need to change row.bsaName or bsaName property on my data to an Object with {id, name} to match the data model of [suggestions], how o I do that?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                           [rows]="10"&gt;
  
                      &lt;ng-template pTemplate="header"&gt;
                          &lt;tr&gt;
                              &lt;th width="5%"&gt;eRSA ID&lt;/th&gt;
                              &lt;th width="15%"&gt;Access For&lt;/th&gt;
                              &lt;th width="17%"&gt;Followup DT&lt;/th&gt;
                              &lt;th width="33%"&gt;Comment&lt;/th&gt;
                              &lt;th width="20%"&gt;BSA Name&lt;/th&gt;
                              &lt;th width="10%"&gt;Action&lt;/th&gt;
  
                          &lt;/tr&gt;
                      &lt;/ng-template&gt;
                      &lt;ng-template pTemplate="body" let-row&gt;
                          &lt;tr&gt;
                              &lt;td&gt;{{row.ersaID}}&lt;/td&gt;
                              &lt;td&gt;{{row.accessFor}}&lt;/td&gt;
  
  
                              &lt;td&gt;
                                  &lt;div *ngIf="!row.isBSAEditable"&gt;{{row.followupDate}}&lt;/div&gt;
                                  &lt;div *ngIf="row.isBSAEditable"&gt;
                                      &lt;!--&lt;textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5"&gt;&lt;/textarea&gt;--&gt;
                                      &lt;p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date"  [showIcon]="true"&gt;&lt;/p-calendar&gt; &lt;span style="margin-left:35px"&gt;&lt;/span&gt;
                                      &lt;!--&lt;span *ngIf="isEmpty(row.followupDate)" style="color:crimson; font-size:8pt"&gt;Required&lt;/span&gt;--&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;div *ngIf="!row.isBSAEditable"&gt;{{row.comment}}&lt;/div&gt;
                                  &lt;div *ngIf="row.isBSAEditable"&gt;
                                      &lt;textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5" &gt;&lt;/textarea&gt;
                                      &lt;!--&lt;input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200"&gt;--&gt;
                                      &lt;span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt"&gt;Required&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
  
  
                              &lt;td&gt;
                                  &lt;div *ngIf="!row.isBSAEditable"&gt;{{row.bsaName}}&lt;/div&gt;
                                  &lt;div *ngIf="row.isBSAEditable" &gt;
  
                                      &lt;p-autoComplete name="bsaNameList" [(ngModel)]="bsaListVal" [suggestions]="iBsaList"  (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id"[dropdown]="true"&gt;&lt;/p-autoComplete&gt;
                                      &lt;span *ngIf="isEmpty(row.bsaName)" style="color:crimson; font-size:8pt"&gt;Required&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;div&gt;
                                      &lt;modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteFollowup(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelFollowupEdit(row)" (save)="onFollowupSave(row)"&gt;&lt;/modal&gt;
                                  &lt;/div&gt;
                                  &lt;!--&lt;button (click)="editRow(row)"&gt;Edit&lt;/button&gt;--&gt;
                              &lt;/td&gt;
  
                          &lt;/tr&gt;
                      &lt;/ng-template&gt;
  
                  &lt;/p-table&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>     bsaListVal: IBsaList;
          iBsaList: IBsaList[];
          originalBsaList: IBsaList[];
  
   ngOnInit(): void {
  
  
         this.getBSAFollowup();
              this.GetBsaList();
  
  
  
      }
       searchBsaList(event) {
              this.iBsaList = this.originalBsaList;
              this.iBsaList = this.iBsaList
                  .filter(data =&gt; data.name.toString()
                      .toLowerCase()
                      .indexOf(event.query.toString().toLowerCase()) !== -1);
  
          }
          GetBsaList() {
              this._dashboardService.getBSAList()
                  .subscribe(
                  data =&gt; {
                      this.iBsaList = data.result;
                      this.originalBsaList = data.result;
  
                  },
                  error =&gt; console.log('xx Method: ' + 'alert alert-danger'));
  
          }
           getBSAFollowup() {
          this._dashboardService.getBSAFollowup()
              .subscribe(
              data =&gt; {
                  this.iBsaFollowup = data.result;
                  this.iBsaFollowup.map(row =&gt; {
                      row.isBSAEditable = false;
                  }); 
              },
              error =&gt; console.log('GetControls Method: ' + &lt;any&gt;error, 'alert alert-danger'));
      }
  </code></pre>
  
  <p><strong>interface</strong></p>
  
  <pre><code>export interface IBsaList {
  
      id: string,
      name: string
  }
  </code></pre>
  
  <p><strong>data result</strong></p>
  
  <pre><code>All{"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]}
  </code></pre>
  
  <p>*********************************************************update********************************************
  For simplicity, I removed (*ngIf="row.isBSAEditable") so it will be automatically editable . Also took out the modaland added Edit button</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10"&gt;
  
      &lt;ng-template pTemplate="header"&gt;
          &lt;tr&gt;
              &lt;th width="5%"&gt;eRSA ID&lt;/th&gt;
              &lt;th width="15%"&gt;Access For&lt;/th&gt;
              &lt;th width="17%"&gt;Followup DT&lt;/th&gt;
              &lt;th width="33%"&gt;Comment&lt;/th&gt;
              &lt;th width="20%"&gt;BSA Name&lt;/th&gt;
  &lt;th width="10%"&gt;Action&lt;/th&gt;         
  
          &lt;/tr&gt;
      &lt;/ng-template&gt;
      &lt;ng-template pTemplate="body" let-row&gt;
          &lt;tr&gt;
              &lt;td&gt;{{row.ersaID}}&lt;/td&gt;
              &lt;td&gt;{{row.accessFor}}&lt;/td&gt;
  
  
              &lt;td&gt;
  
                  &lt;div&gt;
                      &lt;p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date" [showIcon]="true"&gt;&lt;/p-calendar&gt; &lt;span style="margin-left:35px"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div *ngIf="!row.isBSAEditable"&gt;{{row.comment}}&lt;/div&gt;
  
              &lt;/td&gt;
  
  
              &lt;td&gt;
  
                      &lt;p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList" (completeMethod)="searchBsaList($event)"
                       [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"&gt;&lt;/p-autoComplete&gt;
  
  
              &lt;/td&gt;
              &lt;td&gt;
          &lt;button (click)="editRow(row)"&gt;Edit&lt;/button&gt;
  
  
          &lt;/tr&gt;
      &lt;/ng-template&gt;
  
  &lt;/p-table&gt;
  </code></pre>
  
  <p>Result for the auto complete dropdown</p>
  
  <blockquote>
    <p>All{"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John
    B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam
    J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]}</p>
  </blockquote>
  
  <p>iBsaFollowUp JSON</p>
  
  <p>All{"result":[{"id":x,"ersaID":XXX,"bsaID":"5","followupDate":"10/27/2017","active":true,"comment":"test this rsss 2","accessFor":"XXXX","bsaName":"Carolyn G"},{"id":X,"ersaID":XXXX,"bsaID":"1","followupDate":"10/27/2017","active":true,"comment":"test this rsss 4","accessFor":"XXXXX","bsaName":"Mike S"}}}</p>