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 de la Tabla con el Material 7
Verifique el resultado.
Detalles a tener en cuenta de la tabla
- Aquí, hemos creado una tabla. Añadido mat-Table y maneja tr y th usando mat-row y mat-header-row.