angular - mat-card examples
Hilera de mesas expandibles en angular 4 con material angular. (4)
Aquí es cómo puedes hacerlo con material angular. Este ejemplo incluye la paginación y un ejemplo con mat-sort-header en la columna ''nombre''. Tuve que anular el paginador mat y hacer una ordenación personalizada para asegurarme de que la fila expandible aún estaba por su padre cuando se ordenó. Este ejemplo también le permite abrir varias filas a la vez y cerrar todas las filas
¿Cómo harías filas expandibles en tablas de material angular? Un requisito es que necesito usar la tabla de material angular . También preferiría usar el material de acuerdo con la información here provista.
Quiero hacer clic en la fila y mostrar información diferente para cada columna. Estoy buscando algo como abajo. Si hace clic en la fila 1, las filas 2 y 3 aparecen con datos diferentes.
Cuando CDK era la única forma de acercarse a una Material Table , usar md-row ''s en una tabla regular era una alternativa viable, pero dado que @angular/material 2.0.0-beta.12 abandonó las tablas de CDK y ahora tiene su propias tablas de datos que pueden adaptarse a sus necesidades. Vea la documentación a continuación:
No es posible fuera de la caja, pero puede resolverlo con un pequeño código personalizado. Eche un vistazo a esta discusión y esta solución (no de mí, pero la base de esta respuesta).
En resumen: use la tabla de materiales y agregue un método de clic a las filas:
<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>
Agregar un componente para el área expandida. El row_detail.html contiene el html que está en el área expandida.
@Component({
selector: ''app-inline-message'',
templateUrl: ''row_detail.html'',
styles: [`
:host {
display: block;
padding: 24px;
background: rgba(0,0,0,0.03);
}
`]
})
export class InlineMessageComponent {
@Input() content1: string;
@Input() content2: string;
}
En su componente donde vive la tabla, necesita el método para expandir la fila. Primero, agregue esto a su componente ...
expandedRow: number;
@ViewChildren(''myRow'', { read: ViewContainerRef }) containers;
... y luego agrega el método:
/**
* Shows the detail view of the row
* @param {number} index
*/
expandRow(index: number, row: DataFromRowFormat) {
if (this.expandedRow != null) {
// clear old message
this.containers.toArray()[this.expandedRow].clear();
}
if (this.expandedRow === index) {
this.expandedRow = null;
} else {
const container = this.containers.toArray()[index];
const factory: ComponentFactory<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);
const messageComponent = container.createComponent(factory);
messageComponent.instance.content1= "some text";
messageComponent.instance.content2 = "some more text";
}
}
Como lo mencionó Andrew Seguin, esto ya es factible fuera de la caja: usar el predicado when .
Vea este ejemplo: https://stackblitz.com/edit/angular-material-expandable-table-rows (gracias a Lakston)
Dentro de la etiqueta mat-table tienes que usar el componente mat-row con una directiva matRipple . Al hacer clic en una fila, el elemento de la fila se asignará a la variable expandedElement :
<mat-row *matRowDef="let row; columns: displayedColumns;"
matRipple
class="element-row"
[class.expanded]="expandedElement == row"
(click)="expandedElement = row">
</mat-row>
Pero ahora tenemos que agregar nuestra fila expandida, que está oculta por defecto y se mostrará si el usuario hace clic en la fila de arriba:
<mat-row *matRowDef="let row; columns: [''expandedDetail'']; when: isExpansionDetailRow"
[@detailExpand]="row.element == expandedElement ? ''expanded'' : ''collapsed''"
style="overflow: hidden">
</mat-row>
Importante es aquí el ya mencionado when predicate. Esto llama a una función isExpansionDetailRow que está definida en el propio componente y comprueba si la fila tiene una propiedad detailRow :
isExpansionDetailRow = (row: any) => row.hasOwnProperty(''detailRow'');
Desde RC0 el primer parámetro es el índice:
isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty(''detailRow'');
Si desea tener una vista expandida para cada fila, debe agregar una "ExpansionDetailRow" identificada por la propiedad detailRow para cada fila como esta:
connect(): Observable<Element[]> {
const rows = [];
data.forEach(element => rows.push(element, { detailRow: true, element }));
return Observable.of(rows);
}
Si desea registrar la variable de las rows en la salida de la consola, se verá así:
EDITAR: EJEMPLO COMPLETO USANDO DIRECTIVA
Mat Mat filas expandibles (clasificación, paginación y filtrado)