Como utilizar Template Column

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 utilizar como parâmetro de entrada o input [t-property], o qual é responsável por informar ao THF-GRID qual a coluna que será adicionado o conteúdo do template.

Retorno:

• value: valor referente ao conteúdo da linha corrente.

Modo de uso:

...
<thf-grid [t-columns]="columns" t-service-api="url.com">
  <ng-template t-grid-column-template [t-property]="targetProperty" let-value>
    <span [innerText]="value"></span>
  </ng-template>
</thf-grid>
...

No exemplo acima, todas as células correspondentes a coluna status terão o conteúdo alterado para <h1>${value}</h1>, sendo que value refere-se ao conteúdo da linha.

...
<thf-grid
  [t-columns]="columns"
  t-service-api="url.com">
  <ng-template  t-grid-column-template [t-property]="targetProperty" let-value>
    <spanngIf="value === 'FINISHED'" [style.background]="'silver'" [innerText]="value"></span>
    <spanngIf="value === 'OPENED'" [style.background]="'gray'" [innerText]="value"></span>
  </ng-template>
</thf-grid>
...

Agora, neste exemplo, com o valor da linha corrente retornado (value), é feito uma validação para definir o template exato para adicionar a uma específica célula.

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

...
export class AppComponent {

   targetProperty= 'status';

   columns = [
     { property: 'code', label: 'ID' },
     { property: 'product', label: 'PRODUTO' },
     { property: 'status', label: 'STATUS', type: 'columnTemplate' }
   ];
}
...

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