Angular mat-table 3 levels

Question

I am new to Angular. The code developed below is watching tutorials and stuff. I am trying to create a 3-level mat-table with REST APIs. Objective

• I have a list of Tasks (Directives) that need to be shown as a table
• When the user clicks on a Directive it should show the Task Lists associated with the Directive
• When the user clicks on a Task List it should show the Sub Tasks associated with the Task List

When i click on the directive, it shows me the tasklists. When i click on the tasklist, I can see that the appropriate records are being fetched. but it doesnt show the table.

I have uploaded the directive.component.html, directive.component.ts and the response structures from the 3 REST APis

https://drive.google.com/drive/folders/1wJ5tYh-K6_aP76zGuytbVrc48mqnXK2i?usp=sharing

Kindly let me know where i am going wrong

I have also tried including this line

            <!--End Sub Task List-->

            <tr mat-header-row *matHeaderRowDef="tasklistColumns"></tr>
            
            <tr mat-row *matRowDef="let tblTaskList; columns: tasklistColumns"
            [class.example-element-row]="tblTaskList.tblSubTasks?.length" [class.example-expanded-row]="tblTaskList?.expanded"
            (click)="toggleDirectiveSubTask(tblTaskList)">
            </tr>

** <tr mat-row matRowDef="let tblTaskList columns: ['expandedSubTaskDetail']"; class="example-detail-row" >*

          </table>

        </div>

but then only the first row of the Task List shows