From 6ddc5c86a9cde682cc7dda2290b8861fcbfb5aff Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Fri, 13 Aug 2021 16:03:37 +0300
Subject: [PATCH 01/25] fix(tabset): lazy load

---
 .../theme/components/tabset/tab-content.ts    | 14 +++++++++
 .../components/tabset/tabset.component.ts     | 31 ++++++++++++++-----
 .../theme/components/tabset/tabset.module.ts  |  5 +++
 3 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 src/framework/theme/components/tabset/tab-content.ts

diff --git a/src/framework/theme/components/tabset/tab-content.ts b/src/framework/theme/components/tabset/tab-content.ts
new file mode 100644
index 0000000000..f35a314cd2
--- /dev/null
+++ b/src/framework/theme/components/tabset/tab-content.ts
@@ -0,0 +1,14 @@
+import { Directive, InjectionToken, TemplateRef } from '@angular/core';
+
+export const NB_TAB_CONTENT = new InjectionToken<NbTabContentDirective>('NbTabContent');
+
+/** Decorates the `ng-template` tags and reads out the template from it. */
+@Directive({
+  selector: '[nbTabContent]',
+  providers: [{ provide: NB_TAB_CONTENT, useExisting: NbTabContentDirective }],
+})
+export class NbTabContentDirective {
+  constructor(
+    /** Content for the tab. */ public template: TemplateRef<any>) {
+  }
+}
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index cd2e2aedfd..79e46a9404 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -14,14 +14,16 @@ import {
   QueryList,
   AfterContentInit,
   HostBinding,
-  ChangeDetectorRef,
+  ChangeDetectorRef, ViewChild, ContentChild, TemplateRef, ViewContainerRef, AfterViewInit,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentOrCustomStatus } from '../component-status';
 import { NbBadgePosition } from '../badge/badge.component';
 import { NbIconConfig } from '../icon/icon.component';
+import { NB_TAB_CONTENT } from './tab-content';
 
 /**
  * Specific tab container.
@@ -37,13 +39,15 @@ import { NbIconConfig } from '../icon/icon.component';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-container *ngIf="init">
+    <ng-template portalHost #container>
       <ng-content></ng-content>
-    </ng-container>
+    </ng-template>
   `,
 })
-export class NbTabComponent {
-
+export class NbTabComponent implements AfterViewInit {
+  @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+  @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
+  @ViewChild(CdkPortalOutlet, { static: true }) _portalHost: CdkPortalOutlet;
   /**
    * Tab title
    * @type {string}
@@ -122,7 +126,9 @@ export class NbTabComponent {
   set active(val: boolean) {
     this.activeValue = convertToBoolProperty(val);
     if (this.activeValue) {
-      this.init = true;
+      this._contentPortal.attach(this._portalHost);
+    } else if (this._contentPortal.isAttached) {
+      this._contentPortal.detach();
     }
   }
   static ngAcceptInputType_active: NbBooleanInput;
@@ -131,10 +137,10 @@ export class NbTabComponent {
    * Lazy load content before tab selection
    * TODO: rename, as lazy is by default, and this is more `instant load`
    * @param {boolean} val
+   * @deprecated To be turned into a <ng-template nbTabContent>
    */
   @Input()
   set lazyLoad(val: boolean) {
-    this.init = convertToBoolProperty(val);
   }
   static ngAcceptInputType_lazyLoad: NbBooleanInput;
 
@@ -160,7 +166,16 @@ export class NbTabComponent {
    */
   @Input() badgePosition: NbBadgePosition;
 
-  init: boolean = false;
+  /** Portal that will be the hosted content of the tab */
+  private _contentPortal: TemplatePortal | null = null;
+
+  constructor(private _viewContainerRef: ViewContainerRef) {
+  }
+
+  ngAfterViewInit(): void {
+    this._contentPortal = new TemplatePortal(
+      this._explicitContent || this._implicitContent, this._viewContainerRef);
+  }
 }
 
 // TODO: Combine tabset with route-tabset, so that we can:
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index b79b02382d..f352a3f117 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -5,12 +5,14 @@
  */
 
 import { NgModule } from '@angular/core';
+import { PortalModule } from '@angular/cdk/portal';
 
 import { NbSharedModule } from '../shared/shared.module';
 
 import { NbTabsetComponent, NbTabComponent } from './tabset.component';
 import { NbBadgeModule } from '../badge/badge.module';
 import { NbIconModule } from '../icon/icon.module';
+import { NbTabContentDirective } from './tab-content';
 
 const NB_TABSET_COMPONENTS = [
   NbTabsetComponent,
@@ -22,12 +24,15 @@ const NB_TABSET_COMPONENTS = [
     NbSharedModule,
     NbBadgeModule,
     NbIconModule,
+    PortalModule,
   ],
   declarations: [
     ...NB_TABSET_COMPONENTS,
+    NbTabContentDirective,
   ],
   exports: [
     ...NB_TABSET_COMPONENTS,
+    NbTabContentDirective,
   ],
 })
 export class NbTabsetModule { }

From 5a99e0a196e93a870f6d8fab9fafd76ea417a666 Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 01:17:02 +0300
Subject: [PATCH 02/25] ref(tabset): extract view logic

