fix(tabset): Use the init state to determine if the nb-template should be loaded

Use the existing state indication to prevent initial rendering of templates with he lazy directive

Author: Liberatys

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>
 

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,21 +139,40 @@ 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>
   `,
 })
 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`);
+    }
+  }
 }