Formatear datos mediante tuberías en Ignite UI for Angular cuadrícula

La forma en que presentas los datos al usuario es esencial. A menudo, no se pueden presentar los datos tal cual desde el origen de datos al visor. Los usuarios necesitan una presentación más inmersiva de los datos. Consideremos una fuente de datos como la que se enumera a continuación:

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 },
];

Comencemos definiendo una instancia de igxGrid en la plantilla y los datos enlazan la propiedad de datos a la matriz del producto. Es sencillo agregar Ignite UI for Angular Grid como se muestra en la siguiente lista de códigos:

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

Estamos estableciendo la propiedad autoGenerate en true; Para ello, Ignite UI generará automáticamente todas las columnas leyendo de la fuente de datos.  La cuadrícula se creará como se muestra en la siguiente imagen:

Como puedes ver, los datos se muestran de una manera mucho más inmersiva. Además, puede observar que Ignite UI de forma predeterminada ha aplicado canalizaciones de fecha a la columna ExpiryDate. Si es nuevo en las tuberías, Angular tuberías toman datos como entrada y los transforman en la salida deseada. La biblioteca angular proporciona muchas tuberías integradas:

• UpperCasePipe
• LowerCasePipe
• CurrencyPipe (Tubería de moneda)
• PercentPipe
• DatePipe etc.

Cuando se utiliza la generación automática true, Ignite UI aplica DatePipe en la columna del objeto de fecha, sin él se representará ExpiryDate como se muestra en la siguiente imagen:

Por lo tanto, en la generación automática true, Ignite UI aplica las canalizaciones necesarias en los datos, pero aún así, existe alguna limitación. Por ejemplo, no puede utilizar tuberías personalizadas ni elegir manualmente la tubería que se va a aplicar.

Para un mejor control de las columnas, debe configurarlas manualmente en IgxGrid.  Si desea formatear el estilo o los datos de una columna en particular, por ejemplo, debe configurar manualmente las columnas en igxGrid como se muestra en la lista de código a continuación y, a continuación, usar la plantilla de columna.

<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 una columna en particular, ahora puede configurar el encabezado, las propiedades de la columna y el formato de datos. Supongamos que desea aplicar una tubería de moneda a la columna Precio, puede hacerlo como se muestra en la lista de código a continuación:

La plantilla ng es como una plantilla HTML y reutilizable, y reemplaza el contenido cuando se renderiza. Puede usar ng-template para proporcionar

1. Column template
2. Plantilla de encabezado
3. Plantilla de paginación, etc.

Estamos pasando dos parámetros a ng-template

1. ixgCell : determina que esta plantilla se aplicará a una celda de cuadrícula en particular
2. let-value : contiene el valor de los datos pasados en la celda

Otros posibles parámetros de entrada para ng-template son:

1. igxHeader : para aplicar la plantilla al encabezado de la columna
2. let-column : contains column as input data

Hablaremos de estos en detalle en otra publicación centrada en la plantilla de encabezado personalizada.

Ahora, modifiquemos las columnas Price y ExpiryDate con canalizaciones de moneda y fecha.

<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>

Obtendrá la cuadrícula renderizada, como se muestra en la imagen a continuación:

También puede pasar parámetros a las tuberías mientras lo usa en IgxGrid.

Puede pasar cualquier número de parámetros a las canalizaciones según lo admitan, por ejemplo, se pueden pasar parámetros adicionales a la canalización de moneda, como se muestra a continuación:

Si está trabajando con tubería de fecha, puede pasar parámetros como se muestra a continuación:

Si ha creado tuberías personalizadas, también puede usarlas, como se muestra a continuación:

​Aquífirstcharacteruppercase es una tubería personalizada. Si no estás seguro de cómo crearlo, obtén más información aquí.

No solo tuberías simples, sino que también puede usar otros componentes Ignite UI for Angular al dar formato a los datos de columna para una mejor visualización.  Cubriré eso en una publicación de blog separada. Pongamos todo junto para usar datos en igxGrid como se muestra a continuación:

<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>

Ahora puede ver que la cuadrícula se representa como se muestra en la imagen a continuación:

Ahora es posible que tenga la pregunta de qué pasa si está utilizando columnas generadas automáticamente, luego cómo formateará los datos de la manera deseada. ¿Cómo se pueden establecer otras propiedades de la columna, como el ancho, la ordenación, la paginación, el formato de datos, el estilo de encabezado, la fijación, etc.?  Cubriré esto en otra publicación de blog. A partir de ahora, espero que encuentres útil esta publicación y ahora sepas lo fácil que es formatear datos usando plantillas en Ignite UI for Angular Grid. Puede obtener más información sobre Ignite UI for Angular Grid aquí.  Para obtener más información sobre las tuberías, vea el vídeo Desktop to Web: Transforming Data with Angular Pipes