Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial y ejemplo de tabla de datos de material angular 10/8

 Las tablas de datos de Angular Material brindan una forma rápida y eficiente de crear tablas de datos con características comunes como paginación, filtrado y orden.

En este tutorial, creará un ejemplo que le mostrará cómo usar las tablas de datos de materiales en sus aplicaciones de Angular 10 para representar datos tabulares.

En los tutoriales anteriores, creó una API REST falsa que proporciona datos a su aplicación mediante Angular.

Ahora que ha creado un formulario para enviar datos al back-end. Veamos cómo obtener datos del back-end de la API y mostrarlos. También veremos cómo usar una tabla de datos de material para mostrar datos y el componente Diálogo de material para mostrar los detalles de contacto.

Nota : Este tutorial funciona con Angular 6/7/8/9.

Tabla de materiales de Angular 10 por ejemplo

Para seguir este tutorial, es mejor haber completado los tutoriales anteriores donde puede configurar Angular CLI y crear su proyecto. También debe asegurarse de haber comprendido los requisitos de la solicitud de seguro del vehículo que está creando a lo largo de la serie.

Pero, si solo le interesa aprender a usar la tabla de datos de material angular, simplemente debe asegurarse de tener los siguientes requisitos previos y requisitos:

  • Conocimiento de TypeScript y Angular ,
  • Node.js y npm instalados en su máquina,
  • Angular CLI 10 instalado en su sistema,
  • Se creó un proyecto de Angular 10,
  • Tiene algunos datos que puede mostrar en su tabla de datos

Eso es todo, ahora está listo para seguir con los siguientes pasos.

Configuración de material angular

Supongamos que ha creado un proyecto usando Angular CLI 10 (o v6 +) , puede usar el ng addcomando para configurar rápidamente Angular 8 en su proyecto sin tener que seguir la mayoría de los pasos manuales :

$ cd your_angular_project
$ ng add @angular/material 

A continuación, debe configurar las animaciones o deshabilitarlas .

Importación del módulo de tabla de datos de material angular

Si su proyecto está listo, ahora necesita importar el módulo Tabla de materiales en el app.module.tsarchivo. Abra el src/app.module.tsarchivo, donde existe el módulo de aplicación principal de su aplicación, y agregue los siguientes cambios:

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import {MatTableModule} from '@angular/material/table';
import { AppComponent } from  './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule       
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Primero importa MatTableModuledesde el @angular/materialpaquete y lo agrega a la importsmatriz del módulo de aplicación.

Después de importar el módulo de tabla en su módulo de aplicación. Ahora puede utilizar los componentes de la tabla de materiales para crear tablas de materiales en su aplicación.

Crear una tabla de materiales con <mat-table>una fuente de datos y proporcionarla

Abra la src/app/app.component.htmlplantilla y agregue el <mat-table>componente para crear una tabla:

<mat-table>
<!-- [...] -->
</mat-table>

También debe proporcionar una fuente de datos desde la que la tabla pueda obtener los datos para mostrar. Puede proporcionar una fuente de datos mediante la dataSourcepropiedad:

<mat-table [dataSource]="dataSource">
<!-- [...] -->
</mat-table>

Antes de crear la fuente de datos, primero definamos las columnas de la tabla.

Definición de las plantillas de columnas de la tabla de materiales

Una estructura de tabla se define por sus columnas, por lo que debe comenzar por definir una plantilla para cada columna que desea agregar a su tabla de materiales.

Por ejemplo, supongamos que desea agregar las siguientes columnas a su tabla:

  • Número de póliza de seguro,
  • Fecha de creación de la póliza,
  • Fecha de vencimiento de la póliza,
  • Monto de la póliza,
  • Identificación del cliente,
  • ID de empleado.

La definición de cada columna debe tener los siguientes tres elementos:

  • Un nombre único,
  • Una celda de encabezado,
  • Y una o varias celdas de fila.

Ahora, agregue el siguiente código dentro de su <mat-table>componente para crear una columna para el número de póliza de seguro :

