I'm trying to Display MatTable row data as transposed MatTable on Dialog.

For which I'm referring example on stackblitz https://stackblitz.com/edit/angular-material2-table-to-dialog-fmtyhp

In this example the Dialog uses FormFeilds, so how can I show row data as below on Dialog.

Requesting for help/suggestions. Thanks

CodePudding user response：

• In the dialog component declare displayedColumns with the values ['attributeName', 'attributeValue'], which will create the two columns that you need
• Assign the value for dataSource, attributeNames with the keys off the passed data and attributeValues with the corresponding value of the key

<table mat-table [dataSource]="dataSource" >

  <!-- Name Column -->
  <ng-container matColumnDef="attributeName">
    <th mat-header-cell *matHeaderCellDef>AttributeName</th>
    <td mat-cell *matCellDef="let element">{{ element.attributeName }}</td>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="attributeValue">
    <th mat-header-cell *matHeaderCellDef>AttributeValue</th>
    <td mat-cell *matCellDef="let element">{{ element.attributeValue }}</td>
  </ng-container>

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

export class SampleDialogComponent implements OnInit {
  displayedColumns = ['attributeName', 'attributeValue'];
  dataSource = [];

  constructor(
    public dialogRef: MatDialogRef<SampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  ngOnInit() {
    for(let key in this.data){
      this.dataSource.push({attributeName: key, attributeValue: this.data[key]})
    }
  }

  closeDialog() {
    this.dialogRef.close();
  }
}