Angular Material Table -Border Inside The Table

Angular Mat Table with Nested objects

See code below and full working example here:

HTML

<table mat-table class="text-list" [dataSource]="dataSource">
    <ng-container *ngFor="let column of displayedColumns; let first = first; let i = index" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
      <ng-container *ngIf="first">
        <td mat-cell *matCellDef="let row">{{ row[column] }}</td>
      </ng-container>
      <ng-container *ngIf="!first">
        <td mat-cell *matCellDef="let row">|{{ row.Houses[i-1].Purchased }}</td>
      </ng-container>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

Class

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  data = [
    {
      "UserId": "00000000-0000-0000-0000-00000000",
      "FullName": "Person one",
      "Houses": [
        {
          "State": "Colorado",
          "City": "Denver",
          "Code": "C_D",
          "Purchased": true
        },
        {
          "State": "Texas",
          "City": "Austin",
          "Code": "A_D",
          "Purchased": true
        },
      ]
    },
   {
      "UserId": "00000000-0000-0000-0000-00000000",
      "FullName": "Person Two",
      "Houses": [
        {
          "State": "Colorado",
          "City": "Denver",
          "Code": "C_D",
          "Purchased": true
        },
        {
          "State": "Texas",
          "City": "Austin",
          "Code": "A_D",
          "Purchased": false
        },
      ]
    }
  ];
  displayedColumns = ['FullName', 'Denver', 'Austin'];
  dataSource = new MatTableDataSource<any>([]);

  ngOnInit(): void {
    this.dataSource.data = this.data;
  }

How do I bind angular material table values apart from their names?

You can do something like this

columnsToDisplay2 = [

    { label: 'Weird name label', value: 'name' },
    { label: 'Weird weight label', value: 'weight' },
    { label: 'Weird symbol label', value: 'symbol' },
    { label: 'Weird position label', value: 'position' },
  ];

and on the the html:

  <ng-container
    matColumnDef="{{column.value}}"
    *ngFor="let column of columnsToDisplay2"
  >
    <th mat-header-cell *matHeaderCellDef>{{column.label}}</th>
    <td mat-cell *matCellDef="let element">{{element[column.value]}}</td>
  </ng-container>

Here is a stackblitz with it running https://stackblitz.com/edit/angular-6b8rmt?file=src%2Fapp%2Ftable-expandable-rows-example.html

Property 'table' has no initializer and is not definitely assigned in the constructor

Table is not initialized, only typed for the moment. So to clean this error, you can add a "!" to the property to say to the linter: " Hey, i know it does not hav a value yet, but it will be done later.

@ViewChild('dataTable') table!: MatTable<PeriodicElement>;

Render html in Angular Material Table cell

You can use innerHTML attribute binding

<td mat-cell 
  *matCellDef="let element"
  [innerHTML]="element.name">
</td>

TS

const ELEMENT_DATA: PeriodicElement[] = [
  {
    position: 1,
    name: '<b>Hydrogen</b> <br>Test', 
    ...
  },
  ...
];

Output

---