Oops broke the buttons

src-ui/src/app/components/manage/document-attributes/document-attributes.component.html

@@ -68,11 +68,13 @@
       <a ngbNavLink>
         <i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
       </a>
-      <ng-template ngbNavContent>
-        <ng-container [ngComponentOutlet]="section.component"></ng-container>
-      </ng-template>
     </li>
   }
 </ul>
 
-<div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+<div class="border-start border-end border-bottom p-3 mb-3 shadow-sm">
+  <ng-container
+    [ngComponentOutlet]="activeSection?.component"
+    #activeOutlet="ngComponentOutlet"
+  ></ng-container>
+</div>

src-ui/src/app/components/manage/document-attributes/document-attributes.component.ts

@@ -4,10 +4,8 @@ import {
   inject,
   OnDestroy,
   OnInit,
-  QueryList,
   Type,
   ViewChild,
-  ViewChildren,
 } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
@@ -129,10 +127,8 @@ export class DocumentAttributesComponent implements OnInit, OnDestroy {
     },
   ]
 
-  @ViewChildren(ManagementListComponent)
+  @ViewChild('activeOutlet', { read: NgComponentOutlet })
-  private attributeLists?: QueryList<ManagementListComponent<any>>
+  private activeOutlet?: NgComponentOutlet
-
-  @ViewChild(CustomFieldsComponent) private customFields?: CustomFieldsComponent
 
   activeNavID: number = null
 
@@ -154,18 +150,14 @@ export class DocumentAttributesComponent implements OnInit, OnDestroy {
 
   get activeAttributeList(): ManagementListComponent<any> | null {
     if (this.activeSection?.kind !== 'attributeList') return null
-    const permissionType = this.activeSection.permissionType
+    const instance = this.activeOutlet?.componentInstance
-    return (
+    return instance instanceof ManagementListComponent ? instance : null
-      this.attributeLists?.find(
-        (list) => list.permissionType === permissionType
-      ) ?? null
-    )
   }
 
   get activeCustomFields(): CustomFieldsComponent | null {
-    return this.activeSection?.kind === 'customFields'
+    if (this.activeSection?.kind !== 'customFields') return null
-      ? (this.customFields ?? null)
+    const instance = this.activeOutlet?.componentInstance
-      : null
+    return instance instanceof CustomFieldsComponent ? instance : null
   }
 
   get activeTabLabel(): string {