Nested ngFor Loop in Angular 13 Could not Work

Question

I have tried To loop in angular like shown in the images. but nothing worked.Here i showed my html & Ts Code . Here I have using Bootstrap5 to Style the template part. I'm new to angular please help me out to solve this issue. Thanks in Advance

This Is My Html Code

<section class="tree-container">
    <details class="tree-parent-cover" *ngFor="let job of allJobFamily| filter:searchText" #openFam>
        <summary id="{{job.ID}}"><span class="badge rounded-pill bg-primary">{{job.ID}}</span>{{job.Name}}
        </summary>
        <span *ngFor="let mjob of allJobMajorGroup;let i = index">
            <details class="tree-parent-inner-cover" *ngIf="('0'+job.MisscoId) === mjob.MisscoId" #openMajor>
                <summary id="{{mjob.MisscoId}}"><span
                        class="badge rounded-pill bg-primary">{{mjob.MisscoId}}</span>{{mjob.DescriptionOfTheProfession}}
                </summary>
                <span *ngFor="let smjob of allJobSubMajorGroup">
                    <details class="tree-parent-inner-cover" *ngIf="('00'+job.MisscoId) === smjob.MisscoId" #openSubMaj>
                        <summary id="{{smjob.MisscoId}}"><span
                                class="badge rounded-pill bg-primary">{{smjob.MisscoId}}</span>{{smjob.DescriptionOfTheProfession}}
                        </summary>
                    </details>
                </span>
            </details>
        </span>
    </details>
</section>

this is My TypeScript

this.allJobSubMajorGroup = [
      {
        MisscoId: '001',
        Code: 'BA',
        DescriptionOfTheProfession: 'SubMajor1',
      },
      {
        MisscoId: '002',
        Code: 'LDC',
        DescriptionOfTheProfession: 'SubMajor2',
      },
      {
        MisscoId: '003',
        Code: 'ED',
        DescriptionOfTheProfession: 'SubMajor3',
      },
      {
        MisscoId: '004',
        Code: 'ESS',
        DescriptionOfTheProfession: 'SubMajor4',
      },
      {
        MisscoId: '005',
        Code: 'MSC',
        DescriptionOfTheProfession: 'SubMajor5',
      },
    ];
this.allJobFamily = [
      {
        MisscoId: 0,
        ID: '0',
        JobFamilyID: '28',
        Code: 'BA',
        Name: 'Edited',
      },
      {
        MisscoId: 1,
        ID: '1',
        JobFamilyID: '28',
        Code: 'BA',
        Name: 'Business And Administrative Services',
      },
      {
        MisscoId: 2,
        JobFamilyID: '1',
        ID: '2',
        Code: 'LDC',
        Name: 'CLerk',
      },
      {
        MisscoId: 3,
        JobFamilyID: '30',
        ID: '3',
        Code: 'ED',
        Name: 'Educational Service',
      },
      {
        MisscoId: 4,
        JobFamilyID: '2',
        ID: '4',
        Code: 'ESS',
        Name: 'Elementary, Secretarial and Skilled Service',
      },
      {
        MisscoId: 5,
        JobFamilyID: '33',
        ID: '5',
        Code: 'MSC',
        Name: 'Graduate',
      },
    ];
this.allJobSubMajorGroup = [
      {
        MisscoId: '001',
        Code: 'BA',
        DescriptionOfTheProfession: 'SubMajor1',
      },
      {
        MisscoId: '002',
        Code: 'LDC',
        DescriptionOfTheProfession: 'SubMajor2',
      },
      {
        MisscoId: '003',
        Code: 'ED',
        DescriptionOfTheProfession: 'SubMajor3',
      },
      {
        MisscoId: '004',
        Code: 'ESS',
        DescriptionOfTheProfession: 'SubMajor4',
      },
      {
        MisscoId: '005',
        Code: 'MSC',
        DescriptionOfTheProfession: 'SubMajor5',
      },
    ];

this.allJobMajorGroup = [
      {
        MisscoId: '00',
        Code: 'BA',
        DescriptionOfTheProfession: 'majorGroup1',
      },
      {
        MisscoId: '01',
        Code: 'LDC',
        DescriptionOfTheProfession: 'majorGroup2',
      },
      {
        MisscoId: '02',
        Code: 'ED',
        DescriptionOfTheProfession: 'majorGroup3',
      },
      {
        MisscoId: '03',
        Code: 'ESS',
        DescriptionOfTheProfession: 'majorGroup4',
      },
      {
        MisscoId: '04',
        Code: 'MSC',
        DescriptionOfTheProfession: 'majorGroup5',
      },
    ];

I want to show like this

the first image show the final output when all div get opened

the second image show when one div is opened