Parent Child table with Child table Edit inline option in Angular Material UI

I want to add child table with inline Edit option on Material UI Parent Table/Grid View in Angular Material UI. I have tried several options like the below: on the "app.component.html"

<table mat-table [dataSource]="parentDataSource" multiTemplateDataRows class="mat-elevation-z8">
<!-- Parent columns -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Parent Name </th>
<td mat-cell *matCellDef="let parent"> {{ parent.name }} </td>
</ng-container>

<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let parent">
<button mat-button (click)="parent.isExpanded = !parent.isExpanded">
{{ parent.isExpanded ? 'Hide' : 'Show' }} Children
</button>
</td>
</ng-container>

<!-- Parent Row -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let parent; columns: displayedColumns"></tr>

<!-- Detail Row for Child Table -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let parent" [attr.colspan]="displayedColumns.length">
<div *ngIf="parent.isExpanded">
<!-- Child Table -->
<table mat-table [dataSource]="parent.children" class="child-table">
<ng-container matColumnDef="childName">
<th mat-header-cell *matHeaderCellDef> Child Name </th>
<td mat-cell *matCellDef="let child"> {{ child.name }} </td>
</ng-container>

<ng-container matColumnDef="childAge">
<th mat-header-cell *matHeaderCellDef> Age </th>
<td mat-cell *matCellDef="let child"> {{ child.age }} </td>
</ng-container>

<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let child">
<button mat-button (click)="editChild(parent, child)">Edit</button>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="['childName', 'childAge', 'actions']"></tr>
<tr mat-row *matRowDef="let child; columns: ['childName', 'childAge', 'actions']"></tr>
</table>

<!-- Edit Child Form -->
<div *ngIf="editingChild && selectedParent?.id === parent.id" class="edit-form">
<h3>Edit Child</h3>
<mat-form-field>
<input matInput [(ngModel)]="editingChild.name" placeholder="Name" />
</mat-form-field>
<mat-form-field>
<input matInput [(ngModel)]="editingChild.age" placeholder="Age" type="number" />
</mat-form-field>
<button mat-button (click)="saveChild()">Save</button>
<button mat-button (click)="cancelEdit()">Cancel</button>
</div>
</div>
</td>
</ng-container>

<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="expanded-row"></tr>
</table>



I have added the below code on the "app.comonent.ts" but it is not working.

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Parent, Child } from './models';

@Component({
selector: 'app-parent-child-table',
templateUrl: './parent-child-table.component.html',
styleUrls: ['./parent-child-table.component.css']
})
export class ParentChildTableComponent {
// Sample data
parents: Parent[] = [
{ id: 1, name: 'Parent 1', children: [{ id: 1, name: 'Child 1', age: 10 }, { id: 2, name: 'Child 2', age: 12 }] },
{ id: 2, name: 'Parent 2', children: [{ id: 3, name: 'Child 3', age: 8 }] }
];

// Data source for the parent table
parentDataSource = new MatTableDataSource(this.parents);
displayedColumns: string[] = ['name', 'actions'];

// Properties to manage child editing
editingChild: Child | null = null;
selectedParent: Parent | null = null;

// Selects a child for editing
editChild(parent: Parent, child: Child) {
this.editingChild = { ...child };
this.selectedParent = parent;
}

// Saves the changes to the child
saveChild() {
if (this.selectedParent && this.editingChild) {
const index = this.selectedParent.children.findIndex(c => c.id === this.editingChild?.id);
if (index >= 0) {
this.selectedParent.children[index] = this.editingChild;
this.parentDataSource.data = [...this.parents];
this.cancelEdit();
}
}
}

// Cancels the editing mode
cancelEdit() {
this.editingChild = null;
this.selectedParent = null;
}
}


models.ts

// models.ts

export interface Child {
id: number;
name: string;
age: number;
// Add other fields as needed
}

export interface Parent {
id: number;
name: string;
children: Child[];
}


Finally I am getting some errors

Continue reading...