Fix conditional rendering.

backend/src/Squidex/wwwroot/editor/squidex-editor.css

@@ -1 +1 @@
-.remirror-theme{width:100%}.remirror-theme{position:relative}.remirror-theme *{box-sizing:border-box}.remirror-theme .ProseMirror p{margin-bottom:1rem!important}.remirror-editor{min-height:300px!important;max-height:500px}.MuiStack-root>.MuiBox-root{margin-right:5px}.MuiBox-root>.MuiButtonBase-root{border-color:#dedfe3!important;border-radius:0}.MuiBox-root>.MuiButtonBase-root{border-left-width:0!important}.MuiBox-root>.MuiBox-root:first-child>.MuiButtonBase-root{border-left-width:1px!important}.MuiStack-root>.MuiBox-root>.MuiButtonBase-root:first-child{border-left-width:1px!important}.MuiButtonBase-root.Mui-selected:hover{background-color:#3284f4!important}.remirror-editor-wrapper{padding-top:0!important}.custom-icon path{fill:#0000008a}.remirror-theme div.ProseMirror{border:1px solid #dedfe3!important;border-radius:0!important;box-shadow:none!important}.MuiTooltip-popper>div{background-color:#1a2129;border-radius:0;font-size:85%;font-weight:400;padding:.5rem}.MuiMenu-paper{transform:none!important}.squidex-editor-disabled{pointer-events:none}.squidex-editor-menu{border:1px solid #dedfe3;border-bottom:0;padding:5px}.squidex-editor-counter{border:1px solid #dedfe3;border-top:0;font-size:85%;font-weight:400;opacity:.8;padding:4px 10px 4px 4px;text-align:right}.squidex-editor-image-view{border:1px solid #dedfe3;border-radius:0;display:inline-block;margin-top:15px;margin-bottom:15px;overflow:hidden}.squidex-editor-image-buttons{bottom:10px;left:10px;position:absolute}.squidex-editor-image-element{display:block;max-width:400px;max-height:400px}.squidex-editor-image-info{left:10px;top:10px;position:absolute;background-color:#3284f4;color:#fff;font-size:85%;font-weight:400;padding:2px 6px}.squidex-editor-content-link{align-items:center;border-radius:2px;border:1px solid #dedfe3;padding:10px;display:flex;flex-direction:row;flex-wrap:nowrap;margin-top:10px;margin-bottom:10px}.squidex-editor-content-schema{display:block;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;width:auto;border-right:1px solid #c2c4cc;color:#8b8f9d;flex-shrink:0;padding-left:10px;padding-right:10px;width:200px}.squidex-editor-content-name{display:block;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;width:auto;padding-left:10px;padding-right:0}.squidex-editor-html{margin-bottom:10px;margin-top:10px;position:relative}.squidex-editor-html-label{left:6px;top:0;position:absolute;color:#8b8f9d;font-size:85%;font-weight:400}.squidex-editor-html textarea{font-family:monospace;padding:30px 20px 20px}.squidex-editor-button{align-items:center;background-color:#fff;border-radius:0;border:1px solid #dedfe3;bottom:10px;display:inline-flex;font-size:85%;font-weight:400;margin-right:5px;padding:6px 12px}.squidex-editor-button:hover{background-color:#f5f5f5}.squidex-editor-input{border:1px solid #dedfe3;border-radius:0;box-sizing:border-box;height:30px;margin-left:0;margin-right:5px;outline:none;padding:6px 12px}.squidex-editor-input:active{border-color:#3284f4}.squidex-editor-floating{border:1px solid #dedfe3}.squidex-editor-floating .MuiBox-root{margin-right:0!important}.squidex-editor-floating .MuiButtonBase-root{height:30px}.squidex-editor-modal-wrapper,.squidex-editor-modal-backdrop{bottom:0;left:0;right:0;top:0;position:absolute}.squidex-editor-modal-backdrop{background-color:#00000003}.squidex-editor-modal-window{left:50%;top:50%;background-color:#fff;border:0;border-radius:.25rem;box-sizing:border-box;box-shadow:0 3px 16px #0003;margin-top:-50px;margin-left:-150px;position:absolute;width:350px}.squidex-editor-modal-body{display:flex;flex-direction:row;flex-grow:1;padding-top:0!important}.squidex-editor-modal-body,.squidex-editor-modal-title{padding:15px}.squidex-editor-modal-title{font-size:85%}.squidex-editor-modal-window input{flex-grow:1}.b:before{content:"<a>";font-family:monospace;font-size:90%}.b:after{content:"</a>";font-family:monospace;font-size:90%}
+.remirror-theme{width:100%}.remirror-theme{position:relative}.remirror-theme *{box-sizing:border-box}.remirror-theme .ProseMirror p{margin-bottom:1rem!important}.remirror-editor{min-height:300px!important;max-height:500px}.MuiStack-root>.MuiBox-root{margin-right:5px}.MuiBox-root>.MuiButtonBase-root{border-color:#dedfe3!important;border-radius:0}.MuiBox-root>.MuiButtonBase-root{border-left-width:0!important}.MuiBox-root>.MuiBox-root:first-child>.MuiButtonBase-root{border-left-width:1px!important}.MuiStack-root>.MuiBox-root>.MuiButtonBase-root:first-child{border-left-width:1px!important}.MuiButtonBase-root.Mui-selected:hover{background-color:#3284f4!important}.remirror-editor-wrapper{padding-top:0!important}.custom-icon path{fill:#0000008a}.remirror-theme div.ProseMirror{border:1px solid #dedfe3!important;border-radius:0!important;box-shadow:none!important}.MuiTooltip-popper>div{background-color:#1a2129;border-radius:0;font-size:85%;font-weight:400;padding:.5rem}.MuiMenu-paper{transform:none!important}.squidex-editor-disabled{pointer-events:none}.squidex-editor-menu{border:1px solid #dedfe3;border-bottom:0;padding:5px}.squidex-editor-menu fieldset{border-radius:0;border:0;display:flex;outline:0;padding:0;pointer-events:none}.squidex-editor-menu fieldset:disabled{opacity:.5}.squidex-editor-counter{border:1px solid #dedfe3;border-top:0;font-size:85%;font-weight:400;opacity:.8;padding:4px 10px 4px 4px;text-align:right}.squidex-editor-image-view{border:1px solid #dedfe3;border-radius:0;display:inline-block;margin-top:15px;margin-bottom:15px;overflow:hidden}.squidex-editor-image-buttons{bottom:10px;left:10px;position:absolute}.squidex-editor-image-element{display:block;max-width:400px;max-height:400px}.squidex-editor-image-info{left:10px;top:10px;position:absolute;background-color:#3284f4;color:#fff;font-size:85%;font-weight:400;padding:2px 6px}.squidex-editor-main{position:relative}.squidex-editor-main .ace_editor{bottom:0;left:0;right:0;top:0;position:absolute;border:1px solid #dedfe3}.squidex-editor-content-link{align-items:center;border-radius:2px;border:1px solid #dedfe3;padding:10px;display:flex;flex-direction:row;flex-wrap:nowrap;margin-top:10px;margin-bottom:10px}.squidex-editor-content-schema{display:block;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;width:auto;border-right:1px solid #c2c4cc;color:#8b8f9d;flex-shrink:0;padding-left:10px;padding-right:10px;width:200px}.squidex-editor-content-name{display:block;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;width:auto;padding-left:10px;padding-right:0}.squidex-editor-html{margin-bottom:10px;margin-top:10px;position:relative}.squidex-editor-html-label{left:6px;top:0;position:absolute;color:#8b8f9d;font-size:85%;font-weight:400}.squidex-editor-html textarea{font-family:monospace;padding:30px 20px 20px}.squidex-editor-button{align-items:center;background-color:#fff;border-radius:0;border:1px solid #dedfe3;bottom:10px;display:inline-flex;font-size:85%;font-weight:400;margin-right:5px;padding:6px 12px}.squidex-editor-button:hover{background-color:#f5f5f5}.squidex-editor-input{border:1px solid #dedfe3;border-radius:0;box-sizing:border-box;height:30px;margin-left:0;margin-right:5px;outline:none;padding:6px 12px}.squidex-editor-input:active{border-color:#3284f4}.squidex-editor-floating{border:1px solid #dedfe3}.squidex-editor-floating .MuiBox-root{margin-right:0!important}.squidex-editor-floating .MuiButtonBase-root{height:30px}.squidex-editor-modal-wrapper,.squidex-editor-modal-backdrop{bottom:0;left:0;right:0;top:0;position:absolute}.squidex-editor-modal-backdrop{background-color:#00000003}.squidex-editor-modal-window{left:50%;top:50%;background-color:#fff;border:0;border-radius:.25rem;box-sizing:border-box;box-shadow:0 3px 16px #0003;margin-top:-50px;margin-left:-150px;position:absolute;width:350px}.squidex-editor-modal-body{display:flex;flex-direction:row;flex-grow:1;padding-top:0!important}.squidex-editor-modal-body,.squidex-editor-modal-title{padding:15px}.squidex-editor-modal-title{font-size:85%}.squidex-editor-modal-window input{flex-grow:1}.b:before{content:"<a>";font-family:monospace;font-size:90%}.b:after{content:"</a>";font-family:monospace;font-size:90%}

frontend/src/app/features/administration/pages/event-consumers/event-consumers-page.component.html

@@ -40,7 +40,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="help"
@@ -52,7 +52,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/administration/pages/restore/restore-page.component.html

@@ -68,7 +68,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="help"
@@ -80,7 +80,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/administration/pages/users/users-page.component.html

@@ -56,7 +56,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="help"
@@ -68,7 +68,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/assets/pages/assets-page.component.html

@@ -71,7 +71,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>   
+    <ng-template sidebarMenu>   
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="filters"
@@ -83,7 +83,7 @@
                 <i class="icon-filter"></i>
             </a>    
         </div> 
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/content/pages/content/content-page.component.html

@@ -172,7 +172,7 @@
             </ng-container>
         </ng-container>
 
-        <ng-container sidebarMenu>
+        <ng-template sidebarMenu>
             <div class="panel-nav">
                 <a class="panel-link"
                     routerLink="history"
@@ -209,7 +209,7 @@
                     <i class="icon-plugin"></i>
                 </a>
             </div>
-        </ng-container>
+        </ng-template>
     </sqx-layout>
 </form>
 

frontend/src/app/features/content/pages/contents/contents-page.component.html

@@ -143,7 +143,7 @@
         </ng-container>    
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="filters"
@@ -166,7 +166,7 @@
                 <i class="icon-plugin"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/rules/pages/rule/rule-page.component.html

@@ -155,7 +155,7 @@
             </sqx-list-view>
         </ng-container>
 
-        <ng-container sidebarMenu>
+        <ng-template sidebarMenu>
             <div class="panel-nav">
                 <ng-container  *ngIf="rule && (rulesState.canReadEvents | async)">
                     <a class="panel-link panel-link-gray"
@@ -192,7 +192,7 @@
                     <i class="icon-help2"></i>
                 </a>
             </div>
-        </ng-container>
+        </ng-template>
     </sqx-layout>
 </form>
 

frontend/src/app/features/rules/pages/rules/rules-page.component.html

@@ -41,7 +41,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link panel-link-gray"
                 routerLink="events"
@@ -66,7 +66,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/schemas/pages/schema/schema-page.component.html

@@ -106,7 +106,7 @@
         </ng-container>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -128,7 +128,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html

@@ -35,7 +35,7 @@
         </form>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -58,7 +58,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/backups/backups-page.component.html

@@ -33,7 +33,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="help"
@@ -45,7 +45,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/clients/clients-page.component.html

@@ -26,7 +26,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -48,7 +48,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/contributors/contributors-page.component.html

@@ -54,7 +54,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -76,7 +76,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/languages/languages-page.component.html

@@ -25,7 +25,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -46,7 +46,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/more/more-page.component.html

@@ -128,7 +128,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -150,7 +150,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/plans/plans-page.component.html

@@ -49,7 +49,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -71,7 +71,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/roles/roles-page.component.html

@@ -39,7 +39,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -61,7 +61,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/settings/settings-page.component.html

@@ -147,7 +147,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -169,7 +169,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/templates/templates-page.component.html

@@ -21,7 +21,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="help"
@@ -33,7 +33,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/settings/pages/workflows/workflows-page.component.html

@@ -36,7 +36,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -58,7 +58,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/teams/pages/contributors/contributors-page.component.html

@@ -43,7 +43,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -65,7 +65,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/teams/pages/more/more-page.component.html

@@ -29,7 +29,7 @@
         </sqx-list-view>
     </ng-container>
     
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -50,7 +50,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/features/teams/pages/plans/plans-page.component.html

@@ -45,7 +45,7 @@
         </sqx-list-view>
     </ng-container>
 
-    <ng-container sidebarMenu>
+    <ng-template sidebarMenu>
         <div class="panel-nav">
             <a class="panel-link"
                 routerLink="history"
@@ -67,7 +67,7 @@
                 <i class="icon-help2"></i>
             </a>
         </div>
-    </ng-container>
+    </ng-template>
 </sqx-layout>
 
 <router-outlet></router-outlet>

frontend/src/app/framework/angular/layout.component.html

@@ -94,7 +94,7 @@
             </div>
     
             <div class="panel2-main menu">
-                <ng-container *ngTemplateOutlet="sidebarMenuTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="sidebarMenuTemplate?.templateRef || null"></ng-container>
             </div>
         </div>
     </ng-container>
@@ -114,8 +114,4 @@
     <ng-template #headerTemplate>
         <ng-content select="[header]"></ng-content>
     </ng-template>
-
-    <ng-template #sidebarMenuTemplate>
-        <ng-content select="[sidebarMenu]"></ng-content>
-    </ng-template>
 </div>

frontend/src/app/framework/angular/layout.component.ts

@@ -5,10 +5,11 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, numberAttribute, OnDestroy, OnInit, Optional, Renderer2, ViewChild } from '@angular/core';
+import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, numberAttribute, OnDestroy, OnInit, Optional, Renderer2, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, QueryParamsHandling, Router } from '@angular/router';
 import { concat, defer, filter, map, of } from 'rxjs';
 import { LayoutContainerDirective } from './layout-container.directive';
+import { SidebarMenuDirective } from './template.directive';
 
 @Component({
     selector: 'sqx-layout',
@@ -66,6 +67,9 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
     @ViewChild('panel', { static: false })
     public panel!: ElementRef<HTMLElement>;
 
+    @ContentChild(SidebarMenuDirective)
+    public sidebarMenuTemplate?: SidebarMenuDirective;
+
     public isCollapsed = false;
     public isMinimized = false;
 

frontend/src/app/framework/angular/template.directive.ts

@@ -0,0 +1,21 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+/* eslint-disable @angular-eslint/directive-selector */
+
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[sidebarMenu]',
+})
+export class SidebarMenuDirective {
+    constructor(
+        public readonly templateRef: TemplateRef<unknown>,
+    ) {
+        console.log('FAsd');
+    }
+}

frontend/src/app/framework/declarations.ts

@@ -13,8 +13,8 @@ export * from './angular/external-link.directive';
 export * from './angular/forms/confirm-click.directive';
 export * from './angular/forms/control-errors-messages.component';
 export * from './angular/forms/control-errors.component';
-export * from './angular/forms/copy.directive';
 export * from './angular/forms/copy-global.directive';
+export * from './angular/forms/copy.directive';
 export * from './angular/forms/editable-title.component';
 export * from './angular/forms/editors/autocomplete.component';
 export * from './angular/forms/editors/checkbox-group.component';
@@ -53,18 +53,18 @@ export * from './angular/language-selector.component';
 export * from './angular/layout-container.directive';
 export * from './angular/layout.component';
 export * from './angular/list-view.component';
-export * from './angular/long-hover.directive';
 export * from './angular/loader.component';
+export * from './angular/long-hover.directive';
 export * from './angular/markdown.directive';
 export * from './angular/modals/dialog-renderer.component';
 export * from './angular/modals/modal-dialog.component';
 export * from './angular/modals/modal-placement.directive';
 export * from './angular/modals/modal.directive';
 export * from './angular/modals/root-view.component';
+export * from './angular/modals/tooltip.directive';
 export * from './angular/modals/tour-step.directive';
 export * from './angular/modals/tour-template.component';
 export * from './angular/modals/tour.service';
-export * from './angular/modals/tooltip.directive';
 export * from './angular/pager.component';
 export * from './angular/pipes/colors.pipes';
 export * from './angular/pipes/date-time.pipes';
@@ -90,6 +90,7 @@ export * from './angular/sync-scrolling.directive';
 export * from './angular/sync-width.directive';
 export * from './angular/tab-router-link.directive';
 export * from './angular/template-wrapper.directive';
+export * from './angular/template.directive';
 export * from './angular/title.component';
 export * from './angular/toolbar.component';
 export * from './angular/video-player.component';

frontend/src/app/framework/module.ts

@@ -12,7 +12,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { TourService as BaseTourService } from 'ngx-ui-tour-core';
-import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, CompensateScrollbarDirective, ConfirmClickDirective, ControlErrorsComponent, ControlErrorsMessagesComponent, CopyDirective, CopyGlobalDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DropdownMenuComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, GlobalErrorHandler, HighlightPipe, HoverBackgroundDirective, IfOnceDirective, ImageSourceDirective, ImageUrlDirective, IndeterminateValueDirective, ISODatePipe, JoinPipe, KeysPipe, KNumberPipe, LanguageSelectorComponent, LayoutComponent, LayoutContainerDirective, LightenPipe, ListViewComponent, LoaderComponent, LoadingInterceptor, LoadingService, LocalizedInputComponent, LocalStoreService, LongHoverDirective, MarkdownDirective, MarkdownInlinePipe, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MonthPipe, PagerComponent, ParentLinkDirective, ProgressBarComponent, RadioGroupComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutDirective, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, StopDragDirective, StringColorPipe, SyncScollingDirective, SyncWidthDirective, TabRouterlinkDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, ToolbarComponent, TooltipDirective, TourService, TourStepDirective, TourTemplateComponent, TransformInputDirective, TranslatePipe, VideoPlayerComponent } from './declarations';
+import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, CompensateScrollbarDirective, ConfirmClickDirective, ControlErrorsComponent, ControlErrorsMessagesComponent, CopyDirective, CopyGlobalDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DropdownMenuComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, GlobalErrorHandler, HighlightPipe, HoverBackgroundDirective, IfOnceDirective, ImageSourceDirective, ImageUrlDirective, IndeterminateValueDirective, ISODatePipe, JoinPipe, KeysPipe, KNumberPipe, LanguageSelectorComponent, LayoutComponent, LayoutContainerDirective, LightenPipe, ListViewComponent, LoaderComponent, LoadingInterceptor, LoadingService, LocalizedInputComponent, LocalStoreService, LongHoverDirective, MarkdownDirective, MarkdownInlinePipe, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MonthPipe, PagerComponent, ParentLinkDirective, ProgressBarComponent, RadioGroupComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutDirective, ShortcutService, ShortDatePipe, ShortTimePipe, SidebarMenuDirective, StarsComponent, StatusIconComponent, StopClickDirective, StopDragDirective, StringColorPipe, SyncScollingDirective, SyncWidthDirective, TabRouterlinkDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, ToolbarComponent, TooltipDirective, TourService, TourStepDirective, TourTemplateComponent, TransformInputDirective, TranslatePipe, VideoPlayerComponent } from './declarations';
 
 @NgModule({
     imports: [
@@ -94,6 +94,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         ShortcutDirective,
         ShortDatePipe,
         ShortTimePipe,
+        SidebarMenuDirective,
         StarsComponent,
         StatusIconComponent,
         StopClickDirective,
@@ -105,8 +106,8 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,
-        ToolbarComponent,
         ToggleComponent,
+        ToolbarComponent,
         TooltipDirective,
         TourStepDirective,
         TourTemplateComponent,
@@ -188,6 +189,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         ShortcutDirective,
         ShortDatePipe,
         ShortTimePipe,
+        SidebarMenuDirective,
         StarsComponent,
         StatusIconComponent,
         StopClickDirective,

frontend/src/app/shared/components/tour-hint.directive.ts

@@ -39,6 +39,10 @@ export class TourHintDirective implements OnInit {
     ) {
     }
 
+    public ngOnDestroy() {
+        return;
+    }
+
     public ngOnInit() {
         if (!this.anchorId) {
             return;