Histórico da Página

Esta diretiva permite que seja possível alterar o conteúdo das células de uma coluna, para que os valores possam ser exibidos de acordo com a necessidade do usuário.

• Em seu uso, deve-se apenas adicionar a diretiva t-grid-cell-template à tag ng-template. Retorno:

column: conteúdo da coluna corrente. row: conteúdo da linha corrente

• Modo de uso:

...
<thf-grid
  [t-columns]="columns"
  t-service-api="url.com"
  >
    <ng-template t-grid-cell-template let-column="column" let-row="row">
     <div *ngIf="column.property === 'status' && row.status === 'CANCELED'">
       <h1 [style.background]="'red'">CANCELADA</h1>
       <span (click)="onClick()"><small>clique aqui</small></span>
     </div>
     <h1 *ngIf="column.property === 'status' && row.status === 'FINISHED'" [style.background]="'green'">FINALIZADA</h1>
     <h1 *ngIf="column.property === 'status' && row.status === 'OPENED'" [style.background]="'orange'">ABERTA</h1>
     <h1 *ngIf="column.property === 'status2'">Conteúdo do status 2</h1>
     <h1 *ngIf="column.property === 'status3'">Conteúdo do status 3</h1>
   </ng-template>
...

No exemplo acima, o usuário tem como retorno row e a column corrente, neste caso ele tem total liberdade para manipular os objetos.

• Abaixo, a declaração dos dados de entrada do THF-GRID para o uso da directiva.

...
export class AppComponent {
   columns = [
      { property: 'code', label: 'ID' },
      { property: 'product', label: 'PRODUTO' },
      { property: 'status', label: 'STATUS', type: 'cellTemplate' },
      { property: 'status2', label: 'STATUS 2', type: 'cellTemplate' },
      { property: 'status3', label: 'STATUS 3', type: 'cellTemplate' }
   ];
}
...

Observação: Sempre adicionar o type da coluna que deseja manipular com a directiva como cellTemplate