Formatando dados usando pipes em Ignite UI for Angular grade

A forma como você apresenta os dados ao usuário é essencial. Muitas vezes, você não pode apresentar os dados como eles são da fonte de dados para o visualizador. Os usuários precisam de uma apresentação mais imersiva dos dados. Vamos considerar uma fonte de dados conforme listado abaixo:

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

Vamos começar definindo uma instância do igxGrid no modelo e os dados vinculam a propriedade data à matriz do produto. É simples adicionar Ignite UI for Angular Grid, conforme mostrado na listagem de código abaixo:

<igx-grid [data]="products"
          [autoGenerate]="true"
          width="960px">
</igx-grid>

Estamos definindo a propriedade autoGenerate como true; Faça isso Ignite UI gerará automaticamente todas as colunas lendo da fonte de dados.  A grade será criada conforme mostrado na imagem abaixo:

Como você pode ver, os dados são exibidos de uma forma muito mais imersiva. Além disso, você pode observar que Ignite UI por padrão aplicou barras de data à coluna ExpiryDate. Se você é novo em pipes, Angular pipes pegam dados como entrada e os transformam na saída desejada. A biblioteca angular fornece muitos pipes integrados:

• UpperCasePipe
• LowerCasePipe
• Tubo de Moeda
• PercentPipe
• DatePipe etc.

Quando você usa auto generate true, Ignite UI aplica DatePipe na coluna do objeto date, sem ele ExpiryDate será renderizado conforme mostrado na imagem abaixo:

Portanto, na geração automática de true, Ignite UI aplica os pipes necessários nos dados, mas ainda assim, há alguma limitação disso. Por exemplo, você não pode usar pipes personalizados ou escolher manualmente qual pipe será aplicado.

Para melhor controle das colunas, você deve configurá-las manualmente no IgxGrid.  Se você quiser formatar o estilo ou os dados de uma coluna específica, por exemplo, precisará configurar manualmente as colunas em igxGrid, conforme mostrado na listagem de código abaixo e, em seguida, usar o modelo de coluna.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
        <igx-column field="Id" header="Id"></igx-column>
        <igx-column field="Title" header="Title"></igx-column>
        <igx-column field="ExpiryDate" header="Expiry Date"></igx-column>
        <igx-column field="Price" header="Price"></igx-column>
        <igx-column field="Rating" header="Rating"></igx-column>
 </igx-grid>

Para uma coluna específica, agora você pode configurar o cabeçalho, as propriedades da coluna e o formato de dados. Digamos que você queira aplicar o pipe de moeda à coluna Preço, você pode fazer isso conforme mostrado na listagem de código abaixo:

O ng-template é como um modelo HTML e reutilizável, e substitui o conteúdo quando renderizado. Você pode usar ng-template para fornecer

1. Column template
2. Modelo de cabeçalho
3. Modelo de paginação etc.

Estamos passando dois parâmetros para ng-template

1. ixgCell : determina que este modelo será aplicado a uma célula de grade específica
2. let-value: contém o valor dos dados passados na célula

Outros parâmetros de entrada possíveis para ng-template são

1. igxHeader : para aplicar o modelo ao cabeçalho da coluna
2. let-column : contains column as input data

Falaremos sobre isso em detalhes em outro post focado no modelo de cabeçalho personalizado.

Agora, vamos modificar as colunas Price e ExpiryDate com barras verticais de moeda e data.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
    <igx-column field="Id" header="Id"></igx-column>
    <igx-column field="Title" header="Title"></igx-column>
    <igx-column field="ExpiryDate" header="Expiry Date">
        <ng-template igxCell let-value>
            {{ value | date }}
        </ng-template>
    </igx-column>
    <igx-column field="Price" header="Price">
        <ng-template igxCell let-value>
            {{ value | currency }}
        </ng-template>
    </igx-column>
    <igx-column field="Rating" header="Rating"></igx-column>
</igx-grid>

Você obterá a grade renderizada, conforme mostrado na imagem abaixo:

Você também pode passar parâmetros para pipes enquanto os usa no IgxGrid.

Você pode passar qualquer número de parâmetros para pipes conforme suportado por eles, por exemplo, parâmetros adicionais podem ser passados para o pipe de moeda, conforme mostrado abaixo:

Se você estiver trabalhando com barra vertical de data, poderá passar parâmetros conforme mostrado abaixo:

Se você criou pipes personalizados, também pode usá-los, conforme mostrado abaixo:

Aqui, firstcharacteruppercase é um pipe personalizado. Se você não tem certeza de como criá-lo, saiba mais sobre ele aqui.

Além de pipes simples, você também pode usar outros componentes Ignite UI for Angular ao formatar dados de coluna para melhor visualização.  Vou cobrir isso em uma postagem separada no blog. Vamos juntar tudo para usar os dados no igxGrid, conforme mostrado abaixo:

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
    <igx-column field="Id" header="Id"></igx-column>
    <igx-column field="Title" header="Title">
        <ng-template igxCell let-value>
            {{ value | firstcharacteruppercase }}
        </ng-template>
    </igx-column>
    <igx-column field="ExpiryDate" header="Expiry Date">
        <ng-template igxCell let-value>
            {{ value | date :'fullDate'}}
        </ng-template>
    </igx-column>
    <igx-column [sortable]='true' field="Price" header="Price">
        <ng-template igxCell let-value>
            {{ value | currency:'CAD':'symbol':'4.2-2'}}
        </ng-template>
    </igx-column>
    <igx-column field="Rating" header="Rating">
    </igx-column>
</igx-grid>

Agora você pode ver que a grade é renderizada conforme mostrado na imagem abaixo:

Agora você pode ter uma pergunta sobre se estiver usando colunas geradas automaticamente e como formatará os dados da maneira desejada. Como você pode definir outras propriedades da coluna, como largura, classificação, paginação, formato de dados, estilo de cabeçalho, fixação etc.?  Vou cobrir isso em outra postagem no blog. A partir de agora, espero que você ache este post útil e agora saiba como é fácil formatar dados usando modelos no Ignite UI for Angular Grid. Você pode saber mais sobre Ignite UI for Angular Grid aqui.  Para saber mais sobre pipes, assista ao vídeo Desktop to Web: Transforming Data with Angular Pipes