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..2227d284ae --- /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 templateRef: TemplateRef) {} +} diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts index ea141a59ef..b22b9c91a1 100644 --- a/src/framework/theme/components/tabset/tabset.component.ts +++ b/src/framework/theme/components/tabset/tabset.component.ts @@ -15,6 +15,7 @@ import { AfterContentInit, HostBinding, ChangeDetectorRef, + ContentChild, } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @@ -22,6 +23,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers'; import { NbComponentOrCustomStatus } from '../component-status'; import { NbBadgePosition } from '../badge/badge.component'; import { NbIconConfig } from '../icon/icon.component'; +import { NbTabContentDirective } from './tab-content.directive'; /** * Specific tab container. @@ -32,17 +34,23 @@ import { NbIconConfig } from '../icon/icon.component'; * badgeStatus="danger"> *

List of users.

* - ``` + * ``` */ @Component({ selector: 'nb-tab', template: ` - + + + - + `, }) export class NbTabComponent { + @ContentChild(NbTabContentDirective) tabContentDirective: NbTabContentDirective; /** * Tab title @@ -133,8 +141,9 @@ 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 + * @docs-private + * @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) { @@ -164,6 +173,11 @@ export class NbTabComponent { */ @Input() badgePosition: NbBadgePosition; + /** + * @deprecated + * @breaking-change Remove 10.0.0 + * @docs-private + */ init: boolean = false; } @@ -214,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 + * + * + * Lazy content + * + * + * + * Lazy content with template syntax + * + * + * + * ``` + * * @styles * * tabset-background-color: @@ -267,25 +295,29 @@ export class NbTabComponent { styleUrls: ['./tabset.component.scss'], template: ` @@ -293,7 +325,6 @@ export class NbTabComponent { `, }) export class NbTabsetComponent implements AfterContentInit { - @ContentChildren(NbTabComponent) tabs: QueryList; @HostBinding('class.full-width') @@ -321,17 +352,14 @@ export class NbTabsetComponent implements AfterContentInit { */ @Output() changeTab = new EventEmitter(); - 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), @@ -346,7 +374,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 b79b02382d..f741380076 100644 --- a/src/framework/theme/components/tabset/tabset.module.ts +++ b/src/framework/theme/components/tabset/tabset.module.ts @@ -11,23 +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 { NbTabContentDirective } from './tab-content.directive'; -const NB_TABSET_COMPONENTS = [ - NbTabsetComponent, - NbTabComponent, -]; +const NB_TABSET_COMPONENTS = [NbTabsetComponent, NbTabComponent]; + +const NB_TABSET_DIRECTIVES = [NbTabContentDirective]; @NgModule({ - imports: [ - NbSharedModule, - NbBadgeModule, - NbIconModule, - ], - declarations: [ - ...NB_TABSET_COMPONENTS, - ], - exports: [ - ...NB_TABSET_COMPONENTS, - ], + 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 fc023790a6..47b9896bf2 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/tab-content.directive'; export * from './components/user/user.module'; export * from './components/user/user.component'; export * from './components/actions/actions.module';