title: How to hide / show p-column in prime ng table in angular?
body: <p>I am using primeng data tabel like this, My requirements are</p>
  
  <p>1) editable row by clicking edit button(selected row only editabel) -> done</p>
  
  <p>2)all columns should not display, but in edit mode it should display in that row -> Not done</p>
  
  <p>for above requirments I made tabel like this, my first requirment solved , I am facing issue with second requirment</p>
  
  <p>this is the code </p>
  
  <p>Here effective date, should not diplay the tabel, but while editing it's required field</p>
  
  <pre><code> &lt;form [formGroup]="chargeCodeAddForm"&gt;
  &lt;p-dataTable [value]="fspChargeCodeList" selectionMode="single" [loading]="loading" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
    scrollable="true" scrollHeight="400px" [paginator]="true" [lazy]="true" [rows]="pageSize" [totalRecords]="totalElements"
    [editable]="true" (onLazyLoad)="getFspChargeCode($event)" [responsive]="true" [globalFilter]="gb"&gt;
  
  
    &lt;p-column styleClass="col-button"&gt;
  
      &lt;ng-template let-fspChargeCode="rowData" pTemplate="body"&gt;
        &lt;span *ngIf="!fspChargeCode.isEditable"&gt;
          &lt;a class="attachments-mwa" (click)="editRow(fspChargeCode)"&gt;
            &lt;i class="fas fa-pencil-square-o"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/span&gt;
        &lt;span *ngIf="fspChargeCode.isEditable"&gt;
          &lt;a class="attachments-mwa" (click)="editChargeCode(fspChargeCode)"&gt;
            &lt;i class="fas fa-check"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/span&gt;
        &lt;a class="delete-mwa" (click)="delete(fspChargeCode)"&gt;
          &lt;i class="far fa-trash-alt"&gt;&lt;/i&gt;
        &lt;/a&gt;
  
      &lt;/ng-template&gt;
  
    &lt;/p-column&gt;
  
    &lt;p-column field=approvalManager header="{{columns['approvalManager']}}" [hidden]="false" required="true"&gt;
      &lt;ng-template let-row="rowData" pTemplate="body"&gt;
        &lt;div *ngIf="!row.isEditable"&gt;{{row.approvalManager}}&lt;/div&gt;
        &lt;div *ngIf="row.isEditable"&gt;
  
          &lt;div class="ui-grid-row"&gt;
            &lt;div class="form-group"&gt;
              &lt;span class="has-float-label"&gt;
                &lt;p-autoComplete field="firstName"
                [(ngModel)]="fspChargeCode.approvalManager" formControlName="approvalManager" [suggestions]="employees" (completeMethod)="getEmployee($event)"&gt;&lt;/p-autoComplete&gt;
  
                &lt;label *ngIf="fspChargeCode.approvalManager"&gt;
                  {{columns['approvalManager']}}&lt;/label&gt;
                &lt;div *ngIf="formErrors.approvalManager" class="ui-message ui-messages-error ui-corner-all"&gt;
                  {{ formErrors.approvalManager}}
                &lt;/div&gt;
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
  
    &lt;/p-column&gt;
    &lt;p-column field=startDate header="{{columns['startDate']}}" [hidden]="false" required="false"&gt;
      &lt;ng-template let-row="rowData" pTemplate="body"&gt;
        &lt;div *ngIf="!row.isEditable"&gt;{{row.startDate}}&lt;/div&gt;
        &lt;div *ngIf="row.isEditable"&gt;
  
          &lt;div class="ui-grid-row"&gt;
            &lt;div class="form-group"&gt;
              &lt;span class="has-float-label"&gt;
                &lt;p-calendar placeholder="{{columns['startDate']}}" formControlName="startDate" name="startDate" [(ngModel)]="fspChargeCode.startDate"
                  showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"&gt;&lt;/p-calendar&gt;
                &lt;label *ngIf="fspChargeCode.startDate"&gt;
                  {{columns['startDate']}}&lt;/label&gt;
                &lt;div *ngIf="formErrors.startDate" class="ui-message ui-messages-error ui-corner-all"&gt;
                  {{ formErrors.startDate}}
                &lt;/div&gt;
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
  
    &lt;/p-column&gt;
    &lt;p-column field=endDate header="{{columns['endDate']}}" [hidden]="false" required="true"&gt;
  
      &lt;ng-template let-row="rowData" pTemplate="body"&gt;
        &lt;div *ngIf="!row.isEditable"&gt;{{row.endDate}}&lt;/div&gt;
        &lt;div *ngIf="row.isEditable"&gt;
  
          &lt;div class="ui-grid-row"&gt;
            &lt;div class="form-group"&gt;
              &lt;span class="has-float-label"&gt;
                &lt;p-calendar placeholder="{{columns['endDate']}}" name="endDate" formControlName="endDate" [(ngModel)]="fspChargeCode.endDate"
                  showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"&gt;&lt;/p-calendar&gt;
                &lt;label *ngIf="fspChargeCode.endDate"&gt;{{columns['endDate']}}&lt;/label&gt;
                &lt;div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all"&gt;
                  {{ formErrors.endDate}}
                &lt;/div&gt;
                &lt;div *ngIf="chargeCodeAddForm.hasError('dates')"&gt;
                  End date must be after the start date
                &lt;/div&gt;
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/p-column&gt;
    &lt;p-column field=effectiveDate header="{{columns['effectiveDate']}}" [hidden]="getEdit(false)" required="true"&gt;
  
      &lt;ng-template let-row="rowData" pTemplate="body"&gt;
        &lt;div *ngIf="!row.isEditable"&gt;{{row.effectiveDate}}&lt;/div&gt;
        &lt;div *ngIf="row.isEditable"&gt;
  
          &lt;div class="ui-grid-row"&gt;
            &lt;div class="form-group"&gt;
              &lt;span class="has-float-label"&gt;
                &lt;p-calendar placeholder="{{columns['effectiveDate']}}" name="effectiveDate" formControlName="effectiveDate" 
                [(ngModel)]="fspChargeCode.effectiveDate"
                  showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"&gt;&lt;/p-calendar&gt;
                &lt;label *ngIf="fspChargeCode.endDate"&gt;{{columns['effectiveDate']}}&lt;/label&gt;
                &lt;div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all"&gt;
                  {{ formErrors.effectiveDate}}
                &lt;/div&gt;
  
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/p-column&gt;
  
  
  &lt;/p-dataTable&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please help me</p>