<ng-container  matColumnDef="policyNumber">
    <mat-header-cell *matHeaderCellDef>Policy Number</mat-header-cell>
    <mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>

Utiliza el <ng-container>componente para crear una definición de columna. Dentro de él, define las celdas de encabezado y fila usando los componentes <mat-header-cell><mat-cell>.

La matColumnDefpropiedad dedefine el nombre exclusivo de la columna. En este caso es policyNumber.

Debe hacer lo mismo con las otras columnas. Una vez que haya definido todas sus columnas, debe especificar las columnas que se mostrarán en la tabla.

Abra el src/app/app.component.tsarchivo y agregue una variable que se usará para contener el nombre de las columnas:

tableColumns  :  string[] = ['policyNumber', 'creationDate', 'expireDate', 'policyAmount', 'clientId', 'employeeId'];

Puedes nombrar esta variable como quieras. Debe ser una lista de cadenas que contenga nombres únicos de las columnas que se muestran en la tabla.

Después de eso, necesitas definir las filas.

Definición de las plantillas de filas de la tabla de materiales

Para definir filas de la tabla de materiales, es necesario incluir <mat-header-row><mat-row>componentes dentro de su mesa y proporcionar la tableColumnsmatriz que contiene la lista de columnas.

Regrese al src/app/app.component.htmlarchivo y agregue el siguiente código en el <mat-table>componente:

<mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumns"></mat-row>

Expliquemos las directivas matHeaderRowDefmatRowDef:

  • Primero, la matHeaderRowDefdirectiva se usa para proporcionar un objeto de configuración para la fila del encabezado de la tabla. En este caso, es el nombre de la variable que proporciona la lista de columnas,
  • a continuación, la matRowDefdirectiva se utiliza para proporcionar una configuración para celdas de fila,

El <mat-header-row><mat-row>proporcionan un estilo Material de cabecera y las células de la fila.

Después de crear la estructura de su tabla de materiales, debe proporcionar los datos que la tabla necesita mostrar.

Agregar datos a su tabla de materiales

Para agregar datos a su tabla, debe proporcionar una fuente de datos. Entonces, primero, abra el src/app/app.component.tsarchivo y agregue una dataSourcematriz al componente:

dataSource  = [];

Tenga en cuenta que puede asignar a esta variable cualquier nombre que elija.

Suponemos que tiene un DataServiceque proporciona a su aplicación datos de un back-end de API REST y un Policymodelo que encapsula un tipo de póliza de seguro.

Por lo tanto, simplemente necesita obtener datos del back-end a través de este servicio y enviarlos a su dataSourcematriz. En el src/app/app.component.tsarchivo, comience agregando las siguientes importaciones:

import { DataService } from  "./data.service";
import { Policy } from  "./policy";

Suponemos aquí que el modelo y el servicio existen en el mismo módulo que el componente de la aplicación donde ha agregado la tabla. De lo contrario, cambie las importaciones en consecuencia.

A continuación, debe inyectar DataServicecomo dataServiceinstancia a través del constructor del componente:

constructor(private  dataService:  DataService) {}

También asumimos que este servicio tiene un .getPoliciesmétodo que devuelve un Observable al que puede suscribirse para obtener datos.

En el ngOnInitevento del ciclo de vida de su componente Angular, llame al .getPoliciesmétodo y suscríbase al Observable devuelto:

ngOnInit() {
  this.dataService.getPolicies().subscribe((result)=>{    
    this.dataSource  =  result.body;
  })
}

Simplemente asigne el result.bodyque contiene la matriz de políticas a su dataSourcematriz. Si sirve su proyecto, debería ver una tabla de datos cuando visite la localhost:4200dirección en su navegador.

Conclusión

En este tutorial, ha visto cómo puede agregar Material Design Table en su proyecto de Angular 10, y cómo puede usar los diversos componentes que proporciona para mostrar sus datos tabulares en una interfaz moderna y profesional. La tabla Material de Angular 10 tiene muchas características diferentes, como la paginación y el filtrado, que veremos en otro tutorial.

Publicar un comentario

0 Comentarios