---
 .../theme/components/tabset/tabset.component.ts   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 79e46a9404..305e7bd37f 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -125,11 +125,7 @@ export class NbTabComponent implements AfterViewInit {
   }
   set active(val: boolean) {
     this.activeValue = convertToBoolProperty(val);
-    if (this.activeValue) {
-      this._contentPortal.attach(this._portalHost);
-    } else if (this._contentPortal.isAttached) {
-      this._contentPortal.detach();
-    }
+    this.initView();
   }
   static ngAcceptInputType_active: NbBooleanInput;
 
@@ -172,6 +168,15 @@ export class NbTabComponent implements AfterViewInit {
   constructor(private _viewContainerRef: ViewContainerRef) {
   }
 
+  private initView(): void {
+    if (!this._contentPortal.isAttached && this.activeValue) {
+      this._contentPortal.attach(this._portalHost);
+    }
+    if (this._contentPortal.isAttached && !this.activeValue) {
+      this._contentPortal.detach();
+    }
+  }
+
   ngAfterViewInit(): void {
     this._contentPortal = new TemplatePortal(
       this._explicitContent || this._implicitContent, this._viewContainerRef);

From 3eee78f82171fdba1ab469667c124810179fb39b Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 09:59:14 +0300
Subject: [PATCH 03/25] ref(tabset): turn activeValue into active

---
 src/framework/theme/components/tabset/tabset.component.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 305e7bd37f..5734e081d8 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -125,7 +125,7 @@ export class NbTabComponent implements AfterViewInit {
   }
   set active(val: boolean) {
     this.activeValue = convertToBoolProperty(val);
-    this.initView();
+    this._initView();
   }
   static ngAcceptInputType_active: NbBooleanInput;
 
@@ -168,11 +168,11 @@ export class NbTabComponent implements AfterViewInit {
   constructor(private _viewContainerRef: ViewContainerRef) {
   }
 
-  private initView(): void {
-    if (!this._contentPortal.isAttached && this.activeValue) {
+  private _initView(): void {
+    if (!this._contentPortal.isAttached && this.active) {
       this._contentPortal.attach(this._portalHost);
     }
-    if (this._contentPortal.isAttached && !this.activeValue) {
+    if (this._contentPortal.isAttached && !this.active) {
       this._contentPortal.detach();
     }
   }

From 2a32b465c5c93de569af0afac5b5a73da50c99b2 Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 10:36:48 +0300
Subject: [PATCH 04/25] ref(tabset): made init property deprecated

---
 .../theme/components/tabset/tabset.component.ts          | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 5734e081d8..c75c7b4b4d 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -125,6 +125,9 @@ export class NbTabComponent implements AfterViewInit {
   }
   set active(val: boolean) {
     this.activeValue = convertToBoolProperty(val);
+    if (this.activeValue) {
+      this.init = true;
+    }
     this._initView();
   }
   static ngAcceptInputType_active: NbBooleanInput;
@@ -137,6 +140,7 @@ export class NbTabComponent implements AfterViewInit {
    */
   @Input()
   set lazyLoad(val: boolean) {
+    this.init = convertToBoolProperty(val);
   }
   static ngAcceptInputType_lazyLoad: NbBooleanInput;
 
@@ -162,6 +166,11 @@ export class NbTabComponent implements AfterViewInit {
    */
   @Input() badgePosition: NbBadgePosition;
 
+  /**
+   * @deprecated To be turned into a active property
+   * @type string
+   */
+  init: boolean = false;
   /** Portal that will be the hosted content of the tab */
   private _contentPortal: TemplatePortal | null = null;
 

From 9aac9071fcf286075706833c3cb70053403022c6 Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 10:39:22 +0300
Subject: [PATCH 05/25] chore(NbTabComponent): init property description

---
 src/framework/theme/components/tabset/tabset.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index c75c7b4b4d..92ae4eb40b 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -168,7 +168,7 @@ export class NbTabComponent implements AfterViewInit {
 
   /**
    * @deprecated To be turned into a active property
-   * @type string
+   * @type boolean
    */
   init: boolean = false;
   /** Portal that will be the hosted content of the tab */

From 6579461cc4adb6532f38f6703a834b44c4b0f4bf Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 10:41:08 +0300
Subject: [PATCH 06/25] style(tabset): add new lines

---
 src/framework/theme/components/tabset/tabset.component.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 92ae4eb40b..af3410120d 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -14,7 +14,12 @@ import {
   QueryList,
   AfterContentInit,
   HostBinding,
-  ChangeDetectorRef, ViewChild, ContentChild, TemplateRef, ViewContainerRef, AfterViewInit,
+  ChangeDetectorRef,
+  ViewChild,
+  ContentChild,
+  TemplateRef,
+  ViewContainerRef,
+  AfterViewInit,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';

From 64277e122e9b7aa13b3c30ce9b402a421f2ac50f Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 14:41:24 +0300
Subject: [PATCH 07/25] fix(tabset): remove portal implementation

---
 .../components/tabset/tabset.component.ts     | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index af3410120d..0cb26326f4 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -19,10 +19,9 @@ import {
   ContentChild,
   TemplateRef,
   ViewContainerRef,
-  AfterViewInit,
+  EmbeddedViewRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentOrCustomStatus } from '../component-status';
@@ -44,15 +43,20 @@ import { NB_TAB_CONTENT } from './tab-content';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-template portalHost #container>
+    <ng-container #outlet></ng-container>
+
+    <ng-template #container>
       <ng-content></ng-content>
     </ng-template>
   `,
 })
-export class NbTabComponent implements AfterViewInit {
-  @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+export class NbTabComponent {
+  @ViewChild('outlet', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
   @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
-  @ViewChild(CdkPortalOutlet, { static: true }) _portalHost: CdkPortalOutlet;
+  @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+
+  private ref: EmbeddedViewRef<any> | null = null;
+
   /**
    * Tab title
    * @type {string}
@@ -176,25 +180,16 @@ export class NbTabComponent implements AfterViewInit {
    * @type boolean
    */
   init: boolean = false;
-  /** Portal that will be the hosted content of the tab */
-  private _contentPortal: TemplatePortal | null = null;
-
-  constructor(private _viewContainerRef: ViewContainerRef) {
-  }
 
   private _initView(): void {
-    if (!this._contentPortal.isAttached && this.active) {
-      this._contentPortal.attach(this._portalHost);
+    if (!this.ref && this.active) {
+      this.ref = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
     }
-    if (this._contentPortal.isAttached && !this.active) {
-      this._contentPortal.detach();
+    if (this.ref && !this.active) {
+      this.ref.destroy();
+      this.ref = null;
     }
   }
-
-  ngAfterViewInit(): void {
-    this._contentPortal = new TemplatePortal(
-      this._explicitContent || this._implicitContent, this._viewContainerRef);
-  }
 }
 
 // TODO: Combine tabset with route-tabset, so that we can:

From aa4b80437dcc732b0266119483a893c8fb46e3a9 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 14:48:33 +0300
Subject: [PATCH 08/25] fix(tabset): remove portal import

---
 src/framework/theme/components/tabset/tabset.module.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index f352a3f117..3a6737435f 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -5,7 +5,6 @@
  */
 
 import { NgModule } from '@angular/core';
-import { PortalModule } from '@angular/cdk/portal';
 
 import { NbSharedModule } from '../shared/shared.module';
 
@@ -24,7 +23,6 @@ const NB_TABSET_COMPONENTS = [
     NbSharedModule,
     NbBadgeModule,
     NbIconModule,
-    PortalModule,
   ],
   declarations: [
     ...NB_TABSET_COMPONENTS,

From 183494f477be66158a185a2b7052d439c44d89fa Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 14:52:28 +0300
Subject: [PATCH 09/25] fix(tabset): module imports

---
 src/framework/theme/components/tabset/tabset.module.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index 3a6737435f..fdb11ada49 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -18,6 +18,10 @@ const NB_TABSET_COMPONENTS = [
   NbTabComponent,
 ];
 
+const NB_TABSET_DIRECTIVES = [
+  NbTabContentDirective,
+];
+
 @NgModule({
   imports: [
     NbSharedModule,
@@ -26,11 +30,11 @@ const NB_TABSET_COMPONENTS = [
   ],
   declarations: [
     ...NB_TABSET_COMPONENTS,
-    NbTabContentDirective,
+    ...NB_TABSET_DIRECTIVES,
   ],
   exports: [
     ...NB_TABSET_COMPONENTS,
-    NbTabContentDirective,
+    ...NB_TABSET_DIRECTIVES,
   ],
 })
 export class NbTabsetModule { }

From b1b779d4fec4eae78575f4b363363c96c557cfbe Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 16:41:47 +0300
Subject: [PATCH 10/25] style(tabset): rename variable

---
 .../theme/components/tabset/tabset.component.ts    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 0cb26326f4..c26217340e 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -55,8 +55,6 @@ export class NbTabComponent {
   @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
   @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
 
-  private ref: EmbeddedViewRef<any> | null = null;
-
   /**
    * Tab title
    * @type {string}
@@ -181,13 +179,15 @@ export class NbTabComponent {
    */
   init: boolean = false;
 
+  protected embeddedViewRef: EmbeddedViewRef<any> | null = null;
+
   private _initView(): void {
-    if (!this.ref && this.active) {
-      this.ref = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
+    if (!this.embeddedViewRef && this.active) {
+      this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
     }
-    if (this.ref && !this.active) {
-      this.ref.destroy();
-      this.ref = null;
+    if (this.embeddedViewRef && !this.active) {
+      this.embeddedViewRef.destroy();
+      this.embeddedViewRef = null;
     }
   }
 }

From 3e736ceea62b8be7781ca1b18c5a474d0a381506 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 10:45:05 +0300
Subject: [PATCH 11/25] fix(tabset): add template outlet

---
 .../components/tabset/tabset.component.ts     | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index c26217340e..9e0b0f78f3 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -18,8 +18,6 @@ import {
   ViewChild,
   ContentChild,
   TemplateRef,
-  ViewContainerRef,
-  EmbeddedViewRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -43,7 +41,7 @@ import { NB_TAB_CONTENT } from './tab-content';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-container #outlet></ng-container>
+    <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
 
     <ng-template #container>
       <ng-content></ng-content>
@@ -51,7 +49,6 @@ import { NB_TAB_CONTENT } from './tab-content';
   `,
 })
 export class NbTabComponent {
-  @ViewChild('outlet', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
   @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
   @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
 
@@ -179,15 +176,23 @@ export class NbTabComponent {
    */
   init: boolean = false;
 
-  protected embeddedViewRef: EmbeddedViewRef<any> | null = null;
+  currentTemplate: TemplateRef<any> | null = null;
 
-  private _initView(): void {
-    if (!this.embeddedViewRef && this.active) {
-      this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
-    }
-    if (this.embeddedViewRef && !this.active) {
-      this.embeddedViewRef.destroy();
-      this.embeddedViewRef = null;
+  // private _initView(): void {
+  //   if (!this.embeddedViewRef && this.active) {
+  //     this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
+  //   }
+  //   if (this.embeddedViewRef && !this.active) {
+  //     this.embeddedViewRef.destroy();
+  //     this.embeddedViewRef = null;
+  //   }
+  // }
+
+  protected _initView(): void {
+    if (this.active) {
+      this.currentTemplate = this._explicitContent || this._implicitContent;
+    } else {
+      this.currentTemplate = null;
     }
   }
 }

From eb1bc779673232183060bc068026f5454f7ec0c9 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 10:47:16 +0300
Subject: [PATCH 12/25] style(tabset): remove comments

---
 .../theme/components/tabset/tabset.component.ts        | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 9e0b0f78f3..174884191c 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -178,16 +178,6 @@ export class NbTabComponent {
 
   currentTemplate: TemplateRef<any> | null = null;
 
-  // private _initView(): void {
-  //   if (!this.embeddedViewRef && this.active) {
-  //     this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
-  //   }
-  //   if (this.embeddedViewRef && !this.active) {
-  //     this.embeddedViewRef.destroy();
-  //     this.embeddedViewRef = null;
-  //   }
-  // }
-
   protected _initView(): void {
     if (this.active) {
       this.currentTemplate = this._explicitContent || this._implicitContent;

From 7621f86dd23a5d420f082dce97f563ad93cbe39f Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 10:59:13 +0300
Subject: [PATCH 13/25] fix(tabset): add wrap container

---
 .../theme/components/tabset/tabset.component.ts | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 174884191c..d70900c426 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -17,7 +17,7 @@ import {
   ChangeDetectorRef,
   ViewChild,
   ContentChild,
-  TemplateRef,
+  TemplateRef, AfterViewInit,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -41,14 +41,16 @@ import { NB_TAB_CONTENT } from './tab-content';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
+    <ng-container *ngIf="active">
+      <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
+    </ng-container>
 
     <ng-template #container>
       <ng-content></ng-content>
     </ng-template>
   `,
 })
-export class NbTabComponent {
+export class NbTabComponent implements AfterViewInit {
   @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
   @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
 
@@ -132,7 +134,6 @@ export class NbTabComponent {
     if (this.activeValue) {
       this.init = true;
     }
-    this._initView();
   }
   static ngAcceptInputType_active: NbBooleanInput;
 
@@ -178,12 +179,8 @@ export class NbTabComponent {
 
   currentTemplate: TemplateRef<any> | null = null;
 
-  protected _initView(): void {
-    if (this.active) {
-      this.currentTemplate = this._explicitContent || this._implicitContent;
-    } else {
-      this.currentTemplate = null;
-    }
+  ngAfterViewInit() {
+    this.currentTemplate = this._explicitContent || this._implicitContent;
   }
 }
 

From 9a0e959111f89a7787baef765051d289c8441be7 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 11:02:26 +0300
Subject: [PATCH 14/25] style(tabset): add new line

---
 src/framework/theme/components/tabset/tabset.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index d70900c426..276ef2fde3 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -17,7 +17,8 @@ import {
   ChangeDetectorRef,
   ViewChild,
   ContentChild,
-  TemplateRef, AfterViewInit,
+  TemplateRef,
+  AfterViewInit,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 

From 87bf2cb68c89df1a19c801071473252a40f98054 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 14:17:23 +0300
Subject: [PATCH 15/25] fix(tabset): change lazy directive

---
 .../{tab-content.ts => lazy-content.ts}       |  8 +++----
 .../components/tabset/tabset.component.ts     | 23 ++++++++-----------
 .../theme/components/tabset/tabset.module.ts  |  4 ++--
 3 files changed, 15 insertions(+), 20 deletions(-)
 rename src/framework/theme/components/tabset/{tab-content.ts => lazy-content.ts} (51%)

diff --git a/src/framework/theme/components/tabset/tab-content.ts b/src/framework/theme/components/tabset/lazy-content.ts
similarity index 51%
rename from src/framework/theme/components/tabset/tab-content.ts
rename to src/framework/theme/components/tabset/lazy-content.ts
index f35a314cd2..009adae7fc 100644
--- a/src/framework/theme/components/tabset/tab-content.ts
+++ b/src/framework/theme/components/tabset/lazy-content.ts
@@ -1,13 +1,13 @@
 import { Directive, InjectionToken, TemplateRef } from '@angular/core';
 
-export const NB_TAB_CONTENT = new InjectionToken<NbTabContentDirective>('NbTabContent');
+export const NB_LAZY_CONTENT = new InjectionToken<NbLazyContentDirective>('NbLazyContent');
 
 /** Decorates the `ng-template` tags and reads out the template from it. */
 @Directive({
-  selector: '[nbTabContent]',
-  providers: [{ provide: NB_TAB_CONTENT, useExisting: NbTabContentDirective }],
+  selector: '[nbLazyContent]',
+  providers: [{ provide: NB_LAZY_CONTENT, useExisting: NbLazyContentDirective }],
 })
-export class NbTabContentDirective {
+export class NbLazyContentDirective {
   constructor(
     /** Content for the tab. */ public template: TemplateRef<any>) {
   }
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 276ef2fde3..0ea430a468 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -15,10 +15,8 @@ import {
   AfterContentInit,
   HostBinding,
   ChangeDetectorRef,
-  ViewChild,
   ContentChild,
   TemplateRef,
-  AfterViewInit,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -26,7 +24,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentOrCustomStatus } from '../component-status';
 import { NbBadgePosition } from '../badge/badge.component';
 import { NbIconConfig } from '../icon/icon.component';
-import { NB_TAB_CONTENT } from './tab-content';
+import { NB_LAZY_CONTENT } from './lazy-content';
 
 /**
  * Specific tab container.
@@ -42,18 +40,17 @@ import { NB_TAB_CONTENT } from './tab-content';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-container *ngIf="active">
-      <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
+    <ng-container *ngIf="showLazy; else notLazy">
+      <ng-container *ngTemplateOutlet="lazyTemplate"></ng-container>
     </ng-container>
 
-    <ng-template #container>
+    <ng-template #notLazy>
       <ng-content></ng-content>
     </ng-template>
   `,
 })
-export class NbTabComponent implements AfterViewInit {
-  @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
-  @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+export class NbTabComponent {
+  @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) lazyTemplate: TemplateRef<any>;
 
   /**
    * Tab title
@@ -142,7 +139,7 @@ export class NbTabComponent implements AfterViewInit {
    * Lazy load content before tab selection
    * TODO: rename, as lazy is by default, and this is more `instant load`
    * @param {boolean} val
-   * @deprecated To be turned into a <ng-template nbTabContent>
+   * @deprecated To be turned into a <ng-template nbLazyContent>
    */
   @Input()
   set lazyLoad(val: boolean) {
@@ -178,10 +175,8 @@ export class NbTabComponent implements AfterViewInit {
    */
   init: boolean = false;
 
-  currentTemplate: TemplateRef<any> | null = null;
-
-  ngAfterViewInit() {
-    this.currentTemplate = this._explicitContent || this._implicitContent;
+  get showLazy(): boolean {
+    return !!this.lazyTemplate && this.active;
   }
 }
 
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index fdb11ada49..ca260555ae 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -11,7 +11,7 @@ import { NbSharedModule } from '../shared/shared.module';
 import { NbTabsetComponent, NbTabComponent } from './tabset.component';
 import { NbBadgeModule } from '../badge/badge.module';
 import { NbIconModule } from '../icon/icon.module';
-import { NbTabContentDirective } from './tab-content';
+import { NbLazyContentDirective } from './lazy-content';
 
 const NB_TABSET_COMPONENTS = [
   NbTabsetComponent,
@@ -19,7 +19,7 @@ const NB_TABSET_COMPONENTS = [
 ];
 
 const NB_TABSET_DIRECTIVES = [
-  NbTabContentDirective,
+  NbLazyContentDirective,
 ];
 
 @NgModule({

From 868eb82a951fad0ef189bced3201f2d7d5d049f5 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 14:26:20 +0300
Subject: [PATCH 16/25] fix(tabset): add getter for lazy template

---
 src/framework/theme/components/tabset/tabset.component.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 0ea430a468..c9b2f50706 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -50,7 +50,11 @@ import { NB_LAZY_CONTENT } from './lazy-content';
   `,
 })
 export class NbTabComponent {
-  @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) lazyTemplate: TemplateRef<any>;
+  @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true })
+  get lazyTemplate(): TemplateRef<any> {
+    return this._lazyTemplate;
+  }
+  protected _lazyTemplate: TemplateRef<any>;
 
   /**
    * Tab title
@@ -176,7 +180,7 @@ export class NbTabComponent {
   init: boolean = false;
 
   get showLazy(): boolean {
-    return !!this.lazyTemplate && this.active;
+    return !!this._lazyTemplate && this.active;
   }
 }
 

From 1aa9b6f3b45301956ef03f1ff9ea769e7ab949d2 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 14:29:54 +0300
Subject: [PATCH 17/25] fix(tabset): remove getter

---
 .../theme/components/tabset/tabset.component.ts        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index c9b2f50706..33c6f158c1 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -50,11 +50,7 @@ import { NB_LAZY_CONTENT } from './lazy-content';
   `,
 })
 export class NbTabComponent {
-  @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true })
-  get lazyTemplate(): TemplateRef<any> {
-    return this._lazyTemplate;
-  }
-  protected _lazyTemplate: TemplateRef<any>;
+  @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
 
   /**
    * Tab title
@@ -182,6 +178,10 @@ export class NbTabComponent {
   get showLazy(): boolean {
     return !!this._lazyTemplate && this.active;
   }
+
+  get lazyTemplate(): TemplateRef<any> {
+    return this._lazyTemplate;
+  }
 }
 
 // TODO: Combine tabset with route-tabset, so that we can:

From 8cbeedac48a17faf9a4f0c8bd81f2729542bae2a Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Thu, 11 Nov 2021 17:07:12 +0300
Subject: [PATCH 18/25] fix(tabset): add lazy content directive to public api

---
 src/framework/theme/public_api.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/framework/theme/public_api.ts b/src/framework/theme/public_api.ts
index fc023790a6..748e7c3cbc 100644
--- a/src/framework/theme/public_api.ts
+++ b/src/framework/theme/public_api.ts
@@ -80,6 +80,7 @@ export * from './components/tabset/tabset.module';
 export * from './components/datepicker/date-timepicker.component';
 export * from './components/datepicker/calendar-with-time.component';
 export * from './components/tabset/tabset.component';
+export * from './components/tabset/lazy-content';
 export * from './components/user/user.module';
 export * from './components/user/user.component';
 export * from './components/actions/actions.module';

From 27f58a00d681171b2fbd5d8b1a23e1993e1e7c00 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:12:35 +0300
Subject: [PATCH 19/25] refactor(tabset): rename lazy content directive

---
 .../theme/components/tabset/lazy-content.ts   | 14 ------
 .../tabset/tab-content.directive.ts           | 11 +++++
 .../components/tabset/tabset.component.ts     | 44 +++++++++----------
 .../theme/components/tabset/tabset.module.ts  | 29 +++---------
 src/framework/theme/public_api.ts             |  2 +-
 5 files changed, 41 insertions(+), 59 deletions(-)
 delete mode 100644 src/framework/theme/components/tabset/lazy-content.ts
 create mode 100644 src/framework/theme/components/tabset/tab-content.directive.ts

diff --git a/src/framework/theme/components/tabset/lazy-content.ts b/src/framework/theme/components/tabset/lazy-content.ts
deleted file mode 100644
index 009adae7fc..0000000000
--- a/src/framework/theme/components/tabset/lazy-content.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Directive, InjectionToken, TemplateRef } from '@angular/core';
-
-export const NB_LAZY_CONTENT = new InjectionToken<NbLazyContentDirective>('NbLazyContent');
-
-/** Decorates the `ng-template` tags and reads out the template from it. */
-@Directive({
-  selector: '[nbLazyContent]',
-  providers: [{ provide: NB_LAZY_CONTENT, useExisting: NbLazyContentDirective }],
-})
-export class NbLazyContentDirective {
-  constructor(
-    /** Content for the tab. */ public template: TemplateRef<any>) {
-  }
-}
diff --git a/src/framework/theme/components/tabset/tab-content.directive.ts b/src/framework/theme/components/tabset/tab-content.directive.ts
new file mode 100644
index 0000000000..33c3324b96
--- /dev/null
+++ b/src/framework/theme/components/tabset/tab-content.directive.ts
@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+/**
+ * Directive to wrap tab lazy content.
+ * */
+@Directive({
+  selector: '[nbTabContent]',
+})
+export class NbTabContentDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 4447fb5ae8..8d8866268e 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -24,7 +24,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentOrCustomStatus } from '../component-status';
 import { NbBadgePosition } from '../badge/badge.component';
 import { NbIconConfig } from '../icon/icon.component';
-import { NB_LAZY_CONTENT } from './lazy-content';
+import { NbTabContentDirective } from './tab-content.directive';
 
 /**
  * Specific tab container.
@@ -50,7 +50,7 @@ import { NB_LAZY_CONTENT } from './lazy-content';
   `,
 })
 export class NbTabComponent {
-  @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
+  @ContentChild(NbTabContentDirective, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
 
   /**
    * Tab title
@@ -288,25 +288,29 @@ export class NbTabComponent {
   styleUrls: ['./tabset.component.scss'],
   template: `
     <ul class="tabset">
-      <li *ngFor="let tab of tabs"
-          (click)="selectTab(tab)"
-          (keyup.space)="selectTab(tab)"
-          (keyup.enter)="selectTab(tab)"
-          [class.responsive]="tab.responsive"
-          [class.active]="tab.active"
-          [class.disabled]="tab.disabled"
-          [attr.tabindex]="tab.disabled ? -1 : 0"
-          [attr.data-tab-id]="tab.tabId"
-          class="tab">
+      <li
+        *ngFor="let tab of tabs"
+        (click)="selectTab(tab)"
+        (keyup.space)="selectTab(tab)"
+        (keyup.enter)="selectTab(tab)"
+        [class.responsive]="tab.responsive"
+        [class.active]="tab.active"
+        [class.disabled]="tab.disabled"
+        [attr.tabindex]="tab.disabled ? -1 : 0"
+        [attr.data-tab-id]="tab.tabId"
+        class="tab"
+      >
         <a href (click)="$event.preventDefault()" tabindex="-1" class="tab-link">
           <nb-icon *ngIf="tab.tabIcon" [config]="tab.tabIcon"></nb-icon>
           <span *ngIf="tab.tabTitle" class="tab-text">{{ tab.tabTitle }}</span>
         </a>
-        <nb-badge *ngIf="tab.badgeText || tab.badgeDot"
+        <nb-badge
+          *ngIf="tab.badgeText || tab.badgeDot"
           [text]="tab.badgeText"
           [dotMode]="tab.badgeDot"
           [status]="tab.badgeStatus"
-          [position]="tab.badgePosition">
+          [position]="tab.badgePosition"
+        >
         </nb-badge>
       </li>
     </ul>
@@ -314,7 +318,6 @@ export class NbTabComponent {
   `,
 })
 export class NbTabsetComponent implements AfterContentInit {
-
   @ContentChildren(NbTabComponent) tabs: QueryList<NbTabComponent>;
 
   @HostBinding('class.full-width')
@@ -342,17 +345,14 @@ export class NbTabsetComponent implements AfterContentInit {
    */
   @Output() changeTab = new EventEmitter<any>();
 
-  constructor(private route: ActivatedRoute,
-              private changeDetectorRef: ChangeDetectorRef) {
-  }
+  constructor(private route: ActivatedRoute, private changeDetectorRef: ChangeDetectorRef) {}
 
   // TODO: refactoring this component, avoid change detection loop
   ngAfterContentInit() {
     this.route.params
       .pipe(
-        map(
-          (params: any) =>
-            this.tabs.find((tab) => this.routeParam ? tab.route === params[this.routeParam] : tab.active),
+        map((params: any) =>
+          this.tabs.find((tab) => (this.routeParam ? tab.route === params[this.routeParam] : tab.active)),
         ),
         delay(0),
         map((tab: NbTabComponent) => tab || this.tabs.first),
@@ -367,7 +367,7 @@ export class NbTabsetComponent implements AfterContentInit {
   // TODO: navigate to routeParam
   selectTab(selectedTab: NbTabComponent) {
     if (!selectedTab.disabled) {
-      this.tabs.forEach(tab => tab.active = tab === selectedTab);
+      this.tabs.forEach((tab) => (tab.active = tab === selectedTab));
       this.changeTab.emit(selectedTab);
     }
   }
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index ca260555ae..f741380076 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -11,30 +11,15 @@ import { NbSharedModule } from '../shared/shared.module';
 import { NbTabsetComponent, NbTabComponent } from './tabset.component';
 import { NbBadgeModule } from '../badge/badge.module';
 import { NbIconModule } from '../icon/icon.module';
-import { NbLazyContentDirective } from './lazy-content';
+import { NbTabContentDirective } from './tab-content.directive';
 
-const NB_TABSET_COMPONENTS = [
-  NbTabsetComponent,
-  NbTabComponent,
-];
+const NB_TABSET_COMPONENTS = [NbTabsetComponent, NbTabComponent];
 
-const NB_TABSET_DIRECTIVES = [
-  NbLazyContentDirective,
-];
+const NB_TABSET_DIRECTIVES = [NbTabContentDirective];
 
 @NgModule({
-  imports: [
-    NbSharedModule,
-    NbBadgeModule,
-    NbIconModule,
-  ],
-  declarations: [
-    ...NB_TABSET_COMPONENTS,
-    ...NB_TABSET_DIRECTIVES,
-  ],
-  exports: [
-    ...NB_TABSET_COMPONENTS,
-    ...NB_TABSET_DIRECTIVES,
-  ],
+  imports: [NbSharedModule, NbBadgeModule, NbIconModule],
+  declarations: [...NB_TABSET_COMPONENTS, ...NB_TABSET_DIRECTIVES],
+  exports: [...NB_TABSET_COMPONENTS, ...NB_TABSET_DIRECTIVES],
 })
-export class NbTabsetModule { }
+export class NbTabsetModule {}
diff --git a/src/framework/theme/public_api.ts b/src/framework/theme/public_api.ts
index 748e7c3cbc..47b9896bf2 100644
--- a/src/framework/theme/public_api.ts
+++ b/src/framework/theme/public_api.ts
@@ -80,7 +80,7 @@ export * from './components/tabset/tabset.module';
 export * from './components/datepicker/date-timepicker.component';
 export * from './components/datepicker/calendar-with-time.component';
 export * from './components/tabset/tabset.component';
-export * from './components/tabset/lazy-content';
+export * from './components/tabset/tab-content.directive';
 export * from './components/user/user.module';
 export * from './components/user/user.component';
 export * from './components/actions/actions.module';

From feee75aa6d44b498a947bfac1c52d5e9536e9943 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:14:17 +0300
Subject: [PATCH 20/25] style(tabset): remove redundant comment

---
 src/framework/theme/components/tabset/tabset.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 8d8866268e..e0dbeb8f20 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -141,7 +141,6 @@ export class NbTabComponent {
 
   /**
    * Lazy load content before tab selection
-   * TODO: rename, as lazy is by default, and this is more `instant load`
    * @param {boolean} val
    * @deprecated To be turned into a <ng-template nbLazyContent>
    */

From 4810ac1f070606eb488ebd3695b6e1eb4bf74763 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:17:09 +0300
Subject: [PATCH 21/25] style(tabset): update deprecation comments

---
 src/framework/theme/components/tabset/tabset.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index e0dbeb8f20..7c7aac899d 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -142,7 +142,8 @@ export class NbTabComponent {
   /**
    * Lazy load content before tab selection
    * @param {boolean} val
-   * @deprecated To be turned into a <ng-template nbLazyContent>
+   * @deprecated This setting never worked. Wrap content into a `nbTabContent` to make it lazy.
+   * @breaking-change Remove 10.0.0
    */
   @Input()
   set lazyLoad(val: boolean) {
@@ -173,7 +174,8 @@ export class NbTabComponent {
   @Input() badgePosition: NbBadgePosition;
 
   /**
-   * @deprecated To be turned into a active property
+   * @deprecated
+   * @breaking-change Remove 10.0.0
    * @type boolean
    */
   init: boolean = false;

From 1727213cb1bd609e52a9bbf861c1c582236bf1e3 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:27:31 +0300
Subject: [PATCH 22/25] refactor(tabset): remove redundant accessors

---
 .../components/tabset/tab-content.directive.ts  |  2 +-
 .../theme/components/tabset/tabset.component.ts | 17 ++++-------------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/framework/theme/components/tabset/tab-content.directive.ts b/src/framework/theme/components/tabset/tab-content.directive.ts
index 33c3324b96..2227d284ae 100644
--- a/src/framework/theme/components/tabset/tab-content.directive.ts
+++ b/src/framework/theme/components/tabset/tab-content.directive.ts
@@ -7,5 +7,5 @@ import { Directive, TemplateRef } from '@angular/core';
   selector: '[nbTabContent]',
 })
 export class NbTabContentDirective {
-  constructor(public template: TemplateRef<any>) {}
+  constructor(public templateRef: TemplateRef<any>) {}
 }
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 7c7aac899d..39b6acaff5 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -16,7 +16,6 @@ import {
   HostBinding,
   ChangeDetectorRef,
   ContentChild,
-  TemplateRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -40,17 +39,17 @@ import { NbTabContentDirective } from './tab-content.directive';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-container *ngIf="showLazy; else notLazy">
-      <ng-container *ngTemplateOutlet="lazyTemplate"></ng-container>
+    <ng-container *ngIf="tabContentDirective; else projectedContent">
+      <ng-container *ngTemplateOutlet="tabContentDirective.templateRef"></ng-container>
     </ng-container>
 
-    <ng-template #notLazy>
+    <ng-template #projectedContent>
       <ng-content></ng-content>
     </ng-template>
   `,
 })
 export class NbTabComponent {
-  @ContentChild(NbTabContentDirective, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
+  @ContentChild(NbTabContentDirective) tabContentDirective: NbTabContentDirective;
 
   /**
    * Tab title
@@ -179,14 +178,6 @@ export class NbTabComponent {
    * @type boolean
    */
   init: boolean = false;
-
-  get showLazy(): boolean {
-    return !!this._lazyTemplate && this.active;
-  }
-
-  get lazyTemplate(): TemplateRef<any> {
-    return this._lazyTemplate;
-  }
 }
 
 // TODO: Combine tabset with route-tabset, so that we can:

From 90631dcf48687067fc211710465d603a5e798431 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:28:10 +0300
Subject: [PATCH 23/25] refactor(tabset): use a single ng-container

---
 src/framework/theme/components/tabset/tabset.component.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 39b6acaff5..a57e61f558 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -39,9 +39,10 @@ import { NbTabContentDirective } from './tab-content.directive';
 @Component({
   selector: 'nb-tab',
   template: `
-    <ng-container *ngIf="tabContentDirective; else projectedContent">
-      <ng-container *ngTemplateOutlet="tabContentDirective.templateRef"></ng-container>
-    </ng-container>
+    <ng-container
+      *ngIf="tabContentDirective; else projectedContent"
+      [ngTemplateOutlet]="tabContentDirective.templateRef"
+    ></ng-container>
 
     <ng-template #projectedContent>
       <ng-content></ng-content>

From 0f4b2d5b3a6df942949d7aa8c1f91e57039b4420 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 15 Nov 2021 12:00:15 +0300
Subject: [PATCH 24/25] docs(tabset): hide deprecated properties

---
 src/framework/theme/components/tabset/tabset.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index a57e61f558..3f299a11ef 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -34,7 +34,7 @@ import { NbTabContentDirective } from './tab-content.directive';
  *   badgeStatus="danger">
  *   <p>List of <strong>users</strong>.</p>
  * </nb-tab>
- ```
+ * ```
  */
 @Component({
   selector: 'nb-tab',
@@ -141,7 +141,7 @@ export class NbTabComponent {
 
   /**
    * Lazy load content before tab selection
-   * @param {boolean} val
+   * @docs-private
    * @deprecated This setting never worked. Wrap content into a `nbTabContent` to make it lazy.
    * @breaking-change Remove 10.0.0
    */
@@ -176,7 +176,7 @@ export class NbTabComponent {
   /**
    * @deprecated
    * @breaking-change Remove 10.0.0
-   * @type boolean
+   * @docs-private
    */
   init: boolean = false;
 }

From a24162875482ca363cf1acf2b5d859c6aa741a3a Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 15 Nov 2021 12:27:33 +0300
Subject: [PATCH 25/25] docs(tabset): add nbTabContent usage example

---
 .../theme/components/tabset/tabset.component.ts  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 3f299a11ef..b22b9c91a1 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -228,12 +228,26 @@ export class NbTabComponent {
  * (`tabset-tab-text-hide-breakpoint` property) for better responsive behaviour.
  * You can open the following example and make
  * your screen smaller - titles will be hidden in the last tabset in the list:
- *
  * @stacked-example(Icon, tabset/tabset-icon.component)
  *
  * It is also possible to disable a tab using `disabled` property:
  * @stacked-example(Disabled Tab, tabset/tabset-disabled.component)
  *
+ * By default, the tab contents instantiated straightaway. To make tab contents load lazy,
+ * declare the body of a tab in a template with `nbTabContent` directive.
+ * ```html
+ * <nb-tabset>
+ *   <nb-tab>
+ *     <some-component *nbTabContent>Lazy content</some-component>
+ *   </nb-tab>
+ *   <nb-tab>
+ *     <ng-template nbTabContent>
+ *       Lazy content with template syntax
+ *     </ng-template>
+ *   </nb-tab>
+ * </nb-tabset>
+ * ```
+ *
  * @styles
  *
  * tabset-background-color: