diff --git a/src/angular/frontend/src/app/components/list/list.component.ts b/src/angular/frontend/src/app/components/list/list.component.ts
index 259baf9..4f987c2 100644
--- a/src/angular/frontend/src/app/components/list/list.component.ts
+++ b/src/angular/frontend/src/app/components/list/list.component.ts
@@ -1,5 +1,4 @@
import {Component, input, TemplateRef} from '@angular/core';
-import {PanelComponent} from '../panel/panel.component';
import {NgTemplateOutlet} from '@angular/common';
export interface Identifiable {
@@ -9,7 +8,6 @@ export interface Identifiable {
@Component({
selector: 'app-list',
imports: [
- PanelComponent,
NgTemplateOutlet
],
templateUrl: './list.component.html',
diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.html b/src/angular/frontend/src/app/components/tab-group/tab-group.component.html
index 8ea8ef7..ec1e233 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.html
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.html
@@ -9,6 +9,4 @@
}
-
-
-
+
diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss b/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
index 77b376f..5905658 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
@@ -2,6 +2,9 @@
.tab-content {
margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
}
.tabs {
diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts b/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
index 050456b..6aacac7 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
@@ -1,13 +1,4 @@
-import {
- AfterViewInit,
- Component,
- ContentChildren,
- input,
- model,
- OnInit, output,
- QueryList,
- ViewContainerRef
-} from '@angular/core';
+import {AfterViewInit, Component, ContentChildren, ElementRef, EmbeddedViewRef, input, model, OnInit, output, QueryList, ViewChild, ViewContainerRef} from '@angular/core';
import {NgClass} from '@angular/common';
import {ActiveTabDirective} from './active-tab.directive';
import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
@@ -31,8 +22,10 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
public tabs = input.required();
public activeTabId = model();
public tabChanged = output();
+ private activeView?: EmbeddedViewRef;
@ContentChildren(ActiveTabDirective) tabTemplates!: QueryList;
+ @ViewChild('tabContent', { static: false }) tabContentElementRef?: ElementRef;
constructor(private vcr: ViewContainerRef) {
@@ -71,13 +64,20 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
if (!this.tabTemplates) return;
- this.vcr.clear();
-
const tab = this.tabTemplates.find(t => t.tabId() === this.activeTabId());
- if (tab) {
+ if (tab && this.tabContentElementRef) {
+ if (this.activeView) {
+ this.activeView.destroy();
+ this.tabContentElementRef.nativeElement.innerHTML = '';
+ }
+
const tabOption = this.tabs().find(x => x.id == id);
- this.vcr.createEmbeddedView(tab.template, {$implicit: tabOption});
+ this.activeView = this.vcr.createEmbeddedView(tab.template, {$implicit: tabOption});
+
+ this.activeView.rootNodes.forEach(x => {
+ this.tabContentElementRef!.nativeElement.appendChild(x)
+ });
}
}
}