From ab178f2c74368ee96d58424a4009251760f3a08f Mon Sep 17 00:00:00 2001
From: Liberatys <nick.flueckiger@renuo.ch>
Date: Wed, 6 Apr 2022 15:18:24 +0200
Subject: [PATCH] fix(tabset): Use the init state to determine if the
nb-template should be loaded
Use the existing state indication to prevent the initial rendering of templates with the lazy directive
---
.../components/tabset/tabset.component.ts | 2 +-
.../tabset/tabset-test.component.ts | 29 ++++++++++++++++---
2 files changed, 26 insertions(+), 5 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index b4e282a6e3..ad91d0000a 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -43,7 +43,7 @@ import { NbTabTitleDirective } from './tab-title.directive';
selector: 'nb-tab',
template: `
<ng-container
- *ngIf="tabContentDirective; else projectedContent"
+ *ngIf="init && tabContentDirective; else projectedContent"
[ngTemplateOutlet]="tabContentDirective.templateRef"
></ng-container>
diff --git a/src/playground/with-layout/tabset/tabset-test.component.ts b/src/playground/with-layout/tabset/tabset-test.component.ts
index c9fb3518c6..6ad15a12a8 100644
--- a/src/playground/with-layout/tabset/tabset-test.component.ts
+++ b/src/playground/with-layout/tabset/tabset-test.component.ts
@@ -6,6 +6,8 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
@Component({
selector: 'nb-tabset-test',
@@ -137,11 +139,17 @@ import { Router } from '@angular/router';
<nb-tab tabTitle="Tab #2">
<span>Content #2</span>
</nb-tab>
- <nb-tab tabTitle="Tab #3" lazyLoad>
- <span>Content #3</span>
+ <nb-tab tabTitle="Tab #3">
+ <ng-template nbTabContent>
+ {{ logTabLoad('3') }}
+ <span>Content #3</span>
+ </ng-template>
</nb-tab>
- <nb-tab tabTitle="Tab #4" lazyLoad>
- <span>Content #4</span>
+ <nb-tab tabTitle="Tab #4">
+ <ng-template nbTabContent>
+ {{ logTabLoad('4') }}
+ <span>Content #4</span>
+ </ng-template>
</nb-tab>
</nb-tabset>
`,
@@ -149,9 +157,22 @@ import { Router } from '@angular/router';
export class TabsetTestComponent {
constructor(private router: Router) {
+
}
changeTab($event: any) {
this.router.navigate(['tabset', 'tabset-test.component', $event.route]);
}
+
+ private tabs = new Map([
+ ['3', false],
+ ['4', false]
+ ]);
+
+ public logTabLoad(tab: string) {
+ if(this.tabs.get(tab) === false) {
+ this.tabs.set(tab, true);
+ console.log(`The tab ${tab} is now loaded`);
+ }
+ }
}