diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index 1f4666bbd0..0b32b8f604 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -19,7 +19,7 @@
       <div class="toggle">
         <span id="sidebarName-{{section.id}}" class="section-header-text">
           <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component | async; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
         </span>
         <i class="fas fa-chevron-right fa-pull-right"
            [@rotate]="(expanded | async) ? 'expanded' : 'collapsed'"
@@ -29,7 +29,7 @@
       <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)">
         <li *ngFor="let subSection of (subSections$ | async)">
           <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+            *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component | async; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
         </li>
       </ul>
     </div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 44ca82b61d..4f35ec3e89 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -10,13 +10,13 @@
        (click)="toggleSection($event)"
        data-toggle="dropdown">
         <ng-container
-                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component | async; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
     </button>
     <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
         class="m-0 shadow-none border-top-0 dropdown-menu show">
         <li *ngFor="let subSection of (subSections$ | async)">
             <ng-container
-                    *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+                    *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component | async; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
         </li>
     </ul>
 </div>
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index 42754be1e6..ee3ea3da77 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,3 +1,3 @@
 <div class="nav-item navbar-section text-md-center">
-  <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+  <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component | async; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
 </div>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
index cb725e7d70..a0815d44b6 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
@@ -11,7 +11,7 @@
                     <ng-template #spacer><i class="fas fa-fw"></i></ng-template>
                 </div>
                 <ng-container
-                        *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
+                        *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component | async; injector: (sectionMap$ | async).get(subSection.id).injector;">
                 </ng-container>
             </li>
         </ul>
diff --git a/src/app/shared/menu/menu-section/menu-section.component.ts b/src/app/shared/menu/menu-section/menu-section.component.ts
index a29c0c6320..16db7adb2c 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -40,7 +40,7 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
    */
   sectionMap$: BehaviorSubject<Map<string, {
     injector: Injector,
-    component: GenericConstructor<MenuSectionComponent>
+    component: Observable<GenericConstructor<MenuSectionComponent>>
   }>> = new BehaviorSubject(new Map());
 
   /**