fix(tabset): lazy loading

[evtkhvch]

Please read and mark the following check list before creating a pull request:

• I read and followed the CONTRIBUTING.md guide.
• I read and followed the New Feature Checklist guide.

Short description of what this resolves:

Closes #1827
Closes #1820

• add nbTabContent directive
• lazyLoad property in NbTabComponent is deprecated
• init property in NbTabComponent is deprecated

how to use:

<nb-tab tabTitle="title">
  <ng-template nbTabContent>
    ...content
  </ng-template>
</nb-tab>

[ghost]

@yggg @evtkhvch Maybe I misunderstood, but the example still doesn't work for me.

      <nb-tabset fullWidth>
        <nb-tab tabTitle="Allgemein" i18n-label="@@contractorEditDetailTabLabel" [active]='true'>
          <ng-template nbTabContent>
            {{ getPartialState$('details') | async | json }}
          </ng-template>
        </nb-tab>
        <nb-tab tabTitle="Logs" i18n-label="@@contractorEditLogTabLabel">
          <ng-template nbTabContent>
            {{ getPartialState$('logs') | async | json }}
          </ng-template>
        </nb-tab>
      </nb-tabset>

Will still resolve both observables :/

[mikejobson]

This doesn't work for me either. All the the content in the individual components gets loaded when the whole tabset does

<nb-tabset>
  <nb-tab tabIcon="monitor-outline" tabTitle="Video Routing">
    <app-video-routing *nbTabContent></app-video-routing>
  </nb-tab>
  <nb-tab tabIcon="mic-outline" tabTitle="Mics">
    <app-mic-levels *nbTabContent></app-mic-levels>
  </nb-tab>
  <nb-tab tabIcon="settings-outline" tabTitle="Settings">
    <app-settings *nbTabContent></app-settings>
  </nb-tab>
</nb-tabset>

[ghost]

@mikejobson Hey Mike

I've been using this little directive I wrote for my application. https://gist.github.com/Liberatys/75caba5a8b5c5ef010289fe86f7fa828 maybe it helps you as well.

[mikejobson]

@Liberatys thankyou. That worked a treat!

[ghost]

@mikejobson I think this should solve our problem :D #3049

[vanavaraVL]

@Liberatys , thanks! This directive helped us too!

[ghost]

@vanavaraVL No worries! If nebular merges my open pr you can also use the nebular provided directive ^^ Less code for you to maintain in your project.