title: Angular Datatable with calendar as editable
body: <p>We have a requirement to have editable Grid with calendar a template column, i am using following code, but it returning error during run time. i think error occurring at the below highlighted row.</p>
  
  <p><strong>ERROR:Uncaught (in promise): Unexpected literal at position 2</strong></p>
  
  <pre><code> &lt;div class="content"&gt;
      &lt;div class="form-section"&gt;
          &lt;form *ngIf="checklistForm" class="form" [formGroup]="checklistForm" novalidate&gt;
              &lt;p-growl [(value)]="successMessage"&gt;&lt;/p-growl&gt;
              &lt;div class="alert alert-danger" role="alert" *ngIf="errorMessage"&gt;
                  &lt;span&gt;{{ errorMessage }}&lt;/span&gt;
              &lt;/div&gt;
              &lt;userTracking [isChanged]="isChanged"&gt;
              &lt;/userTracking&gt;
              &lt;p-dataTable [value]="lstchecklistModel" [responsive]="true" rowGroupMode="subheader" groupField="groupdesc" [editable]="true" [style]="{'margin-top':'10px'}"&gt;
                  &lt;ng-template pTemplate="rowgroupheader" let-rowData&gt;{{rowData['groupdesc']}}&lt;/ng-template&gt;
                  &lt;p-column field="labelName" header="Checklist" [style]="{'overflow':'visible', 'width':'300px'}"&gt;&lt;/p-column&gt;
                  &lt;p-column field="required" header="Required?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}"&gt;
                      &lt;ng-template let-col let-row="rowData" let-i="rowIndex" pTemplate="editor"&gt;
                          &lt;p-dropdown [(ngModel)]="row[col.field]" (onChange)="OnRequiredChange(row);" [ngModelOptions]="{standalone: true}" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"&gt;&lt;/p-dropdown&gt;
                      &lt;/ng-template&gt;
                  &lt;/p-column&gt;
                  &lt;p-column field="received" header="Recived?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}"&gt;
                      &lt;ng-template let-col let-row="rowData" pTemplate="editor"&gt;
                          &lt;p-dropdown [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" (onChange)="OnRecievedChange(row);" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"&gt;&lt;/p-dropdown&gt;
                      &lt;/ng-template&gt;
                  &lt;/p-column&gt;
                  &lt;p-column field="receivedDate" header="Received Date"&gt;     
                      &lt;ng-template let-col let-row="rowData" pTemplate="body"&gt;
                          {{row[col.field] }}
                      &lt;/ng-template&gt;              
                  &lt;/p-column&gt;
                  **&lt;p-column field="mailReceivedDate" header="Mail Received Date" [editable]="true" [style]="{'overflow':'visible'}"&gt;
                      &lt;ng-template let-col let-row="rowData" pTemplate="body"&gt;
                          {{row[col.field] }}
                      &lt;/ng-template&gt;
                      &lt;ng-template let-col let-row="rowData" pTemplate="editor"&gt;
                          &lt;p-calendar [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" [locale]="en" &gt;&lt;/p-calendar&gt;
                      &lt;/ng-template&gt;
                  &lt;/p-column&gt;**
                  &lt;p-column field="updatedBy" header="Updated By"&gt;&lt;/p-column&gt;
              &lt;/p-dataTable&gt;
              &lt;footer class="pager"&gt;
                  &lt;div class="button-group"&gt;
                      &lt;button class="btn btn-primary btn-sm" (click)="saveChecklist();" [disabled]="!checklistForm.valid"&gt;Save&lt;/button&gt;
                      &lt;button class="btn btn-primary btn-sm" (click)="SaveandContinue();" [disabled]="!checklistForm.valid"&gt;Save &amp; Continue&lt;/button&gt;
                      &lt;button class="btn btn-secondary btn-sm" type="reset" (click)="loadData();" formnovalidate&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>