Material angular 7 – Tabla

Las <mat-table> Directivas Angulares, se utilizan para crear tablas con diseño y estilo de materiales.

En este capítulo, mostraremos la configuración requerida para mostrar una Tabla usando Material Angular.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatTableModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatTableModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

mat-table[dataSource] ="dataSource">matColumnDef="name">mat-header-cell *matHeaderCellDef> Dessert (100g)mat-cell *matCellDef="let element"> {{element.nombre}}} matColumnDef="calorías">mat-header-cell *matHeaderCellDef>Caloriesmat-cell *matCellDef="let element"> {{element.calories}}} matColumnDef="fat">mat-header-cell *matHeaderCellDef>Fat (g)mat-cell *matCellDef="let element"> {{element.grasa}}} matColumnDef="carbohidratos">mat-header-cell *matHeaderCellDef>Carbs (g)mat-cell *matCellDef="let element"> {{element.carbohidratos}} matColumnDef="protein">mat-header-cell *matHeaderCellDef>Protein (g)mat-cell *matCellDef="let element"> {{element.proteína}}} fila de encabezado de alfombra *matHeaderRowDef="displayedColumns">fila de alfombra *matRowDef="let row; columnas: displayedColumns;">

«.

A continuación se muestra el contenido del archivo ts modificado app.component.css .

table {
   ancho:100%;}

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

importar{Componente,Inyectable}desde@angular/core;importar{Ordenar}desde@angular/material;exportarfaceFood{ @angular/material
   calorías: número;
   carbohidratos: número;
   grasa: número;
   nombre:cadena;
   proteína: número;}@Componente({ { {)
   selector:app-root,
   templateUrl:app.component.html,
   styleUrls:[app.component.css]})exportclassAppComponent{Componente
   dataSource:Food[]=[{nombre:Yogur, calorías:159, grasas:6, carbohidratos:24, proteínas:4}, {nombre:Sandwich, calorías:237, grasas:9, carbohidratos:37, proteínas:4}, {nombre:Eclairs, calorías:262, grasa:16, carbohidratos:24, proteína:6}, {nombre:Pastelitos, calorías:305, grasa:4, carbohidratos:67, proteína:4}, {nombre:Panes de jengibre, calorías:356, grasa:16, carbohidratos:49, proteína:4},];
   displayedColumns:string[]=[nombre,calorías,grasa,carbohidratos,proteínas];}

Resultado

Verifique el resultado.

Detalles

• Aquí, hemos creado una tabla. Añadido mat-Table y maneja tr y th usando mat-row y mat-header-row.