I am loading grid columns dynamically which is around 100 columns and each column have type either its text or drop-down, In case of drop-down I have a data in form of key value pair like, when I implement the grid the bonded value key display in drop-down column label 
DATA : { "key": 123, "value": "New York Office"}], please tell me how to display the value as a label

Here is my header code :

<igx-grid #myGrid
  rowSelection="single" 
  [data]="gridSource.data" 
  [autoGenerate]="false" 
  displayDensity="comfortable" 
  width="100%"
  (onRowSelectionChange)="handleRowSelection($event)"
  height="730px" [paging]="true" [perPage]="20" [allowFiltering]="true">

    <ng-container *ngFor="let header of gridSource.headersMeta;">


      <div *ngIf="header.headerType==='readonly';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" [dataType]="'string'" [sortable]="true"
          [editable]="false" [resizable]="true">
        </igx-column>
      </div>

      <div *ngIf="header.headerType==='textbox';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" [dataType]="'string'" [sortable]="true"
          [editable]="true" [resizable]="true">
        </igx-column>
      </div>

      <div *ngIf="header.headerType==='dropdown';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" width="12%" [editable]="true" [filterable]="true" [sortable]="true">
          <ng-template igxCell let-cell="cell">
            {{ cell.value }}
          </ng-template>
          <ng-template igxCellEditor let-cell="cell" let-value>
            <igx-select [(ngModel)]="cell.editValue" [igxFocus]="cell.focused">
              <igx-select-item *ngFor="let option of header.headerData" [value]="option.key">{{ option.value }}
              </igx-select-item>
            </igx-select>
          </ng-template>
        </igx-column>
      </div>

    </ng-container>

  </igx-grid>