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: `
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';
Content #2
-
- Content #3
+
+
+ {{ logTabLoad('3') }}
+ Content #3
+
-
- Content #4
+
+
+ {{ logTabLoad('4') }}
+ Content #4
+
`,
@@ -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`);
+ }
+ }
}