@nebular/theme

@nebular/theme

Version 15.0.0
Published 2 months ago
6.72 MB
1 dependency
MIT license

Install

npm i @nebular/theme

yarn add @nebular/theme

pnpm add @nebular/theme

Overview

@nebular/theme

Index

Variables

variable BUILT_IN_THEMES

const BUILT_IN_THEMES: NbJSThemeOptions[];

variable CORPORATE_THEME

const CORPORATE_THEME: NbJSThemeOptions;

variable COSMIC_THEME

const COSMIC_THEME: NbJSThemeOptions;

variable DARK_THEME

const DARK_THEME: NbJSThemeOptions;

variable DEFAULT_MEDIA_BREAKPOINTS

const DEFAULT_MEDIA_BREAKPOINTS: { name: string; width: number }[];

variable DEFAULT_THEME

const DEFAULT_THEME: NbJSThemeOptions;

variable MONTHS_IN_COLUMN

const MONTHS_IN_COLUMN: number;

variable MONTHS_IN_VIEW

const MONTHS_IN_VIEW: number;

variable NB_BUILT_IN_JS_THEMES

const NB_BUILT_IN_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;

variable NB_BUTTON_GROUP

const NB_BUTTON_GROUP: InjectionToken<NbButtonGroupComponent>;

variable NB_COALESCED_STYLE_SCHEDULER

const NB_COALESCED_STYLE_SCHEDULER: any;

variable NB_DATE_ADAPTER

const NB_DATE_ADAPTER: InjectionToken<NbDatepickerAdapter<any>>;

variable NB_DATE_SERVICE_OPTIONS

const NB_DATE_SERVICE_OPTIONS: InjectionToken<unknown>;

variable NB_DEFAULT_ROW_LEVEL

const NB_DEFAULT_ROW_LEVEL: number;

variable NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG

const NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG: NbTimepickerLocalizationConfig;

variable NB_DIALOG_CONFIG

const NB_DIALOG_CONFIG: InjectionToken<NbDialogConfig<any>>;

variable NB_DOCUMENT

const NB_DOCUMENT: InjectionToken<Document>;

variable NB_JS_THEMES

const NB_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;

variable NB_LAYOUT_DIRECTION

const NB_LAYOUT_DIRECTION: InjectionToken<NbLayoutDirection>;

Layout direction setting injection token.

variable NB_MEDIA_BREAKPOINTS

const NB_MEDIA_BREAKPOINTS: InjectionToken<NbMediaBreakpoint[]>;

variable NB_ROW_DOUBLE_CLICK_DELAY

const NB_ROW_DOUBLE_CLICK_DELAY: number;

variable NB_SELECT_INJECTION_TOKEN

const NB_SELECT_INJECTION_TOKEN: InjectionToken<unknown>;

variable NB_SORT_HEADER_COLUMN_DEF

const NB_SORT_HEADER_COLUMN_DEF: InjectionToken<unknown>;

variable NB_STEPPER

const NB_STEPPER: InjectionToken<unknown>;

variable NB_TABLE_PROVIDERS

const NB_TABLE_PROVIDERS: Provider[];

variable NB_TABLE_TEMPLATE

const NB_TABLE_TEMPLATE: string;

variable NB_THEME_OPTIONS

const NB_THEME_OPTIONS: InjectionToken<NbThemeOptions>;

variable NB_TIME_PICKER_CONFIG

const NB_TIME_PICKER_CONFIG: InjectionToken<unknown>;

variable NB_TOASTR_CONFIG

const NB_TOASTR_CONFIG: InjectionToken<NbToastrConfig>;

variable NB_TREE_GRID

const NB_TREE_GRID: InjectionToken<unknown>;

variable NB_VIEW_REPEATER_STRATEGY

const NB_VIEW_REPEATER_STRATEGY: any;

variable NB_WINDOW

const NB_WINDOW: InjectionToken<Window>;

We're providing browser apis with tokens to improve testing capabilities.

variable NB_WINDOW_CONFIG

const NB_WINDOW_CONFIG: InjectionToken<NbWindowConfig>;

variable NB_WINDOW_CONTENT

const NB_WINDOW_CONTENT: InjectionToken<any>;

variable NB_WINDOW_CONTEXT

const NB_WINDOW_CONTEXT: InjectionToken<Object>;

variable NB_WINDOW_DEFAULT_BUTTONS_CONFIG

const NB_WINDOW_DEFAULT_BUTTONS_CONFIG: NbWindowControlButtonsConfig;

Functions

function createContainer

createContainer: <T>(
    ref: OverlayRef,
    container: ComponentType<T>,
    context: Object,
    componentFactoryResolver?: ComponentFactoryResolver
) => ComponentRef<T>;

function nbSelectFormFieldControlConfigFactory

nbSelectFormFieldControlConfigFactory: () => NbFormFieldControlConfig;

function patch

patch: <T>(
    container: ComponentRef<T>,
    containerContext: Object
) => ComponentRef<T>;

function windowFactory

windowFactory: (platformId: Object) => Window | undefined;

Classes

class NbA11yModule

class NbA11yModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbA11yModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbA11yModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<NbA11yModule, never, never, never>;

method forRoot

static forRoot: () => ModuleWithProviders<NbA11yModule>;

class NbAccordionComponent

class NbAccordionComponent {}

An accordion allows to toggle the display of sections of content
Basic example @stacked-example(Showcase, accordion/accordion-showcase.component)
<nb-accordion> <nb-accordion-item> <nb-accordion-item-header>Product Details</nb-accordion-item-header> <nb-accordion-item-body> Item Content </nb-accordion-item-body> </nb-accordion-item> </nb-accordion>
### Installation
Import NbAccordionModule to your feature module.
@NgModule({ imports: [ // ... NbAccordionModule, ], }) export class PageModule { }
### Usage
With multi mode accordion can have multiple items expanded: @stacked-example(Multiple expanded items, accordion/accordion-multi.component)
NbAccordionItemComponent has several methods, for example it is possible to trigger item click/toggle: @stacked-example(Expand API, accordion/accordion-toggle.component)
accordion-border-radius: accordion-padding: accordion-shadow: accordion-header-text-color: accordion-header-text-font-family: accordion-header-text-font-size: accordion-header-text-font-weight: accordion-header-text-line-height: accordion-header-disabled-text-color: accordion-header-border-color: accordion-header-border-style: accordion-header-border-width: accordion-item-background-color: accordion-item-text-color: accordion-item-text-font-family: accordion-item-text-font-size: accordion-item-text-font-weight: accordion-item-text-line-height:

property multi

multi: boolean;

Allow multiple items to be expanded at the same time. {boolean}

property ngAcceptInputType_multi

static ngAcceptInputType_multi: NbBooleanInput;

property openCloseItems

openCloseItems: Subject<boolean>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbAccordionComponent,
    'nb-accordion',
    never,
    { multi: { alias: 'multi'; required: false } },
    {},
    never,
    ['nb-accordion-item'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAccordionComponent, never>;

method closeAll

closeAll: () => void;

Closes all enabled accordion items.

method openAll

openAll: () => void;

Opens all enabled accordion items.

class NbAccordionItemBodyComponent

class NbAccordionItemBodyComponent implements OnInit, OnDestroy {}

Component intended to be used within <nb-accordion-item> component

constructor

constructor(accordionItem: NbAccordionItemComponent, cd: ChangeDetectorRef);

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbAccordionItemBodyComponent,
    'nb-accordion-item-body',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbAccordionItemBodyComponent,
    [{ host: true }, null]
>;

property state

readonly state: string;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbAccordionItemComponent

class NbAccordionItemComponent implements OnInit, OnChanges, OnDestroy {}

Component intended to be used within <nb-accordion> component

constructor

constructor(accordion: NbAccordionComponent, cd: ChangeDetectorRef);

property accordionItemInvalidate

accordionItemInvalidate: Subject<boolean>;

property collapsed

collapsed: boolean;

Item is collapse (true by default) {boolean}

property collapsedChange

collapsedChange: EventEmitter<boolean>;

Emits whenever the expanded state of the accordion changes. Primarily used to facilitate two-way binding.

property disabled

disabled: boolean;

Item is disabled and cannot be opened. {boolean}

property expanded

expanded: boolean;

Item is expanded (false by default) {boolean}

property ngAcceptInputType_collapsed

static ngAcceptInputType_collapsed: NbBooleanInput;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_expanded

static ngAcceptInputType_expanded: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbAccordionItemComponent,
    'nb-accordion-item',
    never,
    {
        collapsed: { alias: 'collapsed'; required: false };
        expanded: { alias: 'expanded'; required: false };
        disabled: { alias: 'disabled'; required: false };
    },
    { collapsedChange: 'collapsedChange' },
    never,
    ['nb-accordion-item-header', 'nb-accordion-item-body'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbAccordionItemComponent,
    [{ host: true }, null]
>;

method close

close: () => void;

Collapse the item.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method open

open: () => void;

Open the item.

method toggle

toggle: () => void;

Open/close the item

class NbAccordionItemHeaderComponent

class NbAccordionItemHeaderComponent implements OnInit, OnDestroy {}

Component intended to be used within <nb-accordion-item> component

constructor

constructor(accordionItem: NbAccordionItemComponent, cd: ChangeDetectorRef);

property disabled

readonly disabled: boolean;

property expanded

readonly expanded: boolean;

property isCollapsed

readonly isCollapsed: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbAccordionItemHeaderComponent,
    'nb-accordion-item-header',
    never,
    {},
    {},
    never,
    ['nb-accordion-item-title', 'nb-accordion-item-description', '*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbAccordionItemHeaderComponent,
    [{ host: true }, null]
>;

property state

readonly state: string;

property tabbable

readonly tabbable: string;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method toggle

toggle: () => void;

class NbAccordionModule

class NbAccordionModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAccordionModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbAccordionModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbAccordionModule,
    [
        typeof i1.NbAccordionComponent,
        typeof i2.NbAccordionItemComponent,
        typeof i3.NbAccordionItemHeaderComponent,
        typeof i4.NbAccordionItemBodyComponent
    ],
    [any, typeof i6.NbIconModule],
    [
        typeof i1.NbAccordionComponent,
        typeof i2.NbAccordionItemComponent,
        typeof i3.NbAccordionItemHeaderComponent,
        typeof i4.NbAccordionItemBodyComponent
    ]
>;

class NbActionComponent

class NbActionComponent {}

Action item, display a link with an icon, or any other content provided instead.

property badgeDot

badgeDot: boolean;

Use badge dot mode boolean

property badgePosition

badgePosition: NbBadgePosition;

Badge position. Can be set to any class or to one of predefined positions: 'top left', 'top right', 'bottom left', 'bottom right', 'top start', 'top end', 'bottom start', 'bottom end' string

property badgeStatus

badgeStatus: string;

Badge status (adds specific styles): 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
Parameter val

property badgeText

badgeText: string;

Badge text to display string

property disabled

disabled: boolean;

Visually disables the item boolean

property href

href: string;

Regular HREF link @type: string

property icon

icon: string | NbIconConfig;

Icon name or config object {string | NbIconConfig}

property link

link: string;

Router link to use string

property ngAcceptInputType_badgeDot

static ngAcceptInputType_badgeDot: NbBooleanInput;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbActionComponent,
    'nb-action',
    never,
    {
        link: { alias: 'link'; required: false };
        href: { alias: 'href'; required: false };
        title: { alias: 'title'; required: false };
        icon: { alias: 'icon'; required: false };
        disabled: { alias: 'disabled'; required: false };
        badgeDot: { alias: 'badgeDot'; required: false };
        badgeText: { alias: 'badgeText'; required: false };
        badgeStatus: { alias: 'badgeStatus'; required: false };
        badgePosition: { alias: 'badgePosition'; required: false };
    },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbActionComponent, never>;

property title

title: string;

Optional title for mouseover string

class NbActionsComponent

class NbActionsComponent {}

Shows a horizontal list of actions, available in multiple sizes. Aligns items vertically.
@stacked-example(Showcase, action/action-showcase.component)
Basic actions setup:
<nb-actions size="small"> <nb-action icon="nb-search"></nb-action> <nb-action icon="nb-power-circled"></nb-action> <nb-action icon="nb-person"></nb-action> </nb-actions>
### Installation
Import NbActionsModule to your feature module.
@NgModule({ imports: [ // ... NbActionsModule, ], }) export class PageModule { }
### Usage
Multiple sizes example: @stacked-example(Multiple Sizes, action/action-sizes.component)
It is also possible to specify a badge value:
@stacked-example(Action Badge, action/action-badge.component)
and we can set it to full a width of a parent component @stacked-example(Full Width, action/action-width.component)
Action dot mode @stacked-example(Action badge in dot mode, action/action-dot-mode.component)
actions-background-color: actions-divider-color: actions-divider-style: actions-divider-width: actions-icon-color: actions-text-color: actions-text-font-family: actions-text-font-weight: actions-text-line-height: actions-disabled-icon-color: actions-disabled-text-color: actions-tiny-height: actions-tiny-icon-height: actions-tiny-padding: actions-tiny-text-font-size: actions-small-height: actions-small-icon-height: actions-small-padding: actions-small-text-font-size: actions-medium-height: actions-medium-icon-height: actions-medium-padding: actions-medium-text-font-size: actions-large-height: actions-large-icon-height: actions-large-padding: actions-large-text-font-size: actions-giant-height: actions-giant-icon-height: actions-giant-padding: actions-giant-text-font-size:

property fullWidth

fullWidth: boolean;

Component will fill full width of the container

property giant

readonly giant: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbActionsComponent,
    'nb-actions',
    never,
    {
        size: { alias: 'size'; required: false };
        fullWidth: { alias: 'fullWidth'; required: false };
    },
    {},
    never,
    ['nb-action'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbActionsComponent, never>;

property size

size: NbComponentSize;

Size of the component: 'tiny', 'small' (default), 'medium', 'large', 'giant'

property small

readonly small: boolean;

property tiny

readonly tiny: boolean;

class NbActionsModule

class NbActionsModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbActionsModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbActionsModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbActionsModule,
    [typeof i1.NbActionComponent, typeof i1.NbActionsComponent],
    [typeof i2.NbSharedModule, typeof i3.NbBadgeModule, typeof i4.NbIconModule],
    [typeof i1.NbActionComponent, typeof i1.NbActionsComponent]
>;

class NbAdjustableConnectedPositionStrategy

class NbAdjustableConnectedPositionStrategy
    extends NbFlexibleConnectedPositionStrategy
    implements NbPositionStrategy {}

The main idea of the adjustable connected strategy is to provide predefined set of positions for your overlay. You have to provide adjustment and appropriate strategy will be chosen in runtime.

property appliedPositions

protected appliedPositions: {
    key: NbPosition;
    connectedPosition: ConnectedPosition;
}[];

property positionChange

readonly positionChange: Observable<NbPosition>;

method adjustment

adjustment: (adjustment: NbAdjustment) => this;

method apply

apply: () => void;

method applyPositions

protected applyPositions: () => void;

method attach

attach: (overlayRef: OverlayRef) => void;

method createPositions

protected createPositions: () => NbPosition[];

method direction

direction: (direction: NbLayoutDirection) => this;

method mapToLogicalPosition

protected mapToLogicalPosition: (position: NbPosition) => NbPosition;

method offset

offset: (offset: number) => this;

method persistChosenPositions

protected persistChosenPositions: (positions: NbPosition[]) => void;

method position

position: (position: NbPosition) => this;

method reorderPreferredPositions

protected reorderPreferredPositions: (positions: NbPosition[]) => NbPosition[];

class NbAlertComponent

class NbAlertComponent {}

Alert component.
Basic alert example: @stacked-example(Showcase, alert/alert-showcase.component)
Alert configuration:
<nb-alert status="success"> You have been successfully authenticated! </nb-alert>
### Installation
Import NbAlertModule to your feature module.
@NgModule({ imports: [ // ... NbAlertModule, ], }) export class PageModule { }
### Usage
Alert could additionally have a close button when closable property is set:
<nb-alert status="success" closable (close)="onClose()"> You have been successfully authenticated! </nb-alert>
Colored alerts could be simply configured by providing a status property: @stacked-example(Alert status, alert/alert-colors.component)
It is also possible to assign an accent property for a slight alert highlight as well as combine it with status: @stacked-example(Alert accent, alert/alert-accents.component)
And outline property: @stacked-example(Outline Alert, alert/alert-outline.component)
@additional-example(Multiple Sizes, alert/alert-sizes.component)
alert-border-radius: alert-bottom-margin: alert-padding: alert-scrollbar-color: alert-scrollbar-background-color: alert-scrollbar-width: alert-shadow: alert-text-font-family: alert-text-font-size: alert-text-font-weight: alert-text-line-height: alert-closable-start-padding: alert-tiny-height: alert-small-height: alert-medium-height: alert-medium-padding: alert-large-height: alert-giant-height: alert-basic-background-color: alert-basic-text-color: alert-primary-background-color: alert-primary-text-color: alert-success-background-color: alert-success-text-color: alert-info-background-color: alert-info-text-color: alert-warning-background-color: alert-warning-text-color: alert-danger-background-color: alert-danger-text-color: alert-control-background-color: alert-control-text-color: alert-accent-basic-color: alert-accent-primary-color: alert-accent-info-color: alert-accent-success-color: alert-accent-warning-color: alert-accent-danger-color: alert-accent-control-color: alert-outline-width: alert-outline-basic-color: alert-outline-primary-color: alert-outline-info-color: alert-outline-success-color: alert-outline-warning-color: alert-outline-danger-color: alert-outline-control-color:

constructor

constructor(statusService: NbStatusService);

property accent

accent: '' | NbComponentStatus;

Alert accent (color of the top border): basic, primary, success, info, warning, danger, control. Unset by default.

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property basicAccent

readonly basicAccent: boolean;

property basicOutline

readonly basicOutline: boolean;

property closable

closable: boolean;

Shows close icon

property close

close: EventEmitter<any>;

Emits when chip is removed EventEmitter

property control

readonly control: boolean;

property controlAccent

readonly controlAccent: boolean;

property controlOutline

readonly controlOutline: boolean;

property danger

readonly danger: boolean;

property dangerAccent

readonly dangerAccent: boolean;

property dangerOutline

readonly dangerOutline: boolean;

property giant

readonly giant: boolean;

property info

readonly info: boolean;

property infoAccent

readonly infoAccent: boolean;

property infoOutline

readonly infoOutline: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ngAcceptInputType_closable

static ngAcceptInputType_closable: NbBooleanInput;

property outline

outline: '' | NbComponentStatus;

Alert outline (color of the border): basic, primary, success, info, warning, danger, control. Unset by default.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbAlertComponent,
    'nb-alert',
    never,
    {
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        accent: { alias: 'accent'; required: false };
        outline: { alias: 'outline'; required: false };
        closable: { alias: 'closable'; required: false };
    },
    { close: 'close' },
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAlertComponent, never>;

property primary

readonly primary: boolean;

property primaryAccent

readonly primaryAccent: boolean;

property primaryOutline

readonly primaryOutline: boolean;

property size

size: '' | NbComponentSize;

Alert size, available sizes: tiny, small, medium, large, giant Unset by default.

property small

readonly small: boolean;

property status

status: string;

Alert status (adds specific styles): basic (default), primary, success, info, warning, danger, control.

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property successAccent

readonly successAccent: boolean;

property successOutline

readonly successOutline: boolean;

property tiny

readonly tiny: boolean;

property warning

readonly warning: boolean;

property warningAccent

readonly warningAccent: boolean;

property warningOutline

readonly warningOutline: boolean;

method onClose

onClose: () => void;

Emits the removed chip event

class NbAlertModule

class NbAlertModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAlertModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbAlertModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbAlertModule,
    [typeof i1.NbAlertComponent],
    [typeof i2.NbSharedModule],
    [typeof i1.NbAlertComponent]
>;

class NbAutocompleteComponent

class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {}

The NbAutocompleteComponent overlay component. Provides an NbOptionList overlay component.

constructor

constructor(cd: ChangeDetectorRef);

property activeFirst

activeFirst: boolean;

Flag passed as input to always make first option active.

property cd

protected cd: ChangeDetectorRef;

property destroy$

protected destroy$: Subject<void>;

property giant

readonly giant: boolean;

property handleDisplayFn

handleDisplayFn: (value: any) => string;

Function passed as input to process each string option value before render.

property hostRef

hostRef: ElementRef;

HTML input reference to which autocomplete connected.

property hostWidth

readonly hostWidth: number;

Returns width of the input.

property id

id: string;

Component scoped id for aria attributes.

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property options

options: QueryList<NbOptionComponent<T>>;

List of NbOptionComponent's components passed as content.

property optionsListClass

optionsListClass: NgClass;

Specifies class to be set on nb-options container (nb-option-list)

property optionsPanelClass

optionsPanelClass: string | string[];

Specifies class for the overlay panel with options

property optionsWidth

optionsWidth: number;

Specifies width (in pixels) to be set on nb-options container (nb-option-list)

property overlayPosition

overlayPosition: NbPosition;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbAutocompleteComponent<any>,
    'nb-autocomplete',
    never,
    {
        handleDisplayFn: { alias: 'handleDisplayFn'; required: false };
        size: { alias: 'size'; required: false };
        activeFirst: { alias: 'activeFirst'; required: false };
        optionsListClass: { alias: 'optionsListClass'; required: false };
        optionsPanelClass: { alias: 'optionsPanelClass'; required: false };
        optionsWidth: { alias: 'optionsWidth'; required: false };
    },
    { selectedChange: 'selectedChange' },
    ['options'],
    ['nb-option, nb-option-group'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAutocompleteComponent<any>, never>;

property portal

portal: NbPortalDirective;

NbOptionList with options content.

property selectedChange

selectedChange: EventEmitter<T>;

Will be emitted when selected value changes.

property size

size: NbComponentSize;

Autocomplete size, available sizes: tiny, small, medium (default), large, giant

property small

readonly small: boolean;

property tiny

readonly tiny: boolean;

method emitSelected

emitSelected: (selected: T) => void;

Propagate selected value.

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method setHost

setHost: (hostRef: ElementRef) => void;

Autocomplete knows nothing about host html input element. So, attach method set input hostRef for styling.

class NbAutocompleteDirective

class NbAutocompleteDirective<T>
    implements OnDestroy, AfterViewInit, ControlValueAccessor {}

The NbAutocompleteDirective provides a capability to expand input with NbAutocompleteComponent overlay containing options to select and fill input with.
@stacked-example(Showcase, autocomplete/autocomplete-showcase.component)
### Installation
Import NbAutocompleteModule to your feature module.
@NgModule({ imports: [ // ... NbAutocompleteModule, ], }) export class PageModule { }
### Usage
You can bind control with form controls or ngModel.
@stacked-example(Autocomplete form binding, autocomplete/autocomplete-form.component)
Options in the autocomplete may be grouped using nb-option-group component.
@stacked-example(Grouping, autocomplete/autocomplete-group.component)
Autocomplete may change selected option value via provided function.
@stacked-example(Custom display, autocomplete/autocomplete-custom-display.component)
Also, autocomplete may make first option in option list active automatically.
@stacked-example(Active first, autocomplete/autocomplete-active-first.component)

constructor

constructor(
    hostRef: ElementRef,
    overlay: NbOverlayService,
    cd: ChangeDetectorRef,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    positionBuilder: NbPositionBuilderService,
    activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService<
        NbOptionComponent<T>
    >,
    renderer: Renderer2
);

property activeDescendantKeyManagerFactory

protected activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService<
    NbOptionComponent<T>
>;

property ariaActiveDescendant

readonly ariaActiveDescendant: string;

property ariaAutocomplete

ariaAutocomplete: string;

property ariaExpanded

readonly ariaExpanded: string;

property ariaOwns

readonly ariaOwns: string;

property autocomplete

autocomplete: NbAutocompleteComponent<T>;

Provides autocomplete component.

property bottom

readonly bottom: boolean;

property cd

protected cd: ChangeDetectorRef;

property customOverlayHost

customOverlayHost: ElementRef;

property destroy$

protected destroy$: Subject<void>;

property hasPopup

hasPopup: string;

property hostRef

protected hostRef: ElementRef;

property isClosed

readonly isClosed: boolean;

Determines is autocomplete overlay closed.

property isOpen

readonly isOpen: boolean;

Determines is autocomplete overlay opened.

property keyManager

protected keyManager: NbActiveDescendantKeyManager<NbOptionComponent<T>>;

property overlay

protected overlay: NbOverlayService;

property overlayOffset

overlayOffset: number;

Determines options overlay offset (in pixels).

property overlayRef

protected overlayRef: OverlayRef;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbAutocompleteDirective<any>,
    'input[nbAutocomplete]',
    never,
    {
        autocomplete: { alias: 'nbAutocomplete'; required: false };
        overlayOffset: { alias: 'overlayOffset'; required: false };
        scrollStrategy: { alias: 'scrollStrategy'; required: false };
        customOverlayHost: { alias: 'customOverlayHost'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAutocompleteDirective<any>, never>;

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

property positionStrategy

protected positionStrategy: NbAdjustableConnectedPositionStrategy;

property renderer

protected renderer: Renderer2;

property role

role: string;

property scrollStrategy

scrollStrategy: 'close' | 'noop' | 'block' | 'reposition';

Determines options overlay scroll strategy.

property top

readonly top: boolean;

property triggerStrategy

protected triggerStrategy: NbTriggerStrategy;

Trigger strategy used by overlay. @docs-private

property triggerStrategyBuilder

protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;

method attachToOverlay

protected attachToOverlay: () => void;

method checkOverlayVisibility

protected checkOverlayVisibility: () => void;

method createKeyManager

protected createKeyManager: () => void;

method createOverlay

protected createOverlay: () => void;

method createPositionStrategy

protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;

method createScrollStrategy

protected createScrollStrategy: () => ScrollStrategy;

method createTriggerStrategy

protected createTriggerStrategy: () => NbTriggerStrategy;

method getActiveItem

protected getActiveItem: () => NbOptionComponent<T>;

method getContainer

protected getContainer: () => ComponentRef<any>;

method getDisplayValue

protected getDisplayValue: (value: string) => string;

method handleBlur

handleBlur: () => void;

method handleInput

handleInput: () => void;

method handleInputValueUpdate

protected handleInputValueUpdate: (value: T, focusInput?: boolean) => void;

method handleKeydown

handleKeydown: () => void;

method hide

hide: () => void;

method initOverlay

protected initOverlay: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method registerOnChange

registerOnChange: (fn: (value: any) => {}) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method setActiveItem

protected setActiveItem: () => void;

method setDisabledState

setDisabledState: (disabled: boolean) => void;

method setHostInputValue

protected setHostInputValue: (value: any) => void;

method setupAutocomplete

protected setupAutocomplete: () => void;

method shouldShow

protected shouldShow: () => boolean;

method show

show: () => void;

method subscribeOnOptionClick

protected subscribeOnOptionClick: () => void;

method subscribeOnOverlayKeys

protected subscribeOnOverlayKeys: () => void;

method subscribeOnPositionChange

protected subscribeOnPositionChange: () => void;

method subscribeOnTriggers

protected subscribeOnTriggers: () => void;

method writeValue

writeValue: (value: T) => void;

class NbAutocompleteModule

class NbAutocompleteModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbAutocompleteModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbAutocompleteModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbAutocompleteModule,
    [typeof i1.NbAutocompleteComponent, typeof i2.NbAutocompleteDirective],
    [
        any,
        any,
        typeof i5.NbOverlayModule,
        typeof i6.NbCardModule,
        typeof i7.NbOptionModule
    ],
    [
        typeof i1.NbAutocompleteComponent,
        typeof i2.NbAutocompleteDirective,
        typeof i7.NbOptionModule
    ]
>;

class NbBadgeComponent

class NbBadgeComponent implements NbBadge {}

Badge is a simple labeling component. It can be used to add additional information to any content or highlight unread items.
Element is absolute positioned, so parent should be [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position). It means parent position should be set to anything except static, e.g. relative, absolute, fixed, or sticky.
### Installation
Import NbBadgeModule to your feature module.
@NgModule({ imports: [ // ... NbBadgeModule, ], }) export class PageModule { }
### Usage
Badge with default position and status(color):
<nb-badge text="badgeText"></nb-badge>
For example, badge can be placed into nb-card header: @stacked-example(Showcase, badge/badge-showcase.component)
Badge located on the bottom right with warning status:
<nb-badge text="badgeText" status="warning" position="bottom right"> </nb-badge>
badge-border-radius: badge-text-font-family: badge-text-font-size: badge-text-font-weight: badge-text-line-height: badge-padding: badge-basic-background-color: badge-basic-text-color: badge-primary-background-color: badge-primary-text-color: badge-success-background-color: badge-success-text-color: badge-info-background-color: badge-info-text-color: badge-warning-background-color: badge-warning-text-color: badge-danger-background-color: badge-danger-text-color: badge-control-background-color: badge-control-text-color:

constructor

constructor(statusService: NbStatusService);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property bottom

readonly bottom: boolean;

property center

readonly center: boolean;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property dotMode

dotMode: boolean;

Shows badge as a dot. No text is shown. boolean

property end

readonly end: boolean;

property info

readonly info: boolean;

property left

readonly left: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbBadgeComponent,
    'nb-badge',
    never,
    {
        text: { alias: 'text'; required: false };
        position: { alias: 'position'; required: false };
        dotMode: { alias: 'dotMode'; required: false };
        status: { alias: 'status'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbBadgeComponent, never>;

property position

position: NbBadgePosition;

Badge position
Can be set to any class or to one of predefined positions: 'top left', 'top right', 'bottom left', 'bottom right', 'top start', 'top end', 'bottom start', 'bottom end' string

property primary

readonly primary: boolean;

property right

readonly right: boolean;

property start

readonly start: boolean;

property status

status: string;

Badge status (adds specific styles): 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property text

text: string;

Text to display string

property top

readonly top: boolean;

property warning

readonly warning: boolean;

class NbBadgeModule

class NbBadgeModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbBadgeModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbBadgeModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbBadgeModule,
    [typeof i1.NbBadgeComponent],
    never,
    [typeof i1.NbBadgeComponent]
>;

class NbBaseCalendarComponent

class NbBaseCalendarComponent<D, T> implements OnInit {}

The basis for calendar and range calendar components. Encapsulates common behavior - store calendar state and perform navigation between pickers.

constructor

constructor(
    dateService: NbDateService<D>,
    yearModelService: NbCalendarYearModelService<D>
);

property activeViewMode

activeViewMode: NbCalendarViewMode;

Defines active view for calendar.

property boundingMonth

boundingMonth: boolean;

Defines if we should render previous and next months in the current month view.

property date

date: {};

Value which will be rendered as selected.

property dateChange

dateChange: EventEmitter<T>;

Emits date when selected.

property dateService

protected dateService: NbDateService<D>;

property dayCellComponent

dayCellComponent: Type<NbCalendarCell<D, T>>;

Custom day cell component. Have to implement NbCalendarCell interface.

property filter

filter: (D: any) => boolean;

Predicate that decides which cells will be disabled.

property firstDayOfWeek

firstDayOfWeek: number;

Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. undefined means that default locale setting will be used.

property large

readonly large: boolean;

property max

max: {};

Maximum available date for selection.

property min

min: {};

Minimum available date for selection.

property monthCellComponent

monthCellComponent: Type<NbCalendarCell<D, T>>;

Custom month cell component. Have to implement NbCalendarCell interface.

property ngAcceptInputType_activeViewMode

static ngAcceptInputType_activeViewMode: NbCalendarViewModeValues;

property ngAcceptInputType_showWeekNumber

static ngAcceptInputType_showWeekNumber: NbBooleanInput;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbBaseCalendarComponent<any, any>,
    'nb-base-calendar',
    never,
    {
        boundingMonth: { alias: 'boundingMonth'; required: false };
        activeViewMode: { alias: 'startView'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        dayCellComponent: { alias: 'dayCellComponent'; required: false };
        monthCellComponent: { alias: 'monthCellComponent'; required: false };
        yearCellComponent: { alias: 'yearCellComponent'; required: false };
        size: { alias: 'size'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        showNavigation: { alias: 'showNavigation'; required: false };
        date: { alias: 'date'; required: false };
        showWeekNumber: { alias: 'showWeekNumber'; required: false };
        weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
    },
    { dateChange: 'dateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbBaseCalendarComponent<any, any>, never>;

property showNavigation

showNavigation: boolean;

Determines whether we should show calendar navigation or not.

property showWeekNumber

showWeekNumber: boolean;

Determines should we show week numbers column. False by default.

property size

size: NbCalendarSize;

Size of the calendar and entire components. Can be 'medium' which is default or 'large'.

property ViewMode

ViewMode: typeof NbCalendarViewMode;

property visibleDate

visibleDate: {};

property weekNumberSymbol

weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property yearCellComponent

yearCellComponent: Type<NbCalendarCell<D, T>>;

Custom year cell component. Have to implement NbCalendarCell interface.

property yearModelService

protected yearModelService: NbCalendarYearModelService<D>;

method navigateNext

navigateNext: () => void;

method navigatePrev

navigatePrev: () => void;

method nextMonth

nextMonth: () => void;

method nextYear

nextYear: () => void;

method nextYears

nextYears: () => void;

method ngOnInit

ngOnInit: () => void;

method onChangeViewMode

onChangeViewMode: () => void;

method prevMonth

prevMonth: () => void;

method prevYear

prevYear: () => void;

method prevYears

prevYears: () => void;

method setViewMode

setViewMode: (viewMode: NbCalendarViewMode) => void;

method setVisibleDate

setVisibleDate: (visibleDate: D) => void;

class NbBaseCalendarModule

class NbBaseCalendarModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbBaseCalendarModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbBaseCalendarModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbBaseCalendarModule,
    [typeof i1.NbBaseCalendarComponent],
    [
        typeof i2.NbCalendarKitModule,
        typeof i3.NbSharedModule,
        typeof i4.NbCardModule
    ],
    [typeof i1.NbBaseCalendarComponent]
>;

class NbBaseCalendarRangeCell

abstract class NbBaseCalendarRangeCell<D> {}

property hasRange

readonly hasRange: boolean;

property selectedValue

abstract selectedValue: NbCalendarRange<D>;

class NbBasePicker

abstract class NbBasePicker<D, T, P> extends NbDatepicker<T, D> {}

The NbBasePicker component concentrates overlay manipulation logic.

constructor

protected constructor(
    overlay: NbOverlayService,
    positionBuilder: NbPositionBuilderService,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    cfr: ComponentFactoryResolver,
    dateService: NbDateService<D>,
    dateServiceOptions: any
);

property adjustment

protected adjustment: NbAdjustment;

property blur

readonly blur: Observable<void>;

Emits when datepicker looses focus.

property blur$

protected blur$: Subject<void>;

property boundingMonth

abstract boundingMonth: boolean;

Defines if we should render previous and next months in the current month view.

property cfr

protected cfr: ComponentFactoryResolver;

property container

protected container: ComponentRef<NbDatepickerContainerComponent>;

Datepicker container that contains instantiated picker.

property dateService

protected dateService: NbDateService<D>;

property dateServiceOptions

protected dateServiceOptions: any;

property dayCellComponent

abstract dayCellComponent: Type<NbCalendarCell<D, T>>;

Custom day cell component. Have to implement NbCalendarCell interface.

property destroy$

protected destroy$: Subject<void>;

property filter

abstract filter: (D: any) => boolean;

Predicate that decides which cells will be disabled.

property firstDayOfWeek

abstract firstDayOfWeek: number;

Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. undefined means that default locale setting will be used.

property format

abstract format: string;

Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date object doesn't support formatting.

property formatChanged$

readonly formatChanged$: Subject<void>;

property hideOnSelect

abstract hideOnSelect: boolean;

Hide picker when a date or a range is selected, true by default {boolean}

property hostRef

protected hostRef: ElementRef;

HTML input reference to which datepicker connected.

property init

readonly init: Observable<void>;

property init$

protected init$: ReplaySubject<void>;

property isShown

readonly isShown: boolean;

property max

abstract max: {};

Maximum available date for selection.

property min

abstract min: {};

Minimum available date for selection.

property monthCellComponent

abstract monthCellComponent: Type<NbCalendarCell<D, T>>;

Custom month cell component. Have to implement NbCalendarCell interface.

property onChange$

protected onChange$: Subject<T>;

Stream of picker changes. Required to be the subject because picker hides and shows and picker change stream becomes recreated.

property overlay

protected overlay: NbOverlayService;

property overlayOffset

protected overlayOffset: number;

property picker

readonly picker: any;

Returns picker instance.

property pickerClass

protected abstract pickerClass: Type<P>;

Calendar component class that has to be instantiated inside overlay.

property pickerRef

protected pickerRef: ComponentRef<any>;

Reference to the picker instance itself.

property pickerValueChange

readonly pickerValueChange: Observable<T>;

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

property positionStrategy

protected positionStrategy: NbAdjustableConnectedPositionStrategy;

Positioning strategy used by overlay.

property queue

protected queue: {};

Queue contains the last value that was applied to the picker when it was hidden. This value will be passed to the picker as soon as it shown.

property ref

protected ref: OverlayRef;

Overlay reference object.

property showNavigation

abstract showNavigation: boolean;

Determines should we show calendar navigation or not. {boolean}

property showWeekNumber

abstract showWeekNumber: boolean;

Determines should we show week numbers column. False by default.

property size

abstract size: NbCalendarSize;

Size of the calendar and entire components. Can be 'medium' which is default or 'large'.

property startView

abstract startView: NbCalendarViewMode;

Defines starting view for calendar.

property triggerStrategy

protected triggerStrategy: NbTriggerStrategy;

Trigger strategy used by overlay

property triggerStrategyBuilder

protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;

property valueChange

readonly valueChange: Observable<T>;

Stream of picker value changes.

property visibleDate

abstract visibleDate: {};

Depending on this date a particular month is selected in the calendar

property weekNumberSymbol

abstract weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property yearCellComponent

abstract yearCellComponent: Type<NbCalendarCell<D, T>>;

Custom year cell component. Have to implement NbCalendarCell interface.

method attach

attach: (hostRef: ElementRef) => void;

Datepicker knows nothing about host html input element. So, attach method attaches datepicker to the host input element.

method checkFormat

protected checkFormat: () => void;

method createOverlay

protected createOverlay: () => void;

method createPositionStrategy

protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;

method createTriggerStrategy

protected createTriggerStrategy: () => NbTriggerStrategy;

method getValidatorConfig

getValidatorConfig: () => NbPickerValidatorConfig<D>;

method hide

hide: () => void;

method instantiatePicker

protected instantiatePicker: () => void;

method openDatepicker

protected openDatepicker: () => void;

method patchWithInputs

protected patchWithInputs: () => void;

method shouldHide

shouldHide: () => boolean;

method show

show: () => void;

method subscribeOnPositionChange

protected subscribeOnPositionChange: () => void;

method subscribeOnTriggers

protected subscribeOnTriggers: () => void;

method subscribeOnValueChange

protected subscribeOnValueChange: () => void;

Subscribes on picker value changes and emit data through this.onChange$ subject.

method writeQueue

protected abstract writeQueue: () => any;

class NbBasePickerComponent

class NbBasePickerComponent<D, T, P>
    extends NbBasePicker<D, T, P>
    implements OnInit, OnChanges, OnDestroy {}

constructor

constructor(
    document: any,
    positionBuilder: NbPositionBuilderService,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    overlay: NbOverlayService,
    cfr: ComponentFactoryResolver,
    dateService: NbDateService<D>,
    dateServiceOptions: any
);

property adjustment

adjustment: NbAdjustment;

property boundingMonth

boundingMonth: boolean;

Defines if we should render previous and next months in the current month view.

property dayCellComponent

dayCellComponent: Type<NbCalendarCell<D, T>>;

Custom day cell component. Have to implement NbCalendarCell interface.

property filter

filter: (D: any) => boolean;

Predicate that decides which cells will be disabled.

property firstDayOfWeek

firstDayOfWeek: number;

property format

format: string;

Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date object doesn't support formatting.

property hideOnSelect

hideOnSelect: boolean;

Hide picker when a date or a range is selected, true by default {boolean}

property max

max: {};

Maximum available date for selection.

property min

min: {};

Minimum available date for selection.

property monthCellComponent

monthCellComponent: Type<NbCalendarCell<D, T>>;

Custom month cell component. Have to implement NbCalendarCell interface.

property ngAcceptInputType_adjustment

static ngAcceptInputType_adjustment: NbAdjustmentValues;

property ngAcceptInputType_showWeekNumber

static ngAcceptInputType_showWeekNumber: NbBooleanInput;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ngAcceptInputType_startView

static ngAcceptInputType_startView: NbCalendarViewModeValues;

property overlayOffset

overlayOffset: number;

Determines picker overlay offset (in pixels).

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbBasePickerComponent<any, any, any>,
    'ng-component',
    never,
    {
        format: { alias: 'format'; required: false };
        boundingMonth: { alias: 'boundingMonth'; required: false };
        startView: { alias: 'startView'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        dayCellComponent: { alias: 'dayCellComponent'; required: false };
        monthCellComponent: { alias: 'monthCellComponent'; required: false };
        yearCellComponent: { alias: 'yearCellComponent'; required: false };
        size: { alias: 'size'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        hideOnSelect: { alias: 'hideOnSelect'; required: false };
        showNavigation: { alias: 'showNavigation'; required: false };
        weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false };
        showWeekNumber: { alias: 'showWeekNumber'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
        overlayOffset: { alias: 'overlayOffset'; required: false };
        adjustment: { alias: 'adjustment'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbBasePickerComponent<any, any, any>,
    [null, null, null, null, null, null, { optional: true }]
>;

property pickerClass

protected pickerClass: Type<P>;

property pickerValueChange

readonly pickerValueChange: Observable<T>;

property showNavigation

showNavigation: boolean;

Determines should we show calendars navigation or not. {boolean}

property showWeekNumber

showWeekNumber: boolean;

Determines should we show week numbers column. False by default.

property size

size: NbCalendarSize;

Size of the calendar and entire components. Can be 'medium' which is default or 'large'.

property startView

startView: NbCalendarViewMode;

Defines starting view for calendar.

property value

value: {};

property visibleDate

visibleDate: {};

Depending on this date a particular month is selected in the calendar

property weekNumberSymbol

weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property yearCellComponent

yearCellComponent: Type<NbCalendarCell<D, T>>;

Custom year cell component. Have to implement NbCalendarCell interface.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method writeQueue

protected writeQueue: () => void;

class NbBidiModule

class NbBidiModule extends BidiModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbBidiModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbBidiModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<NbBidiModule, never, never, never>;

class NbBlockScrollStrategyAdapter

class NbBlockScrollStrategyAdapter extends BlockScrollStrategy {}

Overrides default block scroll strategy because default strategy blocks scrolling on the body only. But Nebular has its own scrollable container - nb-layout. So, we need to block scrolling in it to.

constructor

constructor(
    document: any,
    viewportRuler: NbViewportRulerAdapter,
    scrollService: NbLayoutScrollService
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbBlockScrollStrategyAdapter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbBlockScrollStrategyAdapter>;

property scrollService

protected scrollService: NbLayoutScrollService;

method disable

disable: () => void;

method enable

enable: () => void;

class NbButton

abstract class NbButton implements AfterContentChecked, AfterViewInit {}

constructor

protected constructor(
    renderer: Renderer2,
    hostElement: ElementRef<HTMLElement>,
    cd: ChangeDetectorRef,
    zone: NgZone,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property appearance

appearance: NbButtonAppearance;

Button appearance: filled, outline, ghost, hero

property cd

protected cd: ChangeDetectorRef;

property disabled

disabled: boolean;

Disables the button

property filled

filled: boolean;

Sets filled appearance

property fullWidth

fullWidth: boolean;

If set element will fill its container

property ghost

ghost: boolean;

Sets ghost appearance

property giant

readonly giant: boolean;

property hostElement

protected hostElement: ElementRef<HTMLElement>;

property iconElement

readonly iconElement: Element;

property iconLeft

iconLeft: boolean;

property iconRight

iconRight: boolean;

property icons

icons: QueryList<ElementRef>;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_filled

static ngAcceptInputType_filled: NbBooleanInput;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ngAcceptInputType_ghost

static ngAcceptInputType_ghost: NbBooleanInput;

property ngAcceptInputType_outline

static ngAcceptInputType_outline: NbBooleanInput;

property nodes

readonly nodes: Node[];

property outline

outline: boolean;

Sets outline appearance

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbButton,
    never,
    never,
    {
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        shape: { alias: 'shape'; required: false };
        appearance: { alias: 'appearance'; required: false };
        filled: { alias: 'filled'; required: false };
        outline: { alias: 'outline'; required: false };
        ghost: { alias: 'ghost'; required: false };
        fullWidth: { alias: 'fullWidth'; required: false };
        disabled: { alias: 'disabled'; required: false };
        tabIndex: { alias: 'tabIndex'; required: false };
    },
    {},
    ['icons'],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbButton, never>;

property rectangle

readonly rectangle: boolean;

property renderer

protected renderer: Renderer2;

property round

readonly round: boolean;

property semiRound

readonly semiRound: boolean;

property shape

shape: NbComponentShape;

Button shapes: rectangle, round, semi-round

property size

size: NbComponentSize;

Button size, available sizes: tiny, small, medium, large, giant

property small

readonly small: boolean;

property status

status: string;

Button status (adds specific styles): primary, info, success, warning, danger

property statusService

protected statusService: NbStatusService;

property tabbable

readonly tabbable: string;

property tabIndex

tabIndex: number;

Tabindex of the button.

property tiny

readonly tiny: boolean;

property zone

protected zone: NgZone;

method isIconExist

protected isIconExist: (node: Node) => boolean;

method ngAfterContentChecked

ngAfterContentChecked: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method updateProperties

updateProperties: (config: Partial<NbButtonProperties>) => void;

@docs-private

class NbButtonComponent

class NbButtonComponent extends NbButton implements AfterViewInit {}

Basic button component.
Default button size is medium and status color is basic: @stacked-example(Button Showcase, button/button-showcase.component)
<button nbButton></button>
### Installation
Import NbButtonModule to your feature module.
@NgModule({ imports: [ // ... NbButtonModule, ], }) export class PageModule { }
### Usage
Buttons are available in multiple colors using status property: @stacked-example(Button Colors, button/button-colors.component.html)
There are three button sizes:
@stacked-example(Button Sizes, button/button-sizes.component.html)
And two additional style types - outline:
@stacked-example(Outline Buttons, button/button-outline.component.html)
and hero:
@stacked-example(Button Hero, button/button-hero.component.html)
Buttons available in different shapes, which could be combined with the other properties: @stacked-example(Button Shapes, button/button-shapes.component)
nbButton could be applied to the following selectors - button, input[type="button"], input[type="submit"] and a: @stacked-example(Button Elements, button/button-types.component.html)
Button can be made fullWidth: @stacked-example(Full Width Button, button/button-full-width.component.html)
Icon can be placed inside of a button as a child element: @stacked-example(Icon Button, button/button-icon.component.html)
@additional-example(Interactive example, button/button-interactive.component)
button-cursor: button-outline-width: button-outline-color: button-text-font-family: button-text-font-weight: button-disabled-cursor: button-tiny-text-font-size: button-tiny-text-line-height: button-tiny-icon-size: button-tiny-icon-vertical-margin: button-tiny-icon-offset: button-small-text-font-size: button-small-text-line-height: button-small-icon-size: button-small-icon-vertical-margin: button-small-icon-offset: button-medium-text-font-size: button-medium-text-line-height: button-medium-icon-size: button-medium-icon-vertical-margin: button-medium-icon-offset: button-large-text-font-size: button-large-text-line-height: button-large-icon-size: button-large-icon-vertical-margin: button-large-icon-offset: button-giant-text-font-size: button-giant-text-line-height: button-giant-icon-size: button-giant-icon-vertical-margin: button-giant-icon-offset: button-rectangle-border-radius: button-semi-round-border-radius: button-round-border-radius: button-filled-border-style: button-filled-border-width: button-filled-text-transform: button-filled-tiny-padding: button-filled-small-padding: button-filled-medium-padding: button-filled-large-padding: button-filled-giant-padding: button-filled-basic-background-color: button-filled-basic-border-color: button-filled-basic-text-color: button-filled-basic-focus-background-color: button-filled-basic-focus-border-color: button-filled-basic-hover-background-color: button-filled-basic-hover-border-color: button-filled-basic-active-background-color: button-filled-basic-active-border-color: button-filled-basic-disabled-background-color: button-filled-basic-disabled-border-color: button-filled-basic-disabled-text-color: button-filled-primary-background-color: button-filled-primary-border-color: button-filled-primary-text-color: button-filled-primary-focus-background-color: button-filled-primary-focus-border-color: button-filled-primary-hover-background-color: button-filled-primary-hover-border-color: button-filled-primary-active-background-color: button-filled-primary-active-border-color: button-filled-primary-disabled-background-color: button-filled-primary-disabled-border-color: button-filled-primary-disabled-text-color: button-filled-success-background-color: button-filled-success-border-color: button-filled-success-text-color: button-filled-success-focus-background-color: button-filled-success-focus-border-color: button-filled-success-hover-background-color: button-filled-success-hover-border-color: button-filled-success-active-background-color: button-filled-success-active-border-color: button-filled-success-disabled-background-color: button-filled-success-disabled-border-color: button-filled-success-disabled-text-color: button-filled-info-background-color: button-filled-info-border-color: button-filled-info-text-color: button-filled-info-focus-background-color: button-filled-info-focus-border-color: button-filled-info-hover-background-color: button-filled-info-hover-border-color: button-filled-info-active-background-color: button-filled-info-active-border-color: button-filled-info-disabled-background-color: button-filled-info-disabled-border-color: button-filled-info-disabled-text-color: button-filled-warning-background-color: button-filled-warning-border-color: button-filled-warning-text-color: button-filled-warning-focus-background-color: button-filled-warning-focus-border-color: button-filled-warning-hover-background-color: button-filled-warning-hover-border-color: button-filled-warning-active-background-color: button-filled-warning-active-border-color: button-filled-warning-disabled-background-color: button-filled-warning-disabled-border-color: button-filled-warning-disabled-text-color: button-filled-danger-background-color: button-filled-danger-border-color: button-filled-danger-text-color: button-filled-danger-focus-background-color: button-filled-danger-focus-border-color: button-filled-danger-hover-background-color: button-filled-danger-hover-border-color: button-filled-danger-active-background-color: button-filled-danger-active-border-color: button-filled-danger-disabled-background-color: button-filled-danger-disabled-border-color: button-filled-danger-disabled-text-color: button-filled-control-background-color: button-filled-control-border-color: button-filled-control-text-color: button-filled-control-focus-background-color: button-filled-control-focus-border-color: button-filled-control-hover-background-color: button-filled-control-hover-border-color: button-filled-control-active-background-color: button-filled-control-active-border-color: button-filled-control-disabled-background-color: button-filled-control-disabled-border-color: button-filled-control-disabled-text-color: button-outline-border-style: button-outline-border-width: button-outline-text-transform: button-outline-focus-inset-shadow-length: button-outline-tiny-padding: button-outline-small-padding: button-outline-medium-padding: button-outline-large-padding: button-outline-giant-padding: button-outline-basic-background-color: button-outline-basic-border-color: button-outline-basic-text-color: button-outline-basic-focus-background-color: button-outline-basic-focus-border-color: button-outline-basic-focus-text-color: button-outline-basic-hover-background-color: button-outline-basic-hover-border-color: button-outline-basic-hover-text-color: button-outline-basic-active-background-color: button-outline-basic-active-border-color: button-outline-basic-active-text-color: button-outline-basic-disabled-background-color: button-outline-basic-disabled-border-color: button-outline-basic-disabled-text-color: button-outline-primary-background-color: button-outline-primary-border-color: button-outline-primary-text-color: button-outline-primary-focus-background-color: button-outline-primary-focus-border-color: button-outline-primary-focus-text-color: button-outline-primary-hover-background-color: button-outline-primary-hover-border-color: button-outline-primary-hover-text-color: button-outline-primary-active-background-color: button-outline-primary-active-border-color: button-outline-primary-active-text-color: button-outline-primary-disabled-background-color: button-outline-primary-disabled-border-color: button-outline-primary-disabled-text-color: button-outline-success-background-color: button-outline-success-border-color: button-outline-success-text-color: button-outline-success-focus-background-color: button-outline-success-focus-border-color: button-outline-success-focus-text-color: button-outline-success-hover-background-color: button-outline-success-hover-border-color: button-outline-success-hover-text-color: button-outline-success-active-background-color: button-outline-success-active-border-color: button-outline-success-active-text-color: button-outline-success-disabled-background-color: button-outline-success-disabled-border-color: button-outline-success-disabled-text-color: button-outline-info-background-color: button-outline-info-border-color: button-outline-info-text-color: button-outline-info-focus-background-color: button-outline-info-focus-border-color: button-outline-info-focus-text-color: button-outline-info-hover-background-color: button-outline-info-hover-border-color: button-outline-info-hover-text-color: button-outline-info-active-background-color: button-outline-info-active-border-color: button-outline-info-active-text-color: button-outline-info-disabled-background-color: button-outline-info-disabled-border-color: button-outline-info-disabled-text-color: button-outline-warning-background-color: button-outline-warning-border-color: button-outline-warning-text-color: button-outline-warning-focus-background-color: button-outline-warning-focus-border-color: button-outline-warning-focus-text-color: button-outline-warning-hover-background-color: button-outline-warning-hover-border-color: button-outline-warning-hover-text-color: button-outline-warning-active-background-color: button-outline-warning-active-border-color: button-outline-warning-active-text-color: button-outline-warning-disabled-background-color: button-outline-warning-disabled-border-color: button-outline-warning-disabled-text-color: button-outline-danger-background-color: button-outline-danger-border-color: button-outline-danger-text-color: button-outline-danger-focus-background-color: button-outline-danger-focus-border-color: button-outline-danger-focus-text-color: button-outline-danger-hover-background-color: button-outline-danger-hover-border-color: button-outline-danger-hover-text-color: button-outline-danger-active-background-color: button-outline-danger-active-border-color: button-outline-danger-active-text-color: button-outline-danger-disabled-background-color: button-outline-danger-disabled-border-color: button-outline-danger-disabled-text-color: button-outline-control-background-color: button-outline-control-border-color: button-outline-control-text-color: button-outline-control-focus-background-color: button-outline-control-focus-border-color: button-outline-control-focus-text-color: button-outline-control-hover-background-color: button-outline-control-hover-border-color: button-outline-control-hover-text-color: button-outline-control-active-background-color: button-outline-control-active-border-color: button-outline-control-active-text-color: button-outline-control-disabled-background-color: button-outline-control-disabled-border-color: button-outline-control-disabled-text-color: button-ghost-background-color: button-ghost-border-color: button-ghost-border-style: button-ghost-border-width: button-ghost-text-transform: button-ghost-focus-inset-shadow-length: button-ghost-tiny-padding: button-ghost-small-padding: button-ghost-medium-padding: button-ghost-large-padding: button-ghost-giant-padding: button-ghost-basic-text-color: button-ghost-basic-focus-background-color: button-ghost-basic-focus-border-color: button-ghost-basic-focus-text-color: button-ghost-basic-hover-background-color: button-ghost-basic-hover-border-color: button-ghost-basic-hover-text-color: button-ghost-basic-active-background-color: button-ghost-basic-active-border-color: button-ghost-basic-active-text-color: button-ghost-basic-disabled-background-color: button-ghost-basic-disabled-border-color: button-ghost-basic-disabled-text-color: button-ghost-primary-text-color: button-ghost-primary-focus-background-color: button-ghost-primary-focus-border-color: button-ghost-primary-focus-text-color: button-ghost-primary-hover-background-color: button-ghost-primary-hover-border-color: button-ghost-primary-hover-text-color: button-ghost-primary-active-background-color: button-ghost-primary-active-border-color: button-ghost-primary-active-text-color: button-ghost-primary-disabled-background-color: button-ghost-primary-disabled-border-color: button-ghost-primary-disabled-text-color: button-ghost-success-text-color: button-ghost-success-focus-background-color: button-ghost-success-focus-border-color: button-ghost-success-focus-text-color: button-ghost-success-hover-background-color: button-ghost-success-hover-border-color: button-ghost-success-hover-text-color: button-ghost-success-active-background-color: button-ghost-success-active-border-color: button-ghost-success-active-text-color: button-ghost-success-disabled-background-color: button-ghost-success-disabled-border-color: button-ghost-success-disabled-text-color: button-ghost-info-text-color: button-ghost-info-focus-background-color: button-ghost-info-focus-border-color: button-ghost-info-focus-text-color: button-ghost-info-hover-background-color: button-ghost-info-hover-border-color: button-ghost-info-hover-text-color: button-ghost-info-active-background-color: button-ghost-info-active-border-color: button-ghost-info-active-text-color: button-ghost-info-disabled-background-color: button-ghost-info-disabled-border-color: button-ghost-info-disabled-text-color: button-ghost-warning-text-color: button-ghost-warning-focus-background-color: button-ghost-warning-focus-border-color: button-ghost-warning-focus-text-color: button-ghost-warning-hover-background-color: button-ghost-warning-hover-border-color: button-ghost-warning-hover-text-color: button-ghost-warning-active-background-color: button-ghost-warning-active-border-color: button-ghost-warning-active-text-color: button-ghost-warning-disabled-background-color: button-ghost-warning-disabled-border-color: button-ghost-warning-disabled-text-color: button-ghost-danger-text-color: button-ghost-danger-focus-background-color: button-ghost-danger-focus-border-color: button-ghost-danger-focus-text-color: button-ghost-danger-hover-background-color: button-ghost-danger-hover-border-color: button-ghost-danger-hover-text-color: button-ghost-danger-active-background-color: button-ghost-danger-active-border-color: button-ghost-danger-active-text-color: button-ghost-danger-disabled-background-color: button-ghost-danger-disabled-border-color: button-ghost-danger-disabled-text-color: button-ghost-control-text-color: button-ghost-control-focus-background-color: button-ghost-control-focus-border-color: button-ghost-control-focus-text-color: button-ghost-control-hover-background-color: button-ghost-control-hover-border-color: button-ghost-control-hover-text-color: button-ghost-control-active-background-color: button-ghost-control-active-border-color: button-ghost-control-active-text-color: button-ghost-control-disabled-background-color: button-ghost-control-disabled-border-color: button-ghost-control-disabled-text-color: button-hero-border-color: button-hero-border-style: button-hero-border-width: button-hero-text-transform: button-hero-tiny-padding: button-hero-small-padding: button-hero-medium-padding: button-hero-large-padding: button-hero-giant-padding: button-hero-shadow: button-hero-text-shadow: button-hero-bevel-size: button-hero-glow-size: button-hero-outline-color: button-hero-outline-width: button-hero-basic-text-color: button-hero-basic-bevel-color: button-hero-basic-glow-color: button-hero-basic-left-background-color: button-hero-basic-right-background-color: button-hero-basic-focus-left-background-color: button-hero-basic-focus-right-background-color: button-hero-basic-hover-left-background-color: button-hero-basic-hover-right-background-color: button-hero-basic-active-left-background-color: button-hero-basic-active-right-background-color: button-hero-basic-disabled-background-color: button-hero-basic-disabled-text-color: button-hero-primary-text-color: button-hero-primary-bevel-color: button-hero-primary-glow-color: button-hero-primary-left-background-color: button-hero-primary-right-background-color: button-hero-primary-focus-left-background-color: button-hero-primary-focus-right-background-color: button-hero-primary-hover-left-background-color: button-hero-primary-hover-right-background-color: button-hero-primary-active-left-background-color: button-hero-primary-active-right-background-color: button-hero-primary-disabled-background-color: button-hero-primary-disabled-text-color: button-hero-success-text-color: button-hero-success-bevel-color: button-hero-success-glow-color: button-hero-success-left-background-color: button-hero-success-right-background-color: button-hero-success-focus-left-background-color: button-hero-success-focus-right-background-color: button-hero-success-hover-left-background-color: button-hero-success-hover-right-background-color: button-hero-success-active-left-background-color: button-hero-success-active-right-background-color: button-hero-success-disabled-background-color: button-hero-success-disabled-text-color: button-hero-info-text-color: button-hero-info-bevel-color: button-hero-info-glow-color: button-hero-info-left-background-color: button-hero-info-right-background-color: button-hero-info-focus-left-background-color: button-hero-info-focus-right-background-color: button-hero-info-hover-left-background-color: button-hero-info-hover-right-background-color: button-hero-info-active-left-background-color: button-hero-info-active-right-background-color: button-hero-info-disabled-background-color: button-hero-info-disabled-text-color: button-hero-warning-text-color: button-hero-warning-bevel-color: button-hero-warning-glow-color: button-hero-warning-left-background-color: button-hero-warning-right-background-color: button-hero-warning-focus-left-background-color: button-hero-warning-focus-right-background-color: button-hero-warning-hover-left-background-color: button-hero-warning-hover-right-background-color: button-hero-warning-active-left-background-color: button-hero-warning-active-right-background-color: button-hero-warning-disabled-background-color: button-hero-warning-disabled-text-color: button-hero-danger-text-color: button-hero-danger-bevel-color: button-hero-danger-glow-color: button-hero-danger-left-background-color: button-hero-danger-right-background-color: button-hero-danger-focus-left-background-color: button-hero-danger-focus-right-background-color: button-hero-danger-hover-left-background-color: button-hero-danger-hover-right-background-color: button-hero-danger-active-left-background-color: button-hero-danger-active-right-background-color: button-hero-danger-disabled-background-color: button-hero-danger-disabled-text-color: button-hero-control-text-color: button-hero-control-bevel-color: button-hero-control-glow-color: button-hero-control-left-background-color: button-hero-control-right-background-color: button-hero-control-focus-left-background-color: button-hero-control-focus-right-background-color: button-hero-control-hover-left-background-color: button-hero-control-hover-right-background-color: button-hero-control-active-left-background-color: button-hero-control-active-right-background-color: button-hero-control-disabled-background-color: button-hero-control-disabled-text-color:

constructor

constructor(
    renderer: Renderer2,
    hostElement: ElementRef<HTMLElement>,
    cd: ChangeDetectorRef,
    zone: NgZone,
    statusService: NbStatusService
);

property basic

readonly basic: boolean;

property cd

protected cd: ChangeDetectorRef;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property hero

hero: boolean;

Sets hero appearance

property hostElement

protected hostElement: ElementRef<HTMLElement>;

property info

readonly info: boolean;

property ngAcceptInputType_hero

static ngAcceptInputType_hero: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbButtonComponent,
    'button[nbButton],a[nbButton],input[type="button"][nbButton],input[type="submit"][nbButton]',
    never,
    { hero: { alias: 'hero'; required: false } },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonComponent, never>;

property primary

readonly primary: boolean;

property renderer

protected renderer: Renderer2;

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property warning

readonly warning: boolean;

property zone

protected zone: NgZone;

method onClick

onClick: (event: any) => void;

Keep this handler to partially support anchor disabling. Unlike button, anchor doesn't have 'disabled' DOM property, so handler will be called anyway. We preventing navigation and bubbling. Disabling is partial due to click handlers precedence. Consider example: <a nbButton [disabled]="true" (click)="clickHandler()">... 'clickHandler' will be called before our host listener below. We can't prevent such handlers call.

class NbButtonGroupComponent

class NbButtonGroupComponent implements OnChanges, AfterContentInit {}

<nb-button-group> visually groups buttons together and allow to control buttons properties and the state as a group. @stacked-example(Button Group Showcase, button-group/button-group-showcase.component)
### Installation
Import NbButtonGroupModule to your feature module.
@NgModule({ imports: [ // ... NbButtonGroupModule, ], }) export class PageModule { }
### Usage
You can use <nb-button-group> to group a series of [nbButton] or [nbButtonToggle] components. @stacked-example(Button and Button Toggle Groups, button-group/button-and-button-toggle-groups.component)
For a group of multiple [nbButtonToggle] you also can control multi-selection behavior. By default, the group component allows only one pressed button toggle at a time (similar to the radio group). To be able to keep multiple toggles pressed, you need to add multiple attributes to the <nb-button-toggle>. @stacked-example(Button Group Multiple, button-group/button-group-multiple.component)
To know which buttons are currently pressed listen to (valueChange) on the nb-button-group. Event contains an array of values of currently pressed button toggles. You can assign a value to the [nbButtonToggle] via the value input. @stacked-example(Button Group Value Change, button-group/button-group-value-change.component)
To disable a group of buttons, add a disabled attribute to the <nb-button-group>. @stacked-example(Button Group Disabled, button-group/button-group-disabled.component)
The group component controls all visual attributes of buttons such as appearance, status, size, shape. You can change it via the appropriate attributes.
Button group appearances: @stacked-example(Button Group Appearances, button-group/button-group-appearances.component)
Button group statuses: @stacked-example(Button Group Statuses, button-group/button-group-statuses.component)
Button group sizes: @stacked-example(Button Group Sizes, button-group/button-group-sizes.component)
Buttons group shapes: @additional-example(Button Group Shapes, button-group/button-group-shapes.component)
button-group-filled-button-basic-text-color: button-group-filled-button-primary-text-color: button-group-filled-button-success-text-color: button-group-filled-button-info-text-color: button-group-filled-button-warning-text-color: button-group-filled-button-danger-text-color: button-group-filled-button-control-text-color: button-group-filled-basic-divider-color: button-group-filled-primary-divider-color: button-group-filled-success-divider-color: button-group-filled-info-divider-color: button-group-filled-warning-divider-color: button-group-filled-danger-divider-color: button-group-filled-control-divider-color: button-group-ghost-divider-color:

constructor

constructor(cd: ChangeDetectorRef, statusService: NbStatusService);

property additionalClasses

readonly additionalClasses: string[];

property appearance

appearance: NbButtonToggleAppearance;

Button group appearance: filled, outline, ghost

property buttons

readonly buttons: QueryList<NbButton>;

property buttonsChange$

protected readonly buttonsChange$: Subject<NbButton[]>;

property cd

protected cd: ChangeDetectorRef;

property destroy$

protected readonly destroy$: Subject<void>;

property disabled

disabled: boolean;

property filled

filled: boolean;

Sets filled appearance

property ghost

ghost: boolean;

Sets ghost appearance

property lastEmittedValue

protected lastEmittedValue: any[];

property multiple

multiple: boolean;

Allows to keep multiple button toggles pressed. Off by default.

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_filled

static ngAcceptInputType_filled: NbBooleanInput;

property ngAcceptInputType_ghost

static ngAcceptInputType_ghost: NbBooleanInput;

property ngAcceptInputType_multiple

static ngAcceptInputType_multiple: NbBooleanInput;

property ngAcceptInputType_outline

static ngAcceptInputType_outline: NbBooleanInput;

property outline

outline: boolean;

Sets outline appearance

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbButtonGroupComponent,
    'nb-button-group',
    never,
    {
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        shape: { alias: 'shape'; required: false };
        appearance: { alias: 'appearance'; required: false };
        disabled: { alias: 'disabled'; required: false };
        multiple: { alias: 'multiple'; required: false };
        filled: { alias: 'filled'; required: false };
        outline: { alias: 'outline'; required: false };
        ghost: { alias: 'ghost'; required: false };
    },
    { valueChange: 'valueChange' },
    ['buttons'],
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonGroupComponent, never>;

property role

role: string;

property shape

shape: NbComponentShape;

Button group shapes: rectangle, round, semi-round

property size

size: NbComponentSize;

Button group size, available sizes: tiny, small, medium, large, giant

property status

status: string;

Button group status (adds specific styles): basic, primary, info, success, warning, danger, control

property statusService

protected statusService: NbStatusService;

property valueChange

valueChange: EventEmitter<any[]>;

Emits when nbButtonToggle pressed state change. $event contains an array of the currently pressed button toggles.

method emitCurrentValue

protected emitCurrentValue: (toggleButtons: NbButtonToggleDirective[]) => void;

method listenButtonPressedState

protected listenButtonPressedState: (buttons: NbButton[]) => void;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnChanges

ngOnChanges: ({
    size,
    status,
    shape,
    multiple,
    filled,
    outline,
    ghost,
    disabled,
}: SimpleChanges) => void;

method syncButtonsProperties

protected syncButtonsProperties: (buttons: NbButton[]) => void;

class NbButtonGroupModule

class NbButtonGroupModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonGroupModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbButtonGroupModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbButtonGroupModule,
    [typeof i1.NbButtonGroupComponent, typeof i2.NbButtonToggleDirective],
    never,
    [typeof i1.NbButtonGroupComponent, typeof i2.NbButtonToggleDirective]
>;

class NbButtonModule

class NbButtonModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbButtonModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbButtonModule,
    [typeof i1.NbButtonComponent],
    [typeof i2.NbSharedModule],
    [typeof i1.NbButtonComponent]
>;

class NbButtonToggleDirective

class NbButtonToggleDirective extends NbButton {}

[nbButtonToggle] is a directive to add a pressed state to a button.

constructor

constructor(
    renderer: Renderer2,
    hostElement: ElementRef<HTMLElement>,
    cd: ChangeDetectorRef,
    zone: NgZone,
    statusService: NbStatusService,
    buttonGroup?: any
);

property additionalClasses

readonly additionalClasses: string[];

property appearance

appearance: NbButtonToggleAppearance;

property basic

readonly basic: boolean;

property buttonGroup

protected buttonGroup?: any;

property cd

protected cd: ChangeDetectorRef;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property hostElement

protected hostElement: ElementRef<HTMLElement>;

property info

readonly info: boolean;

property ngAcceptInputType_pressed

static ngAcceptInputType_pressed: NbBooleanInput;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbButtonToggleDirective,
    'button[nbButtonToggle]',
    ['nbButtonToggle'],
    {
        appearance: { alias: 'appearance'; required: false };
        value: { alias: 'value'; required: false };
        pressed: { alias: 'pressed'; required: false };
    },
    { pressedChange: 'pressedChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbButtonToggleDirective,
    [null, null, null, null, null, { optional: true }]
>;

property pressed

pressed: boolean;

Controls button pressed state

property pressedChange

readonly pressedChange: EventEmitter<boolean>;

Emits whenever button pressed state change

property pressedChange$

readonly pressedChange$: Observable<NbButtonToggleChange>;

property primary

readonly primary: boolean;

property renderer

protected renderer: Renderer2;

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property value

value: any;

A value associated with the button.

property warning

readonly warning: boolean;

property zone

protected zone: NgZone;

method onClick

onClick: () => void;

class NbCalendarActionsComponent

class NbCalendarActionsComponent {}

property applyText

readonly applyText: string;

property currentTimeText

readonly currentTimeText: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarActionsComponent,
    'nb-calendar-actions',
    never,
    {
        applyButtonText: { alias: 'applyButtonText'; required: false };
        currentTimeButtonText: {
            alias: 'currentTimeButtonText';
            required: false;
        };
        showCurrentTimeButton: {
            alias: 'showCurrentTimeButton';
            required: false;
        };
    },
    { setCurrentTime: 'setCurrentTime'; saveValue: 'saveValue' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarActionsComponent, never>;

property saveValue

saveValue: EventEmitter<void>;

property setCurrentTime

setCurrentTime: EventEmitter<void>;

property showCurrentTimeButton

showCurrentTimeButton: boolean;

class NbCalendarComponent

class NbCalendarComponent<D> {}

Calendar component provides a capability to choose a date.
<nb-calendar [(date)]="date"></nb-calendar> <nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>
Basic usage example @stacked-example(Showcase, calendar/calendar-showcase.component)
### Installation
Import NbCalendarModule to your feature module.
@NgModule({ imports: [ // ... NbCalendarModule, ], }) export class PageModule { }
### Usage
If you want to select ranges you can use NbCalendarRangeComponent.
<nb-calendar-range [(range)]="range"></nb-calendar-range> <nb-calendar-range [range]="range" (rangeChange)="handleRangeChange($event)"></nb-calendar-range>
In order to use it, you have to import NbCalendarRangeModule. @stacked-example(Range, calendar/calendar-range-showcase.component)
The calendar component is supplied with a calendar navigation that contains navigate buttons. If you do not want to use it you can hide calendar navigation using showNavigation property. @stacked-example(Without navigation, calendar/calendar-without-navigation.component)
As you can see in the basic usage example calendar contains previous and next month days which can be disabled using boundingMonth property. @stacked-example(Bounding months, calendar/calendar-bounding-month.component)
You can define starting view of the calendar by setting startView property. Available values: year, month and date. @stacked-example(Start view, calendar/calendar-start-view.component)
You can use a larger version of the calendar by defining size property. Available values: medium(which is default) and large. @stacked-example(Size, calendar/calendar-size.component)
Calendar supports min and max dates which disables values out of min-max range. @stacked-example(Borders, calendar/calendar-min-max.component)
Also, you can define custom filter property that should be predicate which receives date and returns false if this date has to be disabled. In this example, we provide the filter which disables weekdays. @stacked-example(Filter, calendar/calendar-filter.component)
Week numbers column could be enabled via showWeekNumber binding: @stacked-example(Week number, calendar/calendar-week-number.component)
If you need create custom cells you can easily provide custom components for calendar. For examples if you want to show any average price under each date you can just provide custom dayCellComponent. Custom cells for month and year can be provided the same way, check API reference. @stacked-example(Custom day cell, calendar/calendar-custom-day-cell-showcase.component)
calendar-width: calendar-background-color: calendar-border-color: calendar-border-style: calendar-border-width: calendar-border-radius: calendar-text-color: calendar-text-font-family: calendar-text-font-size: calendar-text-font-weight: calendar-text-line-height: calendar-picker-padding-top: calendar-picker-padding-bottom: calendar-picker-padding-start: calendar-picker-padding-end: calendar-navigation-text-color: calendar-navigation-text-font-family: calendar-navigation-title-text-font-size: calendar-navigation-title-text-font-weight: calendar-navigation-title-text-line-height: calendar-navigation-padding: calendar-cell-inactive-text-color: calendar-cell-disabled-text-color: calendar-cell-hover-background-color: calendar-cell-hover-border-color: calendar-cell-hover-text-color: calendar-cell-hover-text-font-size: calendar-cell-hover-text-font-weight: calendar-cell-hover-text-line-height: calendar-cell-active-background-color: calendar-cell-active-border-color: calendar-cell-active-text-color: calendar-cell-active-text-font-size: calendar-cell-active-text-font-weight: calendar-cell-active-text-line-height: calendar-cell-today-background-color: calendar-cell-today-border-color: calendar-cell-today-text-color: calendar-cell-today-text-font-size: calendar-cell-today-text-font-weight: calendar-cell-today-text-line-height: calendar-cell-today-hover-background-color: calendar-cell-today-hover-border-color: calendar-cell-today-active-background-color: calendar-cell-today-active-border-color: calendar-cell-today-disabled-border-color: calendar-cell-today-selected-background-color: calendar-cell-today-selected-border-color: calendar-cell-today-selected-text-color: calendar-cell-today-selected-hover-background-color: calendar-cell-today-selected-hover-border-color: calendar-cell-today-selected-active-background-color: calendar-cell-today-selected-active-border-color: calendar-cell-today-in-range-background-color: calendar-cell-today-in-range-border-color: calendar-cell-today-in-range-text-color: calendar-cell-today-in-range-hover-background-color: calendar-cell-today-in-range-hover-border-color: calendar-cell-today-in-range-active-background-color: calendar-cell-today-in-range-active-border-color: calendar-cell-selected-background-color: calendar-cell-selected-border-color: calendar-cell-selected-text-color: calendar-cell-selected-text-font-size: calendar-cell-selected-text-font-weight: calendar-cell-selected-text-line-height: calendar-cell-selected-hover-background-color: calendar-cell-selected-hover-border-color: calendar-cell-selected-active-background-color: calendar-cell-selected-active-border-color: calendar-day-cell-width: calendar-day-cell-height: calendar-month-cell-width: calendar-month-cell-height: calendar-year-cell-width: calendar-year-cell-height: calendar-weekday-background: calendar-weekday-divider-color: calendar-weekday-divider-width: calendar-weekday-text-color: calendar-weekday-text-font-size: calendar-weekday-text-font-weight: calendar-weekday-text-line-height: calendar-weekday-holiday-text-color: calendar-weekday-height: calendar-weekday-width: calendar-weeknumber-background: calendar-weeknumber-divider-color: calendar-weeknumber-divider-width: calendar-weeknumber-text-color: calendar-weeknumber-text-font-size: calendar-weeknumber-text-font-weight: calendar-weeknumber-text-line-height: calendar-weeknumber-height: calendar-weeknumber-width: calendar-large-width: calendar-day-cell-large-width: calendar-day-cell-large-height: calendar-weekday-large-height: calendar-weekday-large-width: calendar-weeknumber-large-height: calendar-weeknumber-large-width: calendar-month-cell-large-width: calendar-month-cell-large-height: calendar-year-cell-large-width: calendar-year-cell-large-height:

property boundingMonth

boundingMonth: boolean;

Defines if we should render previous and next months in the current month view.

property date

date: {};

Date which will be rendered as selected.

property dateChange

dateChange: EventEmitter<D>;

Emits date when selected.

property dayCellComponent

dayCellComponent: Type<NbCalendarCell<D, D>>;

Custom day cell component. Have to implement NbCalendarCell interface.

property filter

filter: (D: any) => boolean;

Predicate that decides which cells will be disabled.

property firstDayOfWeek

firstDayOfWeek: number;

Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. undefined means that default locale setting will be used.

property max

max: {};

Maximum available date for selection.

property min

min: {};

Minimum available date for selection.

property monthCellComponent

monthCellComponent: Type<NbCalendarCell<D, D>>;

Custom month cell component. Have to implement NbCalendarCell interface.

property ngAcceptInputType_showWeekNumber

static ngAcceptInputType_showWeekNumber: NbBooleanInput;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ngAcceptInputType_startView

static ngAcceptInputType_startView: NbCalendarViewModeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarComponent<any>,
    'nb-calendar',
    never,
    {
        boundingMonth: { alias: 'boundingMonth'; required: false };
        startView: { alias: 'startView'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        dayCellComponent: { alias: 'dayCellComponent'; required: false };
        monthCellComponent: { alias: 'monthCellComponent'; required: false };
        yearCellComponent: { alias: 'yearCellComponent'; required: false };
        size: { alias: 'size'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        showNavigation: { alias: 'showNavigation'; required: false };
        date: { alias: 'date'; required: false };
        showWeekNumber: { alias: 'showWeekNumber'; required: false };
        weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
    },
    { dateChange: 'dateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarComponent<any>, never>;

property showNavigation

showNavigation: boolean;

Determines should we show calendars navigation or not.

property showWeekNumber

showWeekNumber: boolean;

Determines should we show week numbers column. False by default.

property size

size: NbCalendarSize;

Size of the calendar and entire components. Can be 'medium' which is default or 'large'.

property startView

startView: NbCalendarViewMode;

Defines starting view for calendar.

property visibleDate

visibleDate: {};

property weekNumberSymbol

weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property yearCellComponent

yearCellComponent: Type<NbCalendarCell<D, D>>;

Custom year cell component. Have to implement NbCalendarCell interface.

class NbCalendarDayCellComponent

class NbCalendarDayCellComponent<D> implements NbCalendarCell<D, D> {}

constructor

constructor(dateService: NbDateService<D>);

property boundingMonth

readonly boundingMonth: boolean;

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property day

readonly day: number;

property dayCellClass

dayCellClass: boolean;

property disabled

readonly disabled: boolean;

property empty

readonly empty: boolean;

property filter

filter: (D: any) => boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarDayCellComponent<any>,
    'nb-calendar-day-cell',
    never,
    {
        date: { alias: 'date'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarDayCellComponent<any>, never>;

property select

select: EventEmitter<D>;

property selected

readonly selected: boolean;

property selectedValue

selectedValue: {};

property size

size: NbCalendarSize;

property today

readonly today: boolean;

property visibleDate

visibleDate: {};

method onClick

onClick: () => void;

class NbCalendarDayPickerComponent

class NbCalendarDayPickerComponent<D, T> implements OnChanges {}

Provides capability pick days.

constructor

constructor(monthModel: NbCalendarMonthModelService<D>);

property boundingMonths

boundingMonths: boolean;

Defines if we should render previous and next months in the current month view.

property cellComponent

cellComponent: Type<NbCalendarCell<any, any>>;

property date

date: {};

Already selected date.

property dateChange

dateChange: EventEmitter<D>;

Fires newly selected date.

property filter

filter: (D: any) => boolean;

Predicate that decides which cells will be disabled.

property firstDayOfWeek

firstDayOfWeek: number;

Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. undefined means that default locale setting will be used.

property large

readonly large: boolean;

property max

max: {};

Maximum available date for selection.

property min

min: {};

Minimum available date for selection.

property ngAcceptInputType_showWeekNumber

static ngAcceptInputType_showWeekNumber: NbBooleanInput;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarDayPickerComponent<any, any>,
    'nb-calendar-day-picker',
    never,
    {
        visibleDate: { alias: 'visibleDate'; required: false };
        boundingMonths: { alias: 'boundingMonths'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        setCellComponent: { alias: 'cellComponent'; required: false };
        size: { alias: 'size'; required: false };
        date: { alias: 'date'; required: false };
        showWeekNumber: { alias: 'showWeekNumber'; required: false };
        weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
    },
    { dateChange: 'dateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarDayPickerComponent<any, any>,
    never
>;

property showWeekNumber

showWeekNumber: boolean;

Determines should we show week numbers column. False by default.

property size

size: NbCalendarSize;

Size of the component. Can be 'medium' which is default or 'large'.

property visibleDate

visibleDate: {};

Describes which month picker have to render.

property weekNumberSymbol

weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property weeks

weeks: D[][];

Day picker model. Provides all days in current month and if boundingMonth is true some days from previous and next one.

method ngOnChanges

ngOnChanges: ({
    visibleDate,
    boundingMonths,
    firstDayOfWeek,
}: SimpleChanges) => void;

method onSelect

onSelect: (day: D) => void;

class NbCalendarDaysNamesComponent

class NbCalendarDaysNamesComponent<D> implements OnInit, OnChanges {}

constructor

constructor(dateService: NbDateService<D>);

property days

days: NbCalendarDay[];

property firstDayOfWeek

firstDayOfWeek: number;

Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. undefined means that default locale setting will be used.

property isLarge

readonly isLarge: boolean;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarDaysNamesComponent<any>,
    'nb-calendar-days-names',
    never,
    {
        size: { alias: 'size'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarDaysNamesComponent<any>, never>;

property size

size: NbCalendarSize;

method ngOnChanges

ngOnChanges: ({ firstDayOfWeek }: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

class NbCalendarKitModule

class NbCalendarKitModule {}

NbCalendarKitModule is a module that contains multiple useful components for building custom calendars. So if you think our calendars is not enough powerful for you just use calendar-kit and build your own calendar!
Available components: - NbCalendarDayPicker - NbCalendarDayCell - NbCalendarMonthPicker - NbCalendarMonthCell - NbCalendarYearPicker - NbCalendarYearCell - NbCalendarViewModeComponent - NbCalendarPageableNavigation
For example you can easily build full calendar: @stacked-example(Full calendar, calendar-kit/calendar-kit-full-calendar.component)

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarKitModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCalendarKitModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbCalendarKitModule,
    [
        typeof i1.NbCalendarViewModeComponent,
        typeof i2.NbCalendarPageableNavigationComponent,
        typeof i3.NbCalendarDaysNamesComponent,
        typeof i4.NbCalendarYearPickerComponent,
        typeof i5.NbCalendarMonthPickerComponent,
        typeof i6.NbCalendarDayPickerComponent,
        typeof i7.NbCalendarDayCellComponent,
        typeof i8.NbCalendarActionsComponent,
        typeof i9.NbCalendarMonthCellComponent,
        typeof i10.NbCalendarYearCellComponent,
        typeof i11.NbCalendarPickerRowComponent,
        typeof i12.NbCalendarPickerComponent,
        typeof i13.NbCalendarWeekNumberComponent
    ],
    [
        typeof i14.NbSharedModule,
        typeof i15.NbButtonModule,
        typeof i16.NbIconModule
    ],
    [
        typeof i1.NbCalendarViewModeComponent,
        typeof i2.NbCalendarPageableNavigationComponent,
        typeof i3.NbCalendarDaysNamesComponent,
        typeof i4.NbCalendarYearPickerComponent,
        typeof i5.NbCalendarMonthPickerComponent,
        typeof i6.NbCalendarDayPickerComponent,
        typeof i7.NbCalendarDayCellComponent,
        typeof i8.NbCalendarActionsComponent,
        typeof i9.NbCalendarMonthCellComponent,
        typeof i10.NbCalendarYearCellComponent,
        typeof i11.NbCalendarPickerRowComponent,
        typeof i12.NbCalendarPickerComponent,
        typeof i13.NbCalendarWeekNumberComponent
    ]
>;

class NbCalendarModule

class NbCalendarModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCalendarModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbCalendarModule,
    [typeof i1.NbCalendarComponent],
    [typeof i2.NbBaseCalendarModule],
    [typeof i1.NbCalendarComponent]
>;

class NbCalendarMonthCellComponent

class NbCalendarMonthCellComponent<D> implements NbCalendarCell<D, D> {}

constructor

constructor(dateService: NbDateService<D>);

property date

date: {};

property disabled

readonly disabled: boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property month

readonly month: string;

property monthCellClass

monthCellClass: boolean;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarMonthCellComponent<any>,
    'nb-calendar-month-cell',
    never,
    {
        date: { alias: 'date'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarMonthCellComponent<any>, never>;

property select

select: EventEmitter<D>;

property selected

readonly selected: boolean;

property selectedValue

selectedValue: {};

property size

size: NbCalendarSize;

property today

readonly today: boolean;

method greaterThanMax

protected greaterThanMax: () => boolean;

method monthEnd

protected monthEnd: () => D;

method monthStart

protected monthStart: () => D;

method onClick

onClick: () => void;

method smallerThanMin

protected smallerThanMin: () => boolean;

class NbCalendarMonthModelService

class NbCalendarMonthModelService<D> {}

constructor

constructor(dateService: NbDateService<D>);

property dateService

protected dateService: NbDateService<D>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarMonthModelService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbCalendarMonthModelService<any>>;

method createDaysGrid

createDaysGrid: (
    activeMonth: D,
    boundingMonth?: boolean,
    firstDayOfWeek?: number
) => D[][];

class NbCalendarMonthPickerComponent

class NbCalendarMonthPickerComponent<D, T> implements OnChanges {}

constructor

constructor(dateService: NbDateService<D>);

property cellComponent

cellComponent: Type<NbCalendarCell<any, any>>;

property date

date: {};

Selected date

property dateService

protected dateService: NbDateService<D>;

property filter

filter: (D: any) => boolean;

property large

readonly large: boolean;

property max

max: {};

property min

min: {};

property month

month: {};

Visible month

property monthChange

monthChange: EventEmitter<D>;

property months

months: D[][];

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarMonthPickerComponent<any, any>,
    'nb-calendar-month-picker',
    never,
    {
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        size: { alias: 'size'; required: false };
        month: { alias: 'month'; required: false };
        date: { alias: 'date'; required: false };
        _cellComponent: { alias: 'cellComponent'; required: false };
    },
    { monthChange: 'monthChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarMonthPickerComponent<any, any>,
    never
>;

property size

size: NbCalendarSize;

method initMonths

initMonths: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method onSelect

onSelect: (month: D) => void;

class NbCalendarPageableNavigationComponent

class NbCalendarPageableNavigationComponent<D> {}

constructor

constructor(directionService: NbLayoutDirectionService);

property isLtr

readonly isLtr: boolean;

property next

next: EventEmitter<void>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarPageableNavigationComponent<any>,
    'nb-calendar-pageable-navigation',
    never,
    {},
    { next: 'next'; prev: 'prev' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarPageableNavigationComponent<any>,
    never
>;

property prev

prev: EventEmitter<void>;

class NbCalendarPickerComponent

class NbCalendarPickerComponent<D, T> {}

property cellComponent

cellComponent: Type<NbCalendarCell<D, T>>;

property data

data: D[][];

property filter

filter: (D: any) => boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarPickerComponent<any, any>,
    'nb-calendar-picker',
    never,
    {
        data: { alias: 'data'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        cellComponent: { alias: 'cellComponent'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarPickerComponent<any, any>, never>;

property select

select: EventEmitter<D>;

property selectedValue

selectedValue: {};

property size

size: NbCalendarSize;

property visibleDate

visibleDate: {};

class NbCalendarPickerRowComponent

class NbCalendarPickerRowComponent<D, T> implements OnChanges {}

constructor

constructor(cfr: ComponentFactoryResolver);

property component

component: Type<NbCalendarCell<D, T>>;

property containerRef

containerRef: ViewContainerRef;

property filter

filter: (D: any) => boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarPickerRowComponent<any, any>,
    'nb-calendar-picker-row',
    never,
    {
        row: { alias: 'row'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        component: { alias: 'component'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarPickerRowComponent<any, any>,
    never
>;

property row

row: D[];

property select

select: EventEmitter<D>;

property selectedValue

selectedValue: {};

property size

size: NbCalendarSize;

property visibleDate

visibleDate: {};

method ngOnChanges

ngOnChanges: () => void;

class NbCalendarRangeComponent

class NbCalendarRangeComponent<D> {}

CalendarRange component provides a capability to choose a date range.
<nb-calendar [(date)]="date"></nb-calendar> <nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>
Basic usage example @stacked-example(Range, calendar/calendar-range-showcase.component)
### Installation
Import NbCalendarRangeModule to your feature module.
@NgModule({ imports: [ // ... NbCalendarRangeModule, ], }) export class PageModule { }
### Usage
CalendarRange component supports all of the Calendar component customization properties. More defails can be found in the [Calendar component docs](docs/components/calendar).
calendar-width: calendar-background-color: calendar-border-color: calendar-border-style: calendar-border-width: calendar-border-radius: calendar-text-color: calendar-text-font-family: calendar-text-font-size: calendar-text-font-weight: calendar-text-line-height: calendar-picker-padding-top: calendar-picker-padding-bottom: calendar-picker-padding-start: calendar-picker-padding-end: calendar-navigation-text-color: calendar-navigation-text-font-family: calendar-navigation-title-text-font-size: calendar-navigation-title-text-font-weight: calendar-navigation-title-text-line-height: calendar-navigation-padding: calendar-cell-inactive-text-color: calendar-cell-disabled-text-color: calendar-cell-hover-background-color: calendar-cell-hover-border-color: calendar-cell-hover-text-color: calendar-cell-hover-text-font-size: calendar-cell-hover-text-font-weight: calendar-cell-hover-text-line-height: calendar-cell-active-background-color: calendar-cell-active-border-color: calendar-cell-active-text-color: calendar-cell-active-text-font-size: calendar-cell-active-text-font-weight: calendar-cell-active-text-line-height: calendar-cell-today-background-color: calendar-cell-today-border-color: calendar-cell-today-text-color: calendar-cell-today-text-font-size: calendar-cell-today-text-font-weight: calendar-cell-today-text-line-height: calendar-cell-today-hover-background-color: calendar-cell-today-hover-border-color: calendar-cell-today-active-background-color: calendar-cell-today-active-border-color: calendar-cell-today-disabled-border-color: calendar-cell-today-selected-background-color: calendar-cell-today-selected-border-color: calendar-cell-today-selected-text-color: calendar-cell-today-selected-hover-background-color: calendar-cell-today-selected-hover-border-color: calendar-cell-today-selected-active-background-color: calendar-cell-today-selected-active-border-color: calendar-cell-today-in-range-background-color: calendar-cell-today-in-range-border-color: calendar-cell-today-in-range-text-color: calendar-cell-today-in-range-hover-background-color: calendar-cell-today-in-range-hover-border-color: calendar-cell-today-in-range-active-background-color: calendar-cell-today-in-range-active-border-color: calendar-cell-selected-background-color: calendar-cell-selected-border-color: calendar-cell-selected-text-color: calendar-cell-selected-text-font-size: calendar-cell-selected-text-font-weight: calendar-cell-selected-text-line-height: calendar-cell-selected-hover-background-color: calendar-cell-selected-hover-border-color: calendar-cell-selected-active-background-color: calendar-cell-selected-active-border-color: calendar-day-cell-width: calendar-day-cell-height: calendar-month-cell-width: calendar-month-cell-height: calendar-year-cell-width: calendar-year-cell-height: calendar-weekday-background: calendar-weekday-divider-color: calendar-weekday-divider-width: calendar-weekday-text-color: calendar-weekday-text-font-size: calendar-weekday-text-font-weight: calendar-weekday-text-line-height: calendar-weekday-holiday-text-color: calendar-weekday-height: calendar-weekday-width: calendar-weeknumber-background: calendar-weeknumber-divider-color: calendar-weeknumber-divider-width: calendar-weeknumber-text-color: calendar-weeknumber-text-font-size: calendar-weeknumber-text-font-weight: calendar-weeknumber-text-line-height: calendar-weeknumber-height: calendar-weeknumber-width: calendar-large-width: calendar-day-cell-large-width: calendar-day-cell-large-height: calendar-weekday-large-height: calendar-weekday-large-width: calendar-weeknumber-large-height: calendar-weeknumber-large-width: calendar-month-cell-large-width: calendar-month-cell-large-height: calendar-year-cell-large-width: calendar-year-cell-large-height:

constructor

constructor(dateService: NbDateService<D>);

property boundingMonth

boundingMonth: boolean;

Defines if we should render previous and next months in the current month view.

property dateService

protected dateService: NbDateService<D>;

property dayCellComponent

dayCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;

property filter

filter: (D: any) => boolean;

A predicate that decides which cells will be disabled.

property firstDayOfWeek

firstDayOfWeek: number;

Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. undefined means that default locale setting will be used.

property max

max: {};

A maximum available date for selection.

property min

min: {};

A minimum available date for selection.

property monthCellComponent

monthCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;

property ngAcceptInputType_showWeekNumber

static ngAcceptInputType_showWeekNumber: NbBooleanInput;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ngAcceptInputType_startView

static ngAcceptInputType_startView: NbCalendarViewModeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarRangeComponent<any>,
    'nb-calendar-range',
    never,
    {
        boundingMonth: { alias: 'boundingMonth'; required: false };
        startView: { alias: 'startView'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        _cellComponent: { alias: 'dayCellComponent'; required: false };
        _monthCellComponent: { alias: 'monthCellComponent'; required: false };
        monthCellComponent: { alias: 'monthCellComponent'; required: false };
        _yearCellComponent: { alias: 'yearCellComponent'; required: false };
        size: { alias: 'size'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        showNavigation: { alias: 'showNavigation'; required: false };
        range: { alias: 'range'; required: false };
        showWeekNumber: { alias: 'showWeekNumber'; required: false };
        weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
    },
    { rangeChange: 'rangeChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarRangeComponent<any>, never>;

property range

range: NbCalendarRange<D>;

Range which will be rendered as selected.

property rangeChange

rangeChange: EventEmitter<NbCalendarRange<D>>;

Emits range when start selected and emits again when end selected.

property showNavigation

showNavigation: boolean;

Determines should we show calendars navigation or not.

property showWeekNumber

showWeekNumber: boolean;

Determines should we show week numbers column. False by default.

property size

size: NbCalendarSize;

Size of the calendar and entire components. Can be 'medium' which is default or 'large'.

property startView

startView: NbCalendarViewMode;

Defines starting view for the calendar.

property visibleDate

visibleDate: {};

property weekNumberSymbol

weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property yearCellComponent

yearCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;

method onChange

onChange: (date: D) => void;

class NbCalendarRangeDayCellComponent

class NbCalendarRangeDayCellComponent<D>
    extends NbBaseCalendarRangeCell<D>
    implements NbCalendarCell<D, NbCalendarRange<D>> {}

constructor

constructor(dateService: NbDateService<D>);

property boundingMonth

readonly boundingMonth: boolean;

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property day

readonly day: number;

property dayCellClass

dayCellClass: boolean;

property disabled

readonly disabled: boolean;

property empty

readonly empty: boolean;

property end

readonly end: boolean;

property filter

filter: (D: any) => boolean;

property inRange

readonly inRange: boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarRangeDayCellComponent<any>,
    'nb-calendar-range-day-cell',
    never,
    {
        date: { alias: 'date'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarRangeDayCellComponent<any>,
    never
>;

property rangeCellClass

rangeCellClass: boolean;

property select

select: EventEmitter<D>;

property selected

readonly selected: boolean;

property selectedValue

selectedValue: NbCalendarRange<D>;

property size

size: NbCalendarSize;

property start

readonly start: boolean;

property today

readonly today: boolean;

property visibleDate

visibleDate: {};

method dontFitFilter

protected dontFitFilter: () => boolean;

method greaterThanMax

protected greaterThanMax: () => boolean;

method isInRange

protected isInRange: (date: D, { start, end }: NbCalendarRange<D>) => boolean;

method onClick

onClick: () => void;

method smallerThanMin

protected smallerThanMin: () => boolean;

class NbCalendarRangeModule

class NbCalendarRangeModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarRangeModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCalendarRangeModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbCalendarRangeModule,
    [
        typeof i1.NbCalendarRangeComponent,
        typeof i2.NbCalendarRangeDayCellComponent,
        typeof i3.NbCalendarRangeYearCellComponent,
        typeof i4.NbCalendarRangeMonthCellComponent
    ],
    [typeof i5.NbBaseCalendarModule],
    [typeof i1.NbCalendarRangeComponent]
>;

class NbCalendarRangeMonthCellComponent

class NbCalendarRangeMonthCellComponent<D>
    extends NbBaseCalendarRangeCell<D>
    implements NbCalendarCell<D, NbCalendarRange<D>> {}

constructor

constructor(dateService: NbDateService<D>);

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property disabled

readonly disabled: boolean;

property inRange

readonly inRange: boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property month

readonly month: string;

property monthCellClass

monthCellClass: boolean;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarRangeMonthCellComponent<any>,
    'nb-calendar-range-month-cell',
    never,
    {
        date: { alias: 'date'; required: false };
        visibleDate: { alias: 'visibleDate'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarRangeMonthCellComponent<any>,
    never
>;

property rangeCellClass

rangeCellClass: boolean;

property rangeEnd

readonly rangeEnd: boolean;

property rangeStart

readonly rangeStart: boolean;

property select

select: EventEmitter<D>;

property selected

readonly selected: boolean;

property selectedValue

selectedValue: NbCalendarRange<D>;

property size

size: NbCalendarSize;

property today

readonly today: boolean;

property visibleDate

visibleDate: {};

method greaterThanMax

protected greaterThanMax: () => boolean;

method isInRage

protected isInRage: (date: D, range: NbCalendarRange<D>) => boolean;

method monthEnd

protected monthEnd: () => D;

method monthStart

protected monthStart: () => D;

method onClick

onClick: () => void;

method smallerThanMin

protected smallerThanMin: () => boolean;

class NbCalendarRangeYearCellComponent

class NbCalendarRangeYearCellComponent<D>
    extends NbBaseCalendarRangeCell<D>
    implements NbCalendarCell<D, NbCalendarRange<D>> {}

constructor

constructor(dateService: NbDateService<D>);

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property disabled

readonly disabled: boolean;

property inRange

readonly inRange: boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarRangeYearCellComponent<any>,
    'nb-calendar-range-year-cell',
    never,
    {
        date: { alias: 'date'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbCalendarRangeYearCellComponent<any>,
    never
>;

property rangeCellClass

rangeCellClass: boolean;

property rangeEnd

readonly rangeEnd: boolean;

property rangeStart

readonly rangeStart: boolean;

property select

select: EventEmitter<D>;

property selected

readonly selected: boolean;

property selectedValue

selectedValue: NbCalendarRange<D>;

property size

size: NbCalendarSize;

property today

readonly today: boolean;

property year

readonly year: number;

property yearCellClass

yearCellClass: boolean;

method greaterThanMax

protected greaterThanMax: () => boolean;

method isInRange

protected isInRange: (date: D, { start, end }: NbCalendarRange<D>) => boolean;

method onClick

onClick: () => void;

method smallerThanMin

protected smallerThanMin: () => boolean;

method yearEnd

protected yearEnd: () => D;

method yearStart

protected yearStart: () => D;

class NbCalendarTimeModelService

class NbCalendarTimeModelService<D> {}

constructor

constructor(dateService: NbDateService<D>);

property dateService

protected dateService: NbDateService<D>;

property MINUTES_AND_SECONDS

readonly MINUTES_AND_SECONDS: number;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarTimeModelService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbCalendarTimeModelService<any>>;

method buildDateFormat

buildDateFormat: (twelveHoursFormat: boolean, withSeconds?: boolean) => string;

method getHoursRange

getHoursRange: (step?: number) => D[];

method getResetTime

getResetTime: () => D;

method paddToTwoSymbols

paddToTwoSymbols: (n: number) => string;

class NbCalendarViewModeComponent

class NbCalendarViewModeComponent<D> {}

constructor

constructor(
    dateService: NbDateService<D>,
    yearModelService: NbCalendarYearModelService<D>
);

property changeMode

changeMode: EventEmitter<void>;

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property ngAcceptInputType_viewMode

static ngAcceptInputType_viewMode: NbCalendarViewModeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarViewModeComponent<any>,
    'nb-calendar-view-mode',
    never,
    {
        date: { alias: 'date'; required: false };
        viewMode: { alias: 'viewMode'; required: false };
    },
    { changeMode: 'changeMode' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarViewModeComponent<any>, never>;

property viewMode

viewMode: NbCalendarViewMode;

property yearModelService

protected yearModelService: NbCalendarYearModelService<D>;

method getFirstYear

protected getFirstYear: () => string;

method getIcon

getIcon: () => string;

method getLastYear

protected getLastYear: () => string;

method getText

getText: () => string;

class NbCalendarWeekNumberComponent

class NbCalendarWeekNumberComponent<D> implements OnChanges {}

constructor

constructor(dateService: NbDateService<D>);

property isLarge

readonly isLarge: boolean;

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarWeekNumberComponent<any>,
    'nb-calendar-week-numbers',
    never,
    {
        weeks: { alias: 'weeks'; required: false };
        size: { alias: 'size'; required: false };
        weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarWeekNumberComponent<any>, never>;

property size

size: NbCalendarSize;

property weekNumbers

weekNumbers: number[];

property weekNumberSymbol

weekNumberSymbol: string;

Sets symbol used as a header for week numbers column

property weeks

weeks: D[][];

method getWeeks

getWeeks: () => number[];

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class NbCalendarWithTimeComponent

class NbCalendarWithTimeComponent<D>
    extends NbCalendarComponent<D>
    implements OnInit, AfterViewInit {}

constructor

constructor(
    dateService: NbDateService<D>,
    cd: ChangeDetectorRef,
    calendarTimeModelService: NbCalendarTimeModelService<D>
);

property applyButtonText

applyButtonText: string;

property calendarTimeModelService

protected calendarTimeModelService: NbCalendarTimeModelService<D>;

property cd

cd: ChangeDetectorRef;

property currentTimeButtonText

currentTimeButtonText: string;

property dateService

protected dateService: NbDateService<D>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarWithTimeComponent<any>,
    'nb-calendar-with-time',
    never,
    {
        visibleDate: { alias: 'visibleDate'; required: false };
        twelveHoursFormat: { alias: 'twelveHoursFormat'; required: false };
        showAmPmLabel: { alias: 'showAmPmLabel'; required: false };
        withSeconds: { alias: 'withSeconds'; required: false };
        singleColumn: { alias: 'singleColumn'; required: false };
        step: { alias: 'step'; required: false };
        timeFormat: { alias: 'timeFormat'; required: false };
        title: { alias: 'title'; required: false };
        applyButtonText: { alias: 'applyButtonText'; required: false };
        currentTimeButtonText: {
            alias: 'currentTimeButtonText';
            required: false;
        };
        showCurrentTimeButton: {
            alias: 'showCurrentTimeButton';
            required: false;
        };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarWithTimeComponent<any>, never>;

property portalOutlet

portalOutlet: NbPortalOutletDirective;

property showAmPmLabel

showAmPmLabel: boolean;

Defines should show am/pm label if twelveHoursFormat enabled.

property showCurrentTimeButton

showCurrentTimeButton: boolean;

property singleColumn

singleColumn: boolean;

Show timepicker values in one column with 60 minutes step by default.

property step

step: number;

Defines minutes step when we use fill time format. If set to 20, it will be: '12:00, 12:20: 12:40, 13:00...'

property timeFormat

timeFormat: string;

Defines time format.

property timepicker

timepicker: NbTimePickerComponent<D>;

property title

title: string;

Defines text over the timepicker.

property twelveHoursFormat

twelveHoursFormat: boolean;

Defines 12 hours format like '07:00 PM'.

property visibleDate

visibleDate: {};

Defines selected date.

property withSeconds

withSeconds: boolean;

Show seconds in timepicker. Ignored when singleColumn is true.

method isLarge

isLarge: () => boolean;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnInit

ngOnInit: () => void;

method onDateValueChange

onDateValueChange: (date: D) => void;

method onTimeChange

onTimeChange: (selectedTime: NbSelectedTimePayload<D>) => void;

method saveCurrentTime

saveCurrentTime: () => void;

method saveValue

saveValue: () => void;

method showSeconds

showSeconds: () => boolean;

class NbCalendarYearCellComponent

class NbCalendarYearCellComponent<D> implements NbCalendarCell<D, D> {}

constructor

constructor(dateService: NbDateService<D>);

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property disabled

readonly disabled: boolean;

property isLarge

readonly isLarge: boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarYearCellComponent<any>,
    'nb-calendar-year-cell',
    never,
    {
        date: { alias: 'date'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        selectedValue: { alias: 'selectedValue'; required: false };
        size: { alias: 'size'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarYearCellComponent<any>, never>;

property select

select: EventEmitter<D>;

property selected

readonly selected: boolean;

property selectedValue

selectedValue: {};

property size

size: NbCalendarSize;

property today

readonly today: boolean;

property year

readonly year: number;

property yearCellClass

yearCellClass: boolean;

method onClick

onClick: () => void;

class NbCalendarYearModelService

class NbCalendarYearModelService<D> {}

constructor

constructor(dateService: NbDateService<D>);

property dateService

protected dateService: NbDateService<D>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarYearModelService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbCalendarYearModelService<any>>;

property yearsInRow

protected yearsInRow: number;

property yearsInView

protected yearsInView: number;

method copyWithYear

protected copyWithYear: (year: number, date: D) => D;

method getViewYears

getViewYears: (viewYear: D) => D[][];

method getYearsInRow

getYearsInRow: () => number;

method getYearsInView

getYearsInView: () => number;

class NbCalendarYearPickerComponent

class NbCalendarYearPickerComponent<D> implements OnChanges {}

constructor

constructor(
    dateService: NbDateService<D>,
    yearModelService: NbCalendarYearModelService<D>
);

property cellComponent

cellComponent: Type<NbCalendarCell<D, D>>;

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property filter

filter: (D: any) => boolean;

property large

readonly large: boolean;

property max

max: {};

property min

min: {};

property ngAcceptInputType_size

static ngAcceptInputType_size: NbCalendarSizeValues;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCalendarYearPickerComponent<any>,
    'nb-calendar-year-picker',
    never,
    {
        date: { alias: 'date'; required: false };
        min: { alias: 'min'; required: false };
        max: { alias: 'max'; required: false };
        filter: { alias: 'filter'; required: false };
        _cellComponent: { alias: 'cellComponent'; required: false };
        size: { alias: 'size'; required: false };
        year: { alias: 'year'; required: false };
    },
    { yearChange: 'yearChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarYearPickerComponent<any>, never>;

property size

size: NbCalendarSize;

property year

year: {};

property yearChange

yearChange: EventEmitter<D>;

property yearModelService

protected yearModelService: NbCalendarYearModelService<D>;

property years

years: D[][];

method ngOnChanges

ngOnChanges: () => void;

method onSelect

onSelect: (year: any) => void;

class NbCardBackComponent

class NbCardBackComponent {}

Component intended to be used within the <nb-flip-card> and <nb-reveal-card> components.
Use it as a container for the back card.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCardBackComponent,
    'nb-card-back',
    never,
    {},
    {},
    never,
    ['nb-card'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardBackComponent, never>;

class NbCardBodyComponent

class NbCardBodyComponent {}

Component intended to be used within the <nb-card> component. Adds styles for a preset body section.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCardBodyComponent,
    'nb-card-body',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardBodyComponent, never>;

class NbCardComponent

class NbCardComponent {}

Basic content container component.
Basic card example: @stacked-example(Showcase, card/card-showcase.component)
Basic card configuration:
<nb-card> <nb-card-body> Card </nb-card-body> </nb-card>
### Installation
Import NbCardModule to your feature module.
@NgModule({ imports: [ // ... NbCardModule, ], }) export class PageModule { }
### Usage
Card with header and footer: @stacked-example(With Header & Footer, card/card-full.component)
Most of the time main card content goes to nb-card-body, so it is styled and aligned in accordance with the header and footer. In case you need a higher level of control, you can pass contend directly to nb-card, so nb-card-body styling will not be applied.
Consider an example with nb-list component: @stacked-example(Card with list, card/card-without-body.component)
Colored cards could be simply configured by providing a status property: @stacked-example(Colored Card, card/card-colors.component)
It is also possible to assign an accent property for a slight card highlight as well as combine it with status: @stacked-example(Accent Card, card/card-accents.component)
Cards of smaller sizes could be combined and put on the same row with a bigger card so they have the same heights. @stacked-example(Card sizes combinations, card/card-sizes-combinations.component)
@additional-example(Multiple Sizes, card/card-sizes.component)
card-background-color: card-text-color: card-text-font-family: card-text-font-size: card-text-font-weight: card-text-line-height: card-border-width: card-border-style: card-border-color: card-border-radius: card-padding: card-shadow: card-divider-color: card-divider-style: card-divider-width: card-height-tiny: card-height-small: card-height-medium: card-height-large: card-height-giant: card-margin-bottom: card-scrollbar-color: card-scrollbar-background-color: card-scrollbar-width:

constructor

constructor(statusService: NbStatusService);

property accent

accent: '' | NbComponentStatus;

Card accent (color of the top border): basic, primary, info, success, warning, danger, control

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property basicAccent

readonly basicAccent: boolean;

property control

readonly control: boolean;

property controlAccent

readonly controlAccent: boolean;

property danger

readonly danger: boolean;

property dangerAccent

readonly dangerAccent: boolean;

property giant

readonly giant: boolean;

property hasAccent

readonly hasAccent: '' | NbComponentStatus;

property info

readonly info: boolean;

property infoAccent

readonly infoAccent: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCardComponent,
    'nb-card',
    never,
    {
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        accent: { alias: 'accent'; required: false };
    },
    {},
    never,
    ['nb-card-header', 'nb-card-body', '*', 'nb-card-footer'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardComponent, never>;

property primary

readonly primary: boolean;

property primaryAccent

readonly primaryAccent: boolean;

property size

size: '' | NbComponentSize;

Card size, available sizes: tiny, small, medium, large, giant

property small

readonly small: boolean;

property status

status: string;

Card status: basic, primary, info, success, warning, danger, control

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property successAccent

readonly successAccent: boolean;

property tiny

readonly tiny: boolean;

property warning

readonly warning: boolean;

property warningAccent

readonly warningAccent: boolean;

class NbCardFooterComponent

class NbCardFooterComponent {}

Component intended to be used within the <nb-card> component. Adds styles for a preset footer section.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCardFooterComponent,
    'nb-card-footer',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardFooterComponent, never>;

class NbCardFrontComponent

class NbCardFrontComponent {}

Component intended to be used within the <nb-flip-card> and <nb-reveal-card> components.
Use it as a container for the front card.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCardFrontComponent,
    'nb-card-front',
    never,
    {},
    {},
    never,
    ['nb-card'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardFrontComponent, never>;

class NbCardHeaderComponent

class NbCardHeaderComponent {}

Component intended to be used within the <nb-card> component. It adds styles for a preset header section.
card-header-text-color: card-header-text-font-family: card-header-text-font-size: card-header-text-font-weight: card-header-text-line-height: card-header-basic-background-color: card-header-basic-text-color: card-header-primary-background-color: card-header-primary-text-color: card-header-info-background-color: card-header-info-text-color: card-header-success-background-color: card-header-success-text-color: card-header-warning-background-color: card-header-warning-text-color: card-header-danger-background-color: card-header-danger-text-color: card-header-control-background-color: card-header-control-text-color:

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCardHeaderComponent,
    'nb-card-header',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardHeaderComponent, never>;

class NbCardModule

class NbCardModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCardModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCardModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbCardModule,
    [
        typeof i1.NbCardComponent,
        typeof i1.NbCardBodyComponent,
        typeof i1.NbCardFooterComponent,
        typeof i1.NbCardHeaderComponent,
        typeof i2.NbRevealCardComponent,
        typeof i3.NbFlipCardComponent,
        typeof i4.NbCardFrontComponent,
        typeof i4.NbCardBackComponent
    ],
    [typeof i5.NbSharedModule, typeof i6.NbIconModule],
    [
        typeof i1.NbCardComponent,
        typeof i1.NbCardBodyComponent,
        typeof i1.NbCardFooterComponent,
        typeof i1.NbCardHeaderComponent,
        typeof i2.NbRevealCardComponent,
        typeof i3.NbFlipCardComponent,
        typeof i4.NbCardFrontComponent,
        typeof i4.NbCardBackComponent
    ]
>;

class NbCdkAdapterModule

class NbCdkAdapterModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCdkAdapterModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCdkAdapterModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<NbCdkAdapterModule, never, never, never>;

method forRoot

static forRoot: () => ModuleWithProviders<NbCdkAdapterModule>;

class NbCdkMappingModule

class NbCdkMappingModule {}

This module helps us to keep all angular/cdk deps inside our cdk module via providing aliases. Approach will help us move cdk in separate npm package and refactor nebular/theme code.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCdkMappingModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCdkMappingModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbCdkMappingModule,
    [typeof NbPortalDirective, typeof NbPortalOutletDirective],
    [any, any],
    [any, any, typeof NbPortalDirective, typeof NbPortalOutletDirective]
>;

method forRoot

static forRoot: () => ModuleWithProviders<NbCdkMappingModule>;

class NbCellDefDirective

class NbCellDefDirective extends CdkCellDef {}

Cell definition for the nb-table. Captures the template of a column's data row cell as well as cell-specific properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbCellDefDirective,
    '[nbCellDef]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCellDefDirective, never>;

class NbCellDirective

class NbCellDirective extends CdkCell {}

Cell template container that adds the right classes and role.

constructor

constructor(
    columnDef: NbColumnDefDirective,
    elementRef: ElementRef<HTMLElement>
);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbCellDirective,
    'nb-cell, td[nbCell]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCellDirective, never>;

class NbCellOutletDirective

class NbCellOutletDirective extends CdkCellOutlet {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbCellOutletDirective,
    '[nbCellOutlet]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCellOutletDirective, never>;

class NbChatAvatarComponent

class NbChatAvatarComponent {}

property avatarClass

readonly avatarClass: boolean;

property avatarStyle

avatarStyle: SafeStyle;

property initials

initials: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatAvatarComponent,
    'nb-chat-avatar',
    never,
    {
        initials: { alias: 'initials'; required: false };
        avatarStyle: { alias: 'avatarStyle'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatAvatarComponent, never>;

class NbChatComponent

class NbChatComponent implements OnChanges, AfterContentInit, AfterViewInit {}

Conversational UI collection - a set of components for chat-like UI construction.
Main features: - different message types support (text, image, file, file group, map, etc) - drag & drop for images and files with preview - different UI styles - custom action buttons (coming soon)
Here's a complete example build in a bot-like app. Type help to be able to receive different message types. Enjoy the conversation and the beautiful UI. @stacked-example(Showcase, chat/chat-showcase.component)
Basic chat configuration and usage:
<nb-chat title="Nebular Conversational UI"> <nb-chat-message *ngFor="let msg of messages" [type]="msg.type" [message]="msg.text" [reply]="msg.reply" [sender]="msg.user.name" [date]="msg.date" [files]="msg.files" [quote]="msg.quote" [latitude]="msg.latitude" [longitude]="msg.longitude" [avatar]="msg.user.avatar"> </nb-chat-message> <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"> </nb-chat-form> </nb-chat>
### Installation
Import NbChatModule to your feature module.
@NgModule({ imports: [ // ... NbChatModule, ], }) export class PageModule { }
If you need to provide an API key for a map message type (which is required by Google Maps) you may use NbChatModule.forRoot({ ... }) call if this is a global app configuration or NbChatModule.forChild({ ... }) for a feature module configuration:
@NgModule({ imports: [ // ... NbChatModule.forRoot({ messageGoogleMapKey: 'MAP_KEY' }), ], }) export class AppModule { }
### Usage
There are three main components:
<nb-chat> </nb-chat> // chat container <nb-chat-form> </nb-chat-form> // chat form with drag&drop files feature <nb-chat-message> </nb-chat-message> // chat message, available multiple types
You could provide a title template via the nbChatTitle directive. It overrides title input. @stacked-example(Custom template as a title, chat/chat-template-title.component)
Two users conversation showcase: @stacked-example(Conversation, chat/chat-conversation-showcase.component)
Chat UI is also available in different colors by specifying a [status] input:
@stacked-example(Colored Chat, chat/chat-colors.component)
Also it is possible to configure sizes through [size] input:
@stacked-example(Chat Sizes, chat/chat-sizes.component)
# Custom message types
Besides built-in message types, you could provide custom ones with their own template to render. As an example, let's add the link message type. First, you need to provide a template for the link message type:
<nb-chat> <a *nbCustomMessage="'link'" href="https://example.com">example.com</a> </nb-chat>
Then, add the nb-chat-message component with the link type:
<nb-chat> <a *nbCustomMessage="'link'" href="https://example.com">example.com</a> <nb-chat-message type="link"></nb-chat-message> </nb-chat>
Important! Custom chat messages must be defined before the nb-chat-message.
Custom message templates could have arbitrary data associated with them. Let's extract hardcoded link href and text. To pass some data to the custom message template, use the customMessageData input of the nb-chat-message component:
... <nb-chat-message type="link" [customMessageData]="{ href: 'https://example.com', text: 'example.com' }"> </nb-chat-message> ...
When customMessageData is set, this object would become a template context and you'll be able to reference it via let varName syntax:
<a *nbCustomMessage="'link'; let data" [href]="data.href">{{ data.text }}</a>
That's it, full example will look like this:
<nb-chat title="Nebular Conversational UI"> <a *nbCustomMessage="'link'; let data" [href]="data.href">{{ data.text }}</a> <nb-chat-message type="link" [customMessageData]="{ href: 'https://example.com', text: 'example.com' }"> </nb-chat-message> </nb-chat>
If you want to style your custom template from the ground up you could turn off generic message styling (such as round borders, color, background, etc.) via the noStyles input:
<div *nbCustomMessage="'my-custom-type'; noStyles: true">...</div>
When you decide to use your own styles, the isReply property of the custom message template context would come in handy. This property allows you to determine whether the message is a reply or not. For example, to change link text color (as replies have a different background):
<a *nbCustomMessage="'link'; let data; let isReply=isReply" [href]="data.href" [class.link-control]="!isReply"> {{ data.label }} </a>
Below, you could find a more complex example with multiple custom message types: @stacked-example(Custom message, chat/chat-custom-message.component)
chat-background-color: chat-border: chat-border-radius: chat-shadow: chat-padding: chat-scrollbar-color: chat-scrollbar-background-color: chat-scrollbar-width: chat-text-color: chat-text-font-family: chat-text-font-size: chat-text-font-weight: chat-text-line-height: chat-header-text-font-family: chat-header-text-font-size: chat-header-text-font-weight: chat-header-text-line-height: chat-tiny-height: chat-small-height: chat-medium-height: chat-large-height: chat-giant-height: chat-basic-background-color: chat-basic-text-color: chat-primary-background-color: chat-primary-text-color: chat-success-background-color: chat-success-text-color: chat-info-background-color: chat-info-text-color: chat-warning-background-color: chat-warning-text-color: chat-danger-background-color: chat-danger-text-color: chat-control-background-color: chat-control-text-color: chat-divider-color: chat-divider-style: chat-divider-width: chat-message-background: chat-message-text-color: chat-message-reply-background-color: chat-message-reply-text-color: chat-message-avatar-background-color: chat-message-sender-text-color: chat-message-quote-background-color: chat-message-quote-text-color: chat-message-file-text-color: chat-message-file-background-color:

constructor

constructor(statusService: NbStatusService);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property chatForm

chatForm: NbChatFormComponent;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property giant

readonly giant: boolean;

property info

readonly info: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property messages

messages: QueryList<NbChatMessageComponent>;

property ngAcceptInputType_scrollBottom

static ngAcceptInputType_scrollBottom: NbBooleanInput;

property noMessagesPlaceholder

noMessagesPlaceholder: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatComponent,
    'nb-chat',
    never,
    {
        title: { alias: 'title'; required: false };
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        noMessagesPlaceholder: {
            alias: 'noMessagesPlaceholder';
            required: false;
        };
        scrollBottom: { alias: 'scrollBottom'; required: false };
    },
    {},
    ['chatForm', 'titleTemplate', 'messages'],
    ['nb-chat-message', 'nb-chat-form'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatComponent, never>;

property primary

readonly primary: boolean;

property scrollable

scrollable: ElementRef;

property scrollBottom

scrollBottom: boolean;

Scroll chat to the bottom of the list when a new message arrives

property size

size: NbComponentSize;

Chat size, available sizes: tiny, small, medium, large, giant

property small

readonly small: boolean;

property status

status: string;

Chat status color (adds specific styles): basic (default), primary, success, info, warning, danger, control.

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property tiny

readonly tiny: boolean;

property title

title: string;

property titleTemplate

titleTemplate: NbChatTitleDirective;

property warning

readonly warning: boolean;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method scrollListBottom

scrollListBottom: () => void;

method updateFormStatus

protected updateFormStatus: () => void;

method updateView

updateView: () => void;

class NbChatCustomMessageDirective

class NbChatCustomMessageDirective implements OnInit, OnDestroy {}

[nbCustomMessage] directive should be used as a structural directive or should be applied to the ng-template:

<div *nbCustomMessage="'my-custom-type'; let data">
  <!-- custom message -->
</div>

<ng-template nbCustomMessage='my-custom-type' let-data>
  <!-- custom message -->
</ng-template>

constructor

constructor(
    templateRef: TemplateRef<any>,
    customMessageService: NbChatCustomMessageService
);

property customMessageService

protected customMessageService: NbChatCustomMessageService;

property nbCustomMessage

nbCustomMessage: string;

Defines a message type which should rendered with the custom message template. {string}

property nbCustomMessageNoStyles

nbCustomMessageNoStyles: boolean;

property ngAcceptInputType_noStyles

static ngAcceptInputType_noStyles: NbBooleanInput;

property noStyles

readonly noStyles: boolean;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbChatCustomMessageDirective,
    '[nbCustomMessage]',
    never,
    {
        nbCustomMessage: { alias: 'nbCustomMessage'; required: false };
        nbCustomMessageNoStyles: {
            alias: 'nbCustomMessageNoStyles';
            required: false;
        };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatCustomMessageDirective, never>;

property templateRef

templateRef: TemplateRef<any>;

property type

readonly type: string;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbChatCustomMessageService

class NbChatCustomMessageService {}

NbCustomMessageService is used to store instances of NbChatCustomMessageDirectives which were provided in the chat component.

property customMessages

protected readonly customMessages: Map<string, NbChatCustomMessageDirective>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatCustomMessageService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbChatCustomMessageService>;

method getInstance

getInstance: (type: string) => NbChatCustomMessageDirective | undefined;

method register

register: (type: string, instance: NbChatCustomMessageDirective) => void;

method unregister

unregister: (type: string) => boolean;

class NbChatFormComponent

class NbChatFormComponent {}

Chat form component.
Show a message form with a send message button.
<nb-chat-form showButton="true" buttonIcon="nb-send"> </nb-chat-form>
When [dropFiles]="true" handles files drag&drop with a file preview.
Drag & drop available for files and images: @stacked-example(Drag & Drop Chat, chat/chat-drop.component)
New message could be tracked outside by using (send) output.
<nb-chat-form (send)="onNewMessage($event)"> </nb-chat-form> // ... onNewMessage({ message: string, files: any[] }) { this.service.sendToServer(message, files); }

constructor

constructor(cd: ChangeDetectorRef, domSanitizer: DomSanitizer);

property buttonIcon

buttonIcon: string;

Send button icon, shown if buttonTitle is empty {string}

property buttonTitle

buttonTitle: string;

Send button title {string}

property cd

protected cd: ChangeDetectorRef;

property domSanitizer

protected domSanitizer: DomSanitizer;

property dropFilePlaceholder

dropFilePlaceholder: string;

File drop placeholder text {string}

property dropFiles

dropFiles: boolean;

Show send button {boolean}

property droppedFiles

droppedFiles: any[];

property fileOver

fileOver: boolean;

property imgDropTypes

imgDropTypes: string[];

property inputFocus

inputFocus: boolean;

property inputHover

inputHover: boolean;

property message

message: string;

Predefined message text {string}

property messagePlaceholder

messagePlaceholder: string;

Message placeholder text {string}

property onInputChange

onInputChange: EventEmitter<string>;

Emits when message input value has been changed {EventEmitter}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatFormComponent,
    'nb-chat-form',
    never,
    {
        message: { alias: 'message'; required: false };
        messagePlaceholder: { alias: 'messagePlaceholder'; required: false };
        buttonTitle: { alias: 'buttonTitle'; required: false };
        buttonIcon: { alias: 'buttonIcon'; required: false };
        showButton: { alias: 'showButton'; required: false };
        dropFiles: { alias: 'dropFiles'; required: false };
        dropFilePlaceholder: { alias: 'dropFilePlaceholder'; required: false };
    },
    { send: 'send'; onInputChange: 'onInputChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatFormComponent, never>;

property send

send: EventEmitter<{ message: string; files: File[] }>;

{EventEmitter<{ message: string, files: File[] }>}

property showButton

showButton: boolean;

Show send button {boolean}

property status

status: string;

method getButtonStatus

getButtonStatus: () => NbComponentOrCustomStatus;

method getHighlightStatus

protected getHighlightStatus: () => NbComponentOrCustomStatus;

method getInputStatus

getInputStatus: () => NbComponentOrCustomStatus;

method onDragLeave

onDragLeave: (event: DragEvent) => void;

method onDragOver

onDragOver: (event: DragEvent) => void;

method onDrop

onDrop: (event: any) => void;

method onModelChange

onModelChange: (value: string) => void;

method removeFile

removeFile: (file: any) => void;

method sendMessage

sendMessage: () => void;

method setStatus

setStatus: (status: NbComponentOrCustomStatus) => void;

class NbChatMessageComponent

class NbChatMessageComponent {}

Chat message component.
Multiple message types are available through a type property, such as - text - simple text message - file - could be a file preview or a file icon if multiple files are provided grouped files are shown - quote - quotes a message with specific quote styles - map - shows a google map picture by provided [latitude] and [longitude] properties
@stacked-example(Available Types, chat/chat-message-types-showcase.component)
Message with attached files:
<nb-chat-message type="file" [files]="[ { url: '...' } ]" message="Hello world!"> </nb-chat-message>
Map message:
<nb-chat-message type="map" [latitude]="53.914" [longitude]="27.59" message="Here I am"> </nb-chat-message>
chat-message-background: chat-message-text-color: chat-message-reply-background-color: chat-message-reply-text-color: chat-message-avatar-background-color: chat-message-sender-text-color: chat-message-quote-background-color: chat-message-quote-text-color: chat-message-file-text-color: chat-message-file-background-color:

constructor

constructor(
    domSanitizer: DomSanitizer,
    customMessageService: NbChatCustomMessageService
);

property avatarStyle

avatarStyle: SafeStyle;

property builtInMessageTypes

protected readonly builtInMessageTypes: string[];

property customMessageData

customMessageData: any;

Data which will be set as custom message template context {any}

property customMessageService

protected customMessageService: NbChatCustomMessageService;

property date

date: Date;

Message send date {Date}

property dateFormat

dateFormat: string;

Message send date format, default 'shortTime' {string}

property domSanitizer

protected domSanitizer: DomSanitizer;

property files

files: NbChatMessageFile[];

Array of files { url: 'file url', icon: 'file icon class' }

property flyInOut

readonly flyInOut: boolean;

property latitude

latitude: number;

Map latitude {number}

property longitude

longitude: number;

Map longitude {number}

property message

message: string;

Message sender {string}

property ngAcceptInputType_reply

static ngAcceptInputType_reply: NbBooleanInput;

property notReply

readonly notReply: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatMessageComponent,
    'nb-chat-message',
    never,
    {
        reply: { alias: 'reply'; required: false };
        message: { alias: 'message'; required: false };
        sender: { alias: 'sender'; required: false };
        date: { alias: 'date'; required: false };
        dateFormat: { alias: 'dateFormat'; required: false };
        files: { alias: 'files'; required: false };
        quote: { alias: 'quote'; required: false };
        latitude: { alias: 'latitude'; required: false };
        longitude: { alias: 'longitude'; required: false };
        avatar: { alias: 'avatar'; required: false };
        type: { alias: 'type'; required: false };
        customMessageData: { alias: 'customMessageData'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageComponent, never>;

property quote

quote: string;

Quoted message text {string}

property reply

reply: boolean;

Determines if a message is a reply

property sender

sender: string;

Message sender {string}

property type

type: string;

Message type, available options text|file|map|quote {string}

method getCustomMessage

protected getCustomMessage: (type: string) => NbChatCustomMessageDirective;

method getInitials

getInitials: () => string;

class NbChatMessageFileComponent

class NbChatMessageFileComponent {}

Chat message component.

constructor

constructor(cd: ChangeDetectorRef, domSanitizer: DomSanitizer);

property cd

protected cd: ChangeDetectorRef;

property date

date: Date;

Message send date {Date}

property dateFormat

dateFormat: string;

Message send date format, default 'shortTime' {string}

property domSanitizer

protected domSanitizer: DomSanitizer;

property message

message: string;

Message sender {string}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatMessageFileComponent,
    'nb-chat-message-file',
    never,
    {
        message: { alias: 'message'; required: false };
        sender: { alias: 'sender'; required: false };
        date: { alias: 'date'; required: false };
        dateFormat: { alias: 'dateFormat'; required: false };
        files: { alias: 'files'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageFileComponent, never>;

property readyFiles

readyFiles: any[];

property sender

sender: string;

Message sender {string}

method isImage

isImage: (file: NbChatMessageFile) => boolean;

class NbChatMessageMapComponent

class NbChatMessageMapComponent {}

Chat message component.

constructor

constructor(options: NbChatOptions);

property date

date: Date;

Message send date {Date}

property dateFormat

dateFormat: string;

Message send date format, default 'shortTime' {string}

property file

readonly file: { url: string; type: string; icon: string };

property latitude

latitude: number;

Map latitude {number}

property longitude

longitude: number;

Map longitude {number}

property mapKey

mapKey: string;

property message

message: string;

Message sender {string}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatMessageMapComponent,
    'nb-chat-message-map',
    never,
    {
        message: { alias: 'message'; required: false };
        sender: { alias: 'sender'; required: false };
        date: { alias: 'date'; required: false };
        dateFormat: { alias: 'dateFormat'; required: false };
        latitude: { alias: 'latitude'; required: false };
        longitude: { alias: 'longitude'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageMapComponent, never>;

property sender

sender: string;

Message sender {string}

class NbChatMessageQuoteComponent

class NbChatMessageQuoteComponent {}

Chat message component.

property date

date: Date;

Message send date {Date}

property dateFormat

dateFormat: string;

Message send date format, default 'shortTime' {string}

property message

message: string;

Message sender {string}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatMessageQuoteComponent,
    'nb-chat-message-quote',
    never,
    {
        message: { alias: 'message'; required: false };
        sender: { alias: 'sender'; required: false };
        date: { alias: 'date'; required: false };
        dateFormat: { alias: 'dateFormat'; required: false };
        quote: { alias: 'quote'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageQuoteComponent, never>;

property quote

quote: string;

Quoted message {Date}

property sender

sender: string;

Message sender {string}

class NbChatMessageTextComponent

class NbChatMessageTextComponent {}

Chat message component.

property date

date: Date;

Message send date {Date}

property dateFormat

dateFormat: string;

Message send date format, default 'shortTime' {string}

property message

message: string;

Message sender {string}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbChatMessageTextComponent,
    'nb-chat-message-text',
    never,
    {
        sender: { alias: 'sender'; required: false };
        message: { alias: 'message'; required: false };
        date: { alias: 'date'; required: false };
        dateFormat: { alias: 'dateFormat'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageTextComponent, never>;

property sender

sender: string;

Message sender {string}

class NbChatModule

class NbChatModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbChatModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbChatModule,
    [
        typeof i1.NbChatComponent,
        typeof i2.NbChatMessageComponent,
        typeof i3.NbChatFormComponent,
        typeof i4.NbChatMessageTextComponent,
        typeof i5.NbChatMessageFileComponent,
        typeof i6.NbChatMessageQuoteComponent,
        typeof i7.NbChatMessageMapComponent,
        typeof i8.NbChatAvatarComponent,
        typeof i9.NbChatCustomMessageDirective,
        typeof i10.NbChatTitleDirective
    ],
    [
        typeof i11.NbSharedModule,
        typeof i12.NbIconModule,
        typeof i13.NbInputModule,
        typeof i14.NbButtonModule
    ],
    [
        typeof i1.NbChatComponent,
        typeof i2.NbChatMessageComponent,
        typeof i3.NbChatFormComponent,
        typeof i4.NbChatMessageTextComponent,
        typeof i5.NbChatMessageFileComponent,
        typeof i6.NbChatMessageQuoteComponent,
        typeof i7.NbChatMessageMapComponent,
        typeof i8.NbChatAvatarComponent,
        typeof i9.NbChatCustomMessageDirective,
        typeof i10.NbChatTitleDirective
    ]
>;

method forChild

static forChild: (options?: NbChatOptions) => ModuleWithProviders<NbChatModule>;

method forRoot

static forRoot: (options?: NbChatOptions) => ModuleWithProviders<NbChatModule>;

class NbChatOptions

class NbChatOptions {}

Copyright Akveo. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.

property messageGoogleMapKey

messageGoogleMapKey?: string;

class NbChatTitleDirective

class NbChatTitleDirective {}

constructor

constructor(templateRef: TemplateRef<any>);

property context

context: Object;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbChatTitleDirective,
    '[nbChatTitle]',
    never,
    { context: { alias: 'context'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbChatTitleDirective, never>;

property templateRef

templateRef: TemplateRef<any>;

class NbCheckboxComponent

class NbCheckboxComponent implements AfterViewInit, ControlValueAccessor {}

Styled checkbox component
@stacked-example(Showcase, checkbox/checkbox-showcase.component)
### Installation
Import NbCheckboxComponent to your feature module.
@NgModule({ imports: [ // ... NbCheckboxModule, ], }) export class PageModule { }
### Usage
Checkbox is available in multiple colors using status property: @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)
Indeterminate state is also supported: @stacked-example(Indeterminate Checkbox, checkbox/checkbox-indeterminate.component)
Checkbox can be disabled via disabled attribute. @stacked-example(Disabled Checkbox, checkbox/checkbox-disabled.component)
checkbox-height: checkbox-width: checkbox-border-style: checkbox-border-width: checkbox-border-radius: checkbox-outline-width: checkbox-outline-color: checkbox-text-font-family: checkbox-text-font-size: checkbox-text-font-weight: checkbox-text-line-height: checkbox-text-space: checkbox-padding: checkbox-focus-inset-shadow-length: checkbox-basic-text-color: checkbox-basic-background-color: checkbox-basic-border-color: checkbox-basic-checked-background-color: checkbox-basic-checked-border-color: checkbox-basic-checked-checkmark-color: checkbox-basic-indeterminate-background-color: checkbox-basic-indeterminate-border-color: checkbox-basic-indeterminate-checkmark-color: checkbox-basic-focus-background-color: checkbox-basic-focus-border-color: checkbox-basic-focus-checked-background-color: checkbox-basic-focus-checked-border-color: checkbox-basic-hover-background-color: checkbox-basic-hover-border-color: checkbox-basic-hover-checked-background-color: checkbox-basic-hover-checked-border-color: checkbox-basic-active-background-color: checkbox-basic-active-border-color: checkbox-basic-active-checked-background-color: checkbox-basic-active-checked-border-color: checkbox-basic-disabled-background-color: checkbox-basic-disabled-border-color: checkbox-basic-disabled-checkmark-color: checkbox-basic-disabled-text-color: checkbox-basic-disabled-checked-background-color: checkbox-primary-text-color: checkbox-primary-background-color: checkbox-primary-border-color: checkbox-primary-checked-background-color: checkbox-primary-checked-border-color: checkbox-primary-checked-checkmark-color: checkbox-primary-indeterminate-background-color: checkbox-primary-indeterminate-border-color: checkbox-primary-indeterminate-checkmark-color: checkbox-primary-focus-background-color: checkbox-primary-focus-border-color: checkbox-primary-focus-checked-background-color: checkbox-primary-focus-checked-border-color: checkbox-primary-hover-background-color: checkbox-primary-hover-border-color: checkbox-primary-hover-checked-background-color: checkbox-primary-hover-checked-border-color: checkbox-primary-active-background-color: checkbox-primary-active-border-color: checkbox-primary-active-checked-background-color: checkbox-primary-active-checked-border-color: checkbox-primary-disabled-background-color: checkbox-primary-disabled-border-color: checkbox-primary-disabled-checkmark-color: checkbox-primary-disabled-text-color: checkbox-primary-disabled-checked-background-color: checkbox-success-text-color: checkbox-success-background-color: checkbox-success-border-color: checkbox-success-checked-background-color: checkbox-success-checked-border-color: checkbox-success-checked-checkmark-color: checkbox-success-indeterminate-background-color: checkbox-success-indeterminate-border-color: checkbox-success-indeterminate-checkmark-color: checkbox-success-focus-background-color: checkbox-success-focus-border-color: checkbox-success-focus-checked-background-color: checkbox-success-focus-checked-border-color: checkbox-success-hover-background-color: checkbox-success-hover-border-color: checkbox-success-hover-checked-background-color: checkbox-success-hover-checked-border-color: checkbox-success-active-background-color: checkbox-success-active-border-color: checkbox-success-active-checked-background-color: checkbox-success-active-checked-border-color: checkbox-success-disabled-background-color: checkbox-success-disabled-border-color: checkbox-success-disabled-checkmark-color: checkbox-success-disabled-text-color: checkbox-success-disabled-checked-background-color: checkbox-info-text-color: checkbox-info-background-color: checkbox-info-border-color: checkbox-info-checked-background-color: checkbox-info-checked-border-color: checkbox-info-checked-checkmark-color: checkbox-info-indeterminate-background-color: checkbox-info-indeterminate-border-color: checkbox-info-indeterminate-checkmark-color: checkbox-info-focus-background-color: checkbox-info-focus-border-color: checkbox-info-focus-checked-background-color: checkbox-info-focus-checked-border-color: checkbox-info-hover-background-color: checkbox-info-hover-border-color: checkbox-info-hover-checked-background-color: checkbox-info-hover-checked-border-color: checkbox-info-active-background-color: checkbox-info-active-border-color: checkbox-info-active-checked-background-color: checkbox-info-active-checked-border-color: checkbox-info-disabled-background-color: checkbox-info-disabled-border-color: checkbox-info-disabled-checkmark-color: checkbox-info-disabled-text-color: checkbox-info-disabled-checked-background-color: checkbox-warning-text-color: checkbox-warning-background-color: checkbox-warning-border-color: checkbox-warning-checked-background-color: checkbox-warning-checked-border-color: checkbox-warning-checked-checkmark-color: checkbox-warning-indeterminate-background-color: checkbox-warning-indeterminate-border-color: checkbox-warning-indeterminate-checkmark-color: checkbox-warning-focus-background-color: checkbox-warning-focus-border-color: checkbox-warning-focus-checked-background-color: checkbox-warning-focus-checked-border-color: checkbox-warning-hover-background-color: checkbox-warning-hover-border-color: checkbox-warning-hover-checked-background-color: checkbox-warning-hover-checked-border-color: checkbox-warning-active-background-color: checkbox-warning-active-border-color: checkbox-warning-active-checked-background-color: checkbox-warning-active-checked-border-color: checkbox-warning-disabled-background-color: checkbox-warning-disabled-border-color: checkbox-warning-disabled-checkmark-color: checkbox-warning-disabled-text-color: checkbox-warning-disabled-checked-background-color: checkbox-danger-text-color: checkbox-danger-background-color: checkbox-danger-border-color: checkbox-danger-checked-background-color: checkbox-danger-checked-border-color: checkbox-danger-checked-checkmark-color: checkbox-danger-indeterminate-background-color: checkbox-danger-indeterminate-border-color: checkbox-danger-indeterminate-checkmark-color: checkbox-danger-focus-background-color: checkbox-danger-focus-border-color: checkbox-danger-focus-checked-background-color: checkbox-danger-focus-checked-border-color: checkbox-danger-hover-background-color: checkbox-danger-hover-border-color: checkbox-danger-hover-checked-background-color: checkbox-danger-hover-checked-border-color: checkbox-danger-active-background-color: checkbox-danger-active-border-color: checkbox-danger-active-checked-background-color: checkbox-danger-active-checked-border-color: checkbox-danger-disabled-background-color: checkbox-danger-disabled-border-color: checkbox-danger-disabled-checkmark-color: checkbox-danger-disabled-text-color: checkbox-danger-disabled-checked-background-color: checkbox-control-text-color: checkbox-control-background-color: checkbox-control-border-color: checkbox-control-checked-background-color: checkbox-control-checked-border-color: checkbox-control-checked-checkmark-color: checkbox-control-indeterminate-background-color: checkbox-control-indeterminate-border-color: checkbox-control-indeterminate-checkmark-color: checkbox-control-focus-background-color: checkbox-control-focus-border-color: checkbox-control-focus-checked-background-color: checkbox-control-focus-checked-border-color: checkbox-control-hover-background-color: checkbox-control-hover-border-color: checkbox-control-hover-checked-background-color: checkbox-control-hover-checked-border-color: checkbox-control-active-background-color: checkbox-control-active-border-color: checkbox-control-active-checked-background-color: checkbox-control-active-checked-border-color: checkbox-control-disabled-background-color: checkbox-control-disabled-border-color: checkbox-control-disabled-checkmark-color: checkbox-control-disabled-text-color: checkbox-control-disabled-checked-background-color:

constructor

constructor(
    changeDetector: ChangeDetectorRef,
    renderer: Renderer2,
    hostElement: ElementRef<HTMLElement>,
    zone: NgZone,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property checked

checked: boolean;

property checkedChange

checkedChange: EventEmitter<boolean>;

Output when checked state is changed by a user EventEmitter

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property disabled

disabled: boolean;

Controls input disabled state

property indeterminate

indeterminate: boolean;

Controls checkbox indeterminate state

property info

readonly info: boolean;

property ngAcceptInputType_checked

static ngAcceptInputType_checked: NbBooleanInput;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_indeterminate

static ngAcceptInputType_indeterminate: NbBooleanInput;

property onChange

onChange: any;

property onTouched

onTouched: any;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbCheckboxComponent,
    'nb-checkbox',
    never,
    {
        checked: { alias: 'checked'; required: false };
        disabled: { alias: 'disabled'; required: false };
        status: { alias: 'status'; required: false };
        indeterminate: { alias: 'indeterminate'; required: false };
    },
    { checkedChange: 'checkedChange' },
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCheckboxComponent, never>;

property primary

readonly primary: boolean;

property status

status: string;

Checkbox status. Possible values are: basic, primary, success, warning, danger, info, control.

property success

readonly success: boolean;

property warning

readonly warning: boolean;

method ngAfterViewInit

ngAfterViewInit: () => void;

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method setDisabledState

setDisabledState: (val: boolean) => void;

method setTouched

setTouched: () => void;

method updateValueAndIndeterminate

updateValueAndIndeterminate: (event: Event) => void;

method writeValue

writeValue: (val: any) => void;

class NbCheckboxModule

class NbCheckboxModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbCheckboxModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbCheckboxModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbCheckboxModule,
    [typeof i1.NbCheckboxComponent],
    [typeof i2.NbSharedModule, typeof i3.NbIconModule],
    [typeof i1.NbCheckboxComponent]
>;

class NbClickTriggerStrategy

class NbClickTriggerStrategy extends NbTriggerStrategyBase {}

Creates show and hide event streams. Fires toggle event when the click was performed on the host element. Fires close event when the click was performed on the document but not on the host or container.

property click$

protected click$: Observable<[boolean, Event]>;

property hide$

readonly hide$: Observable<Event>;

property show$

readonly show$: Observable<Event>;

class NbColorHelper

class NbColorHelper {}

method hexToRgbA

static hexToRgbA: (hex: any, alpha: any) => string;

method mix

static mix: (color1: any, color2: any, weight: any) => string;

method shade

static shade: (color: any, weight: any) => string;

method tint

static tint: (color: any, weight: any) => string;

class NbColumnDefDirective

class NbColumnDefDirective extends CdkColumnDef {}

Column definition for the nb-table. Defines a set of cells available for a table column.

property name

name: string;

Unique name for this column.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbColumnDefDirective,
    '[nbColumnDef]',
    never,
    {
        name: { alias: 'nbColumnDef'; required: false };
        sticky: { alias: 'sticky'; required: false };
        stickyEnd: { alias: 'stickyEnd'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbColumnDefDirective, never>;

property sticky

sticky: boolean;

Whether this column should be sticky positioned at the start of the row

property stickyEnd

stickyEnd: boolean;

Whether this column should be sticky positioned on the end of the row

method hasStickyChanged

hasStickyChanged: () => boolean;

Whether the sticky state has changed.

method resetStickyChanged

resetStickyChanged: () => void;

Resets the sticky changed state.

class NbColumnsService

class NbColumnsService {}

constructor

constructor(differs: IterableDiffers);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbColumnsService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbColumnsService>;

method getVisibleColumns

getVisibleColumns: () => string[];

method hideColumn

hideColumn: (column: string) => void;

method onColumnsChange

onColumnsChange: () => Observable<void>;

method setColumns

setColumns: (columns: Iterable<string>) => void;

method showColumn

showColumn: (column: string) => void;

class NbComponentPortal

class NbComponentPortal<T = any> extends ComponentPortal<T> {}

class NbContextMenuComponent

class NbContextMenuComponent
    extends NbPositionedContainerComponent
    implements NbRenderableContainer {}

Context menu component used as content within NbContextMenuDirective.
context-menu-background-color: context-menu-border-color: context-menu-border-style: context-menu-border-width: context-menu-border-radius: context-menu-text-align: context-menu-min-width: context-menu-max-width: context-menu-shadow:

property context

context: { items: NbMenuItem[]; tag?: string };

property items

items: NbMenuItem[];

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbContextMenuComponent,
    'nb-context-menu',
    never,
    {
        items: { alias: 'items'; required: false };
        tag: { alias: 'tag'; required: false };
        context: { alias: 'context'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbContextMenuComponent, never>;

property tag

tag: string;

method renderContent

renderContent: () => void;

The method is empty since we don't need to do anything additionally render is handled by change detection

class NbContextMenuDirective

class NbContextMenuDirective
    implements
        NbDynamicOverlayController,
        OnChanges,
        AfterViewInit,
        OnDestroy,
        OnInit {}

Full featured context menu directive.
@stacked-example(Showcase, context-menu/context-menu-showcase.component)
Just pass menu items array:
<button [nbContextMenu]="items"></button> ... items = [{ title: 'Profile' }, { title: 'Log out' }];
### Installation
Import NbContextMenuModule to your feature module.
@NgModule({ imports: [ // ... NbContextMenuModule, ], }) export class PageModule { }
Also make sure NbMenuModule is imported to your app.module.
@NgModule({ imports: [ // ... NbMenuModule.forRoot(), ], }) export class AppModule { }
### Usage
If you want to handle context menu clicks you have to pass nbContextMenuTag param and register to events using NbMenuService. NbContextMenu renders plain NbMenu inside, so you have to work with it just like with NbMenu component:
@stacked-example(Menu item click, context-menu/context-menu-click.component)
Context menu has different placements, such as: top, bottom, left and right which can be used as following:
<button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>
items = [{ title: 'Profile' }, { title: 'Log out' }];
By default context menu will try to adjust itself to maximally fit viewport and provide the best user experience. It will try to change position of the context menu. If you wanna disable this behaviour just set it falsy value.
<button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>
items = [{ title: 'Profile' }, { title: 'Log out' }];
Context menu has a number of triggers which provides an ability to show and hide the component in different ways:
- Click mode shows the component when a user clicks on the host element and hides when the user clicks somewhere on the document outside the component. - Hint provides capability to show the component when the user hovers over the host element and hide when the user hovers out of the host. - Hover works like hint mode with one exception - when the user moves mouse from host element to the container element the component remains open, so that it is possible to interact with it content. - Focus mode is applied when user focuses the element. - Noop mode - the component won't react to the user interaction.
@stacked-example(Available Triggers, context-menu/context-menu-modes.component.html)
Noop mode is especially useful when you need to control Popover programmatically, for example show/hide as a result of some third-party action, like HTTP request or validation check:
@stacked-example(Manual Control, context-menu/context-menu-noop.component)
@stacked-example(Manual Control, context-menu/context-menu-right-click.component)

constructor

constructor(
    hostRef: ElementRef,
    menuService: NbMenuService,
    dynamicOverlayHandler: NbDynamicOverlayHandler
);

property adjustment

adjustment: NbAdjustment;

Container position will be changes automatically based on this strategy if container can't fit view port. Set this property to any falsy value if you want to disable automatically adjustment. Available values: clockwise, counterclockwise.

property container

protected container: ComponentRef<any>;

property contextMenuClass

contextMenuClass: string;

property contextMenuHost

contextMenuHost: boolean;

property destroy$

protected destroy$: Subject<void>;

property items

items: NbMenuItem[];

Basic menu items, will be passed to the internal NbMenuComponent.

property ngAcceptInputType_trigger

static ngAcceptInputType_trigger: NbTriggerValues;

property overlayConfig

protected overlayConfig: OverlayConfig;

property overlayContext

protected overlayContext: NbContextMenuContext;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbContextMenuDirective,
    '[nbContextMenu]',
    never,
    {
        position: { alias: 'nbContextMenuPlacement'; required: false };
        adjustment: { alias: 'nbContextMenuAdjustment'; required: false };
        tag: { alias: 'nbContextMenuTag'; required: false };
        items: { alias: 'nbContextMenu'; required: false };
        trigger: { alias: 'nbContextMenuTrigger'; required: false };
        contextMenuClass: { alias: 'nbContextMenuClass'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbContextMenuDirective, never>;

property position

position: NbPosition;

Position will be calculated relatively host element based on the position. Can be top, right, bottom and left.

property positionStrategy

protected positionStrategy: NbAdjustableConnectedPositionStrategy;

property ref

protected ref: OverlayRef;

property tag

tag: string;

Set NbMenu tag, which helps identify menu when working with NbMenuService.

property trigger

trigger: NbTrigger;

Describes when the container will be shown. Available options: click, hover, hint, focus and noop

method configureDynamicOverlay

protected configureDynamicOverlay: () => NbDynamicOverlayHandler;

method hide

hide: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method rebuild

rebuild: () => void;

method show

show: () => void;

method toggle

toggle: () => void;

method updateOverlayContext

protected updateOverlayContext: () => void;

class NbContextMenuModule

class NbContextMenuModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbContextMenuModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbContextMenuModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbContextMenuModule,
    [typeof i1.NbContextMenuDirective, typeof i2.NbContextMenuComponent],
    [any, typeof i4.NbOverlayModule, typeof i5.NbMenuModule],
    [typeof i1.NbContextMenuDirective]
>;

class NbDataRowOutletDirective

class NbDataRowOutletDirective extends DataRowOutlet {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbDataRowOutletDirective,
    '[nbRowOutlet]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDataRowOutletDirective, never>;

class NbDataSource

abstract class NbDataSource<T> extends DataSource<T> {}

class NbDateAdapterService

class NbDateAdapterService<D> extends NbDatepickerAdapter<D> {}

constructor

constructor(dateService: NbDateService<D>);

property dateService

protected dateService: NbDateService<D>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDateAdapterService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbDateAdapterService<any>>;

property picker

picker: Type<NbDatepickerComponent<D>>;

method format

format: (date: D, format: string) => string;

method isValid

isValid: (date: string, format: string) => boolean;

method parse

parse: (date: string, format: any) => D;

class NbDatepicker

abstract class NbDatepicker<T, D = T> {}

Datepicker is an control that can pick any values anyway. It has to be bound to the datepicker directive through nbDatepicker input.

property blur

readonly blur: Observable<void>;

property format

abstract format: string;

HTML input element date format.

property formatChanged$

readonly formatChanged$: Observable<void>;

property init

readonly init: Observable<void>;

property isShown

readonly isShown: boolean;

property value

value: {};

property valueChange

readonly valueChange: Observable<T>;

method attach

abstract attach: (hostRef: ElementRef) => any;

Attaches datepicker to the native input element.

method getValidatorConfig

abstract getValidatorConfig: () => NbPickerValidatorConfig<D>;

Returns validator configuration based on the input properties.

method hide

abstract hide: () => any;

method shouldHide

abstract shouldHide: () => boolean;

method show

abstract show: () => any;

class NbDatepickerAdapter

abstract class NbDatepickerAdapter<D> {}

The NbDatepickerAdapter instances provide way how to parse, format and validate different date types.

property picker

abstract picker: Type<any>;

Picker component class.

method format

abstract format: (value: D, format: string) => string;

Format date according to the format.

method isValid

abstract isValid: (value: string, format: string) => boolean;

Validates date string according to the passed format.

method parse

abstract parse: (value: string, format: string) => D;

Parse date string according to the format.

class NbDatepickerComponent

class NbDatepickerComponent<D> extends NbBasePickerComponent<
    D,
    D,
    NbCalendarComponent<D>
> {}

The DatePicker components itself. Provides a proxy to NbCalendar options as well as custom picker options.

property dateChange

readonly dateChange: EventEmitter<D>;

Emits date when selected.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbDatepickerComponent<any>,
    'nb-datepicker',
    never,
    { date: { alias: 'date'; required: false } },
    { dateChange: 'dateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDatepickerComponent<any>, never>;

property pickerClass

protected pickerClass: Type<NbCalendarComponent<D>>;

property pickerValueChange

readonly pickerValueChange: Observable<D>;

property value

value: {};

method writeQueue

protected writeQueue: () => void;

class NbDatepickerContainerComponent

class NbDatepickerContainerComponent extends NbPositionedContainerComponent {}

property overlayContainer

overlayContainer: NbOverlayContainerComponent;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbDatepickerContainerComponent,
    'nb-datepicker-container',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDatepickerContainerComponent, never>;

method attach

attach: <T>(portal: NbComponentPortal<T>) => ComponentRef<T>;

class NbDatepickerDirective

class NbDatepickerDirective<D>
    implements OnDestroy, ControlValueAccessor, Validator {}

The NbDatepickerDirective is form control that gives you ability to select dates and ranges. The datepicker is shown when input receives a focus event.
<input [nbDatepicker]="datepicker"> <nb-datepicker #datepicker></nb-datepicker>
@stacked-example(Showcase, datepicker/datepicker-showcase.component)
### Installation
Import NbDatepickerModule.forRoot() to your root module.
@NgModule({ imports: [ // ... NbDatepickerModule.forRoot(), ], }) export class AppModule { }
And NbDatepickerModule to your feature module.
@NgModule({ imports: [ // ... NbDatepickerModule, ], }) export class PageModule { }
### Usage
If you want to use range selection, you have to use NbRangepickerComponent instead:
<input [nbDatepicker]="rangepicker"> <nb-rangepicker #rangepicker></nb-rangepicker>
Both range and date pickers support all parameters as calendar, so, check NbCalendarComponent for additional info.
@stacked-example(Range showcase, datepicker/rangepicker-showcase.component)
Datepicker is the form control so it can be bound with angular forms through ngModel and form controls.
@stacked-example(Forms, datepicker/datepicker-forms.component)
NbDatepickerDirective may be validated using min and max dates passed to the datepicker.
@stacked-example(Validation, datepicker/datepicker-validation.component)
Also NbDatepickerDirective may be filtered using filter predicate that receives date object and has to return a boolean value.
@stacked-example(Filter, datepicker/datepicker-filter.component)
If you need to pick a time along with the date, you can use nb-date-timepicker
<input nbInput placeholder="Pick Date" [nbDatepicker]="dateTimePicker"> <nb-date-timepicker withSeconds #dateTimePicker></nb-date-timepicker>
@stacked-example(Date timepicker, datepicker/date-timepicker-showcase.component)
A single column picker with options value as time and minute, so users won’t be able to pick hours and minutes individually.
@stacked-example(Date timepicker single column, datepicker/date-timepicker-single-column.component)
The NbDatepickerComponent supports date formatting:
<input [nbDatepicker]="datepicker"> <nb-datepicker #datepicker format="MM\dd\yyyy"></nb-datepicker>
## Formatting Issue
By default, datepicker uses angulars LOCALE_ID token for localization and DatePipe for dates formatting. And native Date.parse(...) for dates parsing. But native Date.parse function doesn't support formats. To provide custom formatting you have to use one of the following packages:
- @nebular/moment - provides moment date adapter that uses moment for date objects. This means datepicker than will operate only moment date objects. If you want to use it you have to install it: npm i @nebular/moment, and import NbMomentDateModule from this package.
- @nebular/date-fns - adapter for popular date-fns library. This way is preferred if you need only date formatting. Because date-fns is treeshakable, tiny and operates native date objects. If you want to use it you have to install it: npm i @nebular/date-fns, and import NbDateFnsDateModule from this package.
### NbDateFnsDateModule
Format is required when using NbDateFnsDateModule. You can set it via format input on datepicker component:
<nb-datepicker format="dd.MM.yyyy"></nb-datepicker>
Also format can be set globally with NbDateFnsDateModule.forRoot({ format: 'dd.MM.yyyy' }) and NbDateFnsDateModule.forChild({ format: 'dd.MM.yyyy' }) methods.
Please note to use some of the formatting tokens you also need to pass { useAdditionalWeekYearTokens: true, useAdditionalDayOfYearTokens: true } to date-fns parse and format functions. You can configure options passed this functions by setting formatOptions and parseOptions of options object passed to NbDateFnsDateModule.forRoot and NbDateFnsDateModule.forChild methods.
NbDateFnsDateModule.forRoot({ parseOptions: { useAdditionalWeekYearTokens: true, useAdditionalDayOfYearTokens: true }, formatOptions: { useAdditionalWeekYearTokens: true, useAdditionalDayOfYearTokens: true }, })
Further info on date-fns formatting tokens could be found at [date-fns docs](https://date-fns.org/v2.0.0-alpha.27/docs/Unicode-Tokens).
You can also use parseOptions and formatOptions to provide locale.
import { eo } from 'date-fns/locale'; @NgModule({ imports: [ NbDateFnsDateModule.forRoot({ parseOptions: { locale: eo }, formatOptions: { locale: eo }, }), ], })
datepicker-background-color: datepicker-border-color: datepicker-border-style: datepicker-border-width: datepicker-border-radius: datepicker-shadow:

constructor

constructor(
    document: any,
    datepickerAdapters: NbDatepickerAdapter<D>[],
    hostRef: ElementRef,
    dateService: NbDateService<D>,
    changeDetector: ChangeDetectorRef
);

property changeDetector

protected changeDetector: ChangeDetectorRef;

property datepickerAdapter

protected datepickerAdapter: NbDatepickerAdapter<D>;

Datepicker adapter.

property datepickerAdapters

protected datepickerAdapters: NbDatepickerAdapter<D>[];

property dateService

protected dateService: NbDateService<D>;

property destroy$

protected destroy$: Subject<void>;

property document

protected document: any;

property hostRef

protected hostRef: ElementRef;

property input

readonly input: HTMLInputElement;

Returns html input element.

property inputValue

readonly inputValue: string;

Returns host input value.

property isDatepickerReady

protected isDatepickerReady: boolean;

property onChange

protected onChange: (D: any) => void;

property onTouched

protected onTouched: () => void;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbDatepickerDirective<any>,
    'input[nbDatepicker]',
    never,
    { setPicker: { alias: 'nbDatepicker'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDatepickerDirective<any>, never>;

property picker

protected picker: NbDatepicker<D, D>;

Datepicker instance.

property pickerInputsChangedSubscription

protected pickerInputsChangedSubscription: any;

property queue

protected queue: {};

property validator

protected validator: ValidatorFn;

Form control validators will be called in validators context, so, we need to bind them.

method chooseDatepickerAdapter

protected chooseDatepickerAdapter: () => void;

Chooses datepicker adapter based on passed picker component.

method filterValidator

protected filterValidator: () => ValidationErrors | null;

Validates passed value satisfy the filter.

method handleInputChange

protected handleInputChange: (value: string) => void;

Parses input value and write if it isn't null.

method hidePicker

protected hidePicker: () => void;

Hides picker, focuses the input

method maxValidator

protected maxValidator: () => ValidationErrors | null;

Validates passed value is smaller than max.

method minValidator

protected minValidator: () => ValidationErrors | null;

Validates passed value is greater than min.

method ngOnDestroy

ngOnDestroy: () => void;

method noDatepickerAdapterProvided

protected noDatepickerAdapterProvided: () => boolean;

Validates if no datepicker adapter provided.

method parseInputValue

protected parseInputValue: (value: any) => D | null;

method parseValidator

protected parseValidator: () => ValidationErrors | null;

Validates that we can parse value correctly.

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method setupPicker

protected setupPicker: () => void;

Attaches picker to the host input element and subscribes on value changes.

method subscribeOnInputChange

protected subscribeOnInputChange: () => void;

method validate

validate: () => ValidationErrors | null;

Form control validation based on picker validator config.

method writeInput

protected writeInput: (value: D) => void;

method writePicker

protected writePicker: (value: D) => void;

method writeValue

writeValue: (value: D) => void;

Writes value in picker and html input element.

class NbDatepickerModule

class NbDatepickerModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDatepickerModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbDatepickerModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbDatepickerModule,
    [
        typeof i1.NbDatepickerDirective,
        typeof i2.NbDatepickerContainerComponent,
        typeof i3.NbCalendarWithTimeComponent,
        typeof i4.NbDateTimePickerComponent,
        typeof i5.NbDatepickerComponent,
        typeof i5.NbRangepickerComponent,
        typeof i5.NbBasePickerComponent
    ],
    [
        typeof i6.NbOverlayModule,
        typeof i7.NbCalendarModule,
        typeof i8.NbCalendarRangeModule,
        typeof i9.NbCardModule,
        typeof i10.NbBaseCalendarModule,
        typeof i11.NbTimepickerModule,
        typeof i12.NbCalendarKitModule
    ],
    [
        typeof i1.NbDatepickerDirective,
        typeof i5.NbDatepickerComponent,
        typeof i5.NbRangepickerComponent,
        typeof i4.NbDateTimePickerComponent,
        typeof i3.NbCalendarWithTimeComponent
    ]
>;

method forRoot

static forRoot: () => ModuleWithProviders<NbDatepickerModule>;

class NbDateService

abstract class NbDateService<D> {}

property DAYS_IN_WEEK

readonly DAYS_IN_WEEK: number;

property HOURS_IN_DAY_PERIOD

readonly HOURS_IN_DAY_PERIOD: number;

Number of hours in AM/PM day periods.

property locale

protected locale: string;

method addDay

abstract addDay: (date: D, days: number) => D;

Returns date with added number of days.

method addHours

abstract addHours: (date: D, hour: number) => D;

Returns date with added number of hours.

method addMinutes

abstract addMinutes: (date: D, minute: number) => D;

Returns date with added number of minutes.

method addMonth

abstract addMonth: (date: D, months: number) => D;

Returns date with added number of months.

method addYear

abstract addYear: (date: D, years: number) => D;

Returns date with added number of years.

method clone

abstract clone: (date: D) => D;

Clones passed date.

method compareDates

abstract compareDates: (date1: D, date2: D) => number;

Compares two dates. Returns 0 if dates are the same. Returns 1 if the first date is greater than the second. Returns -1 if the second date is greater than the first.

method createDate

abstract createDate: (year: number, month: number, date: number) => D;

Creates new date from year, month and date.

method format

abstract format: (date: D, format: string) => string;

Transforms the date to the string according to the passed format.

method getDate

abstract getDate: (date: D) => number;

Gets the date of the month component of the given date.

method getDateFormat

abstract getDateFormat: () => string;

method getDayOfWeek

abstract getDayOfWeek: (date: D) => number;

Returns day of the week of the given date.

method getDayOfWeekNames

abstract getDayOfWeekNames: (style?: TranslationWidth) => string[];

Returns localized days names.

method getDayPeriod

getDayPeriod: (date: D) => NbDayPeriod;

method getFirstDayOfWeek

abstract getFirstDayOfWeek: () => number;

Returns first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.

method getHours

abstract getHours: (date: D) => number;

Gets the hour component of the given date.

method getId

abstract getId: () => string;

method getLocaleTimeFormat

abstract getLocaleTimeFormat: () => string;

Gets the time format based on locale

method getMilliseconds

abstract getMilliseconds: (date: D) => number;

Gets the second component of the given date.

method getMinutes

abstract getMinutes: (date: D) => number;

Gets the minute component of the given date.

method getMonth

abstract getMonth: (date: D) => number;

Gets the month component of the given date.

method getMonthEnd

abstract getMonthEnd: (date: D) => D;

Creates the same date but with day equals to the last day in this month.

method getMonthName

abstract getMonthName: (date: D, style?: TranslationWidth) => string;

Returns localized month name by date and style.

method getMonthNameByIndex

abstract getMonthNameByIndex: (
    month: number,
    style?: TranslationWidth
) => string;

Returns localized month name by month index and style.

method getMonthStart

abstract getMonthStart: (date: D) => D;

Creates the same date but with day equals to 1.

method getNumberOfDaysInMonth

abstract getNumberOfDaysInMonth: (date: D) => number;

Returns number of days in the date.

method getSeconds

abstract getSeconds: (date: D) => number;

Gets the second component of the given date.

method getTwelveHoursFormat

abstract getTwelveHoursFormat: () => string;

method getTwelveHoursFormatWithSeconds

getTwelveHoursFormatWithSeconds: () => string;

method getTwentyFourHoursFormat

getTwentyFourHoursFormat: () => string;

method getTwentyFourHoursFormatWithSeconds

getTwentyFourHoursFormatWithSeconds: () => string;

method getWeekNumber

abstract getWeekNumber: (date: D) => number;

method getYear

abstract getYear: (date: D) => number;

Gets the year component of the given date.

method getYearEnd

abstract getYearEnd: (date: D) => D;

Creates the same date but with month equals to 11 and day equals to 31.

method getYearStart

abstract getYearStart: (date: D) => D;

Creates the same date but with month equals to 0 and day equals to 1.

method isBetween

isBetween: (date: D, start: D, end: D) => boolean;

Checks if the date is between the start date and the end date.

method isSameDay

abstract isSameDay: (date1: D, date2: D) => boolean;

Checks is two dates have the same day.

method isSameDaySafe

isSameDaySafe: (date1: D, date2: D) => boolean;

Checks is two dates have the same day.

method isSameHour

isSameHour: (date1: D, date2: D) => boolean;

method isSameHourAndMinute

isSameHourAndMinute: (date1: D, date2: D) => boolean;

method isSameMinute

isSameMinute: (date1: D, date2: D) => boolean;

method isSameMonth

abstract isSameMonth: (date1: D, date2: D) => boolean;

Checks is two dates have the same month.

method isSameMonthSafe

isSameMonthSafe: (date1: D, date2: D) => boolean;

Checks is two dates have the same month.

method isSameYear

abstract isSameYear: (date1: D, date2: D) => boolean;

Checks is two dates have the same year.

method isSameYearSafe

isSameYearSafe: (date1: D, date2: D) => boolean;

Checks is two dates have the same year.

method isValidDateString

abstract isValidDateString: (date: string, format: string) => boolean;

Returns true if date string is valid date string according to the provided format.

method isValidTimeString

abstract isValidTimeString: (date: string, format: string) => boolean;

Returns true if time string is valid time string according to the provided format.

method parse

abstract parse: (date: string, format: string) => D;

Parses the date string according to the passed format.

method setHours

abstract setHours: (date: D, hour: number) => D;

Returns date with selected hour

method setLocale

setLocale: (locale: any) => void;

method setMilliseconds

abstract setMilliseconds: (date: D, second: number) => D;

Returns date with selected milliseconds

method setMinutes

abstract setMinutes: (date: D, minute: number) => D;

Returns date with selected minute

method setSeconds

abstract setSeconds: (date: D, second: number) => D;

Returns date with selected second

method today

abstract today: () => D;

Returns today date.

method valueOf

abstract valueOf: (date: D) => number;

Returns date with added number of years.

class NbDateTimeAdapterService

class NbDateTimeAdapterService<D> extends NbDatepickerAdapter<D> {}

constructor

constructor(dateService: NbDateService<D>);

property dateService

protected dateService: NbDateService<D>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDateTimeAdapterService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbDateTimeAdapterService<any>>;

property picker

picker: Type<NbDateTimePickerComponent<D>>;

method format

format: (date: any, format: string) => string;

method isValid

isValid: (date: string, format: string) => boolean;

method parse

parse: (date: string, format: string) => D;

class NbDateTimePickerComponent

class NbDateTimePickerComponent<D>
    extends NbBasePickerComponent<D, D, NbCalendarWithTimeComponent<D>>
    implements OnInit {}

The DateTimePicker component itself. Provides a proxy to NbCalendarWithTimeComponent options as well as custom picker options.

constructor

constructor(
    document: any,
    positionBuilder: NbPositionBuilderService,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    overlay: NbOverlayService,
    cfr: ComponentFactoryResolver,
    dateService: NbDateService<D>,
    dateServiceOptions: any,
    calendarWithTimeModelService: NbCalendarTimeModelService<D>
);

property applyButtonText

applyButtonText: string;

property calendarWithTimeModelService

protected calendarWithTimeModelService: NbCalendarTimeModelService<D>;

property currentTimeButtonText

currentTimeButtonText: string;

property dateTimeChange

readonly dateTimeChange: EventEmitter<D>;

Emits date with time when selected.

property ngAcceptInputType_showAmPmLabel

static ngAcceptInputType_showAmPmLabel: NbBooleanInput;

property ngAcceptInputType_singleColumn

static ngAcceptInputType_singleColumn: NbBooleanInput;

property ngAcceptInputType_twelveHoursFormat

static ngAcceptInputType_twelveHoursFormat: NbBooleanInput;

property ngAcceptInputType_withSeconds

static ngAcceptInputType_withSeconds: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbDateTimePickerComponent<any>,
    'nb-date-timepicker',
    never,
    {
        step: { alias: 'step'; required: false };
        title: { alias: 'title'; required: false };
        applyButtonText: { alias: 'applyButtonText'; required: false };
        currentTimeButtonText: {
            alias: 'currentTimeButtonText';
            required: false;
        };
        showCurrentTimeButton: {
            alias: 'showCurrentTimeButton';
            required: false;
        };
        twelveHoursFormat: { alias: 'twelveHoursFormat'; required: false };
        showAmPmLabel: { alias: 'showAmPmLabel'; required: false };
        withSeconds: { alias: 'withSeconds'; required: false };
        singleColumn: { alias: 'singleColumn'; required: false };
    },
    { dateTimeChange: 'dateTimeChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbDateTimePickerComponent<any>,
    [null, null, null, null, null, null, { optional: true }, null]
>;

property pickerClass

protected pickerClass: Type<NbCalendarWithTimeComponent<D>>;

property pickerValueChange

readonly pickerValueChange: Observable<any>;

property showAmPmLabel

showAmPmLabel: boolean;

Defines should show am/pm label if twelveHoursFormat enabled.

property showCurrentTimeButton

showCurrentTimeButton: boolean;

property singleColumn

singleColumn: boolean;

Show timepicker values in one column with 60 minutes step by default.

property step

step: number;

Defines minutes step when we use fill time format. If set to 20, it will be: '12:00, 12:20: 12:40, 13:00...'

property title

title: string;

property twelveHoursFormat

twelveHoursFormat: boolean;

Defines 12 hours format like '07:00 PM'.

property value

value: any;

property withSeconds

withSeconds: boolean;

Show seconds in timepicker. Ignored when singleColumn is true.

method buildTimeFormat

protected buildTimeFormat: () => string;

method ngOnInit

ngOnInit: () => void;

method patchWithInputs

protected patchWithInputs: () => void;

method writeQueue

protected writeQueue: () => void;

class NbDialogConfig

class NbDialogConfig<D = any> {}

Describes all available options that may be passed to the NbDialogService.

constructor

constructor(config: Partial<NbDialogConfig<any>>);

property autoFocus

autoFocus: boolean;

Focuses dialog automatically after open if true.

property backdropClass

backdropClass: string;

Class that'll be assigned to the backdrop element.

property closeOnBackdropClick

closeOnBackdropClick: boolean;

If true then mouse clicks by backdrop will close a dialog.

property closeOnEsc

closeOnEsc: boolean;

If true then escape press will close a dialog.

property context

context: {};

property dialogClass

dialogClass: string;

Class that'll be assigned to the dialog overlay.

property hasBackdrop

hasBackdrop: boolean;

If true than overlay will render backdrop under a dialog.

property hasScroll

hasScroll: boolean;

Disables scroll on content under dialog if true and does nothing otherwise.

property viewContainerRef

viewContainerRef: ViewContainerRef;

Where the attached component should live in Angular's *logical* component tree. This affects what is available for injection and the change detection order for the component instantiated inside of the dialog. This does not affect where the dialog content will be rendered.

class NbDialogContainerComponent

class NbDialogContainerComponent implements OnInit, OnDestroy {}

Container component for each dialog. All the dialogs will be attached to it. // TODO add animations

constructor

constructor(
    config: NbDialogConfig<any>,
    elementRef: ElementRef,
    focusTrapFactory: NbFocusTrapFactoryService
);

property config

protected config: NbDialogConfig<any>;

property elementRef

protected elementRef: ElementRef;

property focusTrap

protected focusTrap: NbFocusTrap;

property focusTrapFactory

protected focusTrapFactory: NbFocusTrapFactoryService;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbDialogContainerComponent,
    'nb-dialog-container',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDialogContainerComponent, never>;

property portalOutlet

portalOutlet: NbPortalOutletDirective;

method attachComponentPortal

attachComponentPortal: <T>(portal: NbComponentPortal<T>) => ComponentRef<T>;

method attachTemplatePortal

attachTemplatePortal: <C>(portal: NbTemplatePortal<C>) => EmbeddedViewRef<C>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbDialogModule

class NbDialogModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDialogModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbDialogModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbDialogModule,
    [typeof i1.NbDialogContainerComponent],
    [typeof i2.NbSharedModule, typeof i3.NbOverlayModule],
    never
>;

method forChild

static forChild: (
    dialogConfig?: Partial<NbDialogConfig>
) => ModuleWithProviders<NbDialogModule>;

method forRoot

static forRoot: (
    dialogConfig?: Partial<NbDialogConfig>
) => ModuleWithProviders<NbDialogModule>;

class NbDialogRef

class NbDialogRef<T> {}

The NbDialogRef helps to manipulate dialog after it was created. The dialog can be dismissed by using close method of the dialogRef. You can access rendered component as content property of the dialogRef. onBackdropClick streams click events on the backdrop of the dialog.

constructor

constructor(overlayRef: OverlayRef);

property componentRef

componentRef: ComponentRef<T>;

property onBackdropClick

readonly onBackdropClick: Observable<MouseEvent>;

Stream of backdrop click events.

property onClose

readonly onClose: Observable<any>;

property onClose$

protected onClose$: Subject<any>;

property overlayRef

protected overlayRef: OverlayRef;

method close

close: (res?: any) => void;

Hides dialog.

class NbDialogService

class NbDialogService {}

The NbDialogService helps to open dialogs.
@stacked-example(Showcase, dialog/dialog-showcase.component)
A new dialog is opened by calling the open method with a component to be loaded and an optional configuration. open method will return NbDialogRef that can be used for the further manipulations.
### Installation
Import NbDialogModule.forRoot() to your app module.
@NgModule({ imports: [ // ... NbDialogModule.forRoot(config), ], }) export class AppModule { }
If you are using it in a lazy loaded module than you have to install it with NbDialogModule.forChild():
@NgModule({ imports: [ // ... NbDialogModule.forChild(config), ], }) export class LazyLoadedModule { }
### Usage
const dialogRef = this.dialogService.open(MyDialogComponent, { ... });
NbDialogRef gives capability access reference to the rendered dialog component, destroy dialog and some other options described below.
Also, you can inject NbDialogRef in dialog component.
this.dialogService.open(MyDialogComponent, { ... }); // my-dialog.component.ts constructor(protected dialogRef: NbDialogRef) { } close() { this.dialogRef.close(); }
Instead of component you can create dialog from TemplateRef:
@stacked-example(Template ref, dialog/dialog-template.component)
The dialog may return result through NbDialogRef. Calling component can receive this result with onClose stream of NbDialogRef.
@stacked-example(Result, dialog/dialog-result.component)
### Configuration
As we mentioned above, open method of the NbDialogService may receive optional configuration options. Also, you can provide global dialogs configuration through NbDialogModule.forRoot({ ... }).
This config may contain the following:
context - both, template and component may receive data through config.context property. For components, this data will be assigned through inputs. For templates, you can access it inside template as $implicit.
this.dialogService.open(template, { context: 'pass data in template' });
<ng-template let-some-additional-data> {{ some-additional-data }} <ng-template/>
hasBackdrop - determines is service have to render backdrop under the dialog. Default is true. @stacked-example(Backdrop, dialog/dialog-has-backdrop.component)
closeOnBackdropClick - close dialog on backdrop click if true. Default is true. @stacked-example(Backdrop click, dialog/dialog-backdrop-click.component)
closeOnEsc - close dialog on escape button on the keyboard. Default is true. @stacked-example(Escape hit, dialog/dialog-esc.component)
hasScroll - Disables scroll on content under dialog if true and does nothing otherwise. Default is false. Please, open dialogs in the separate window and try to scroll. @stacked-example(Scroll, dialog/dialog-scroll.component)
autoFocus - Focuses dialog automatically after open if true. It's useful to prevent misclicks on trigger elements and opening multiple dialogs. Default is true.
As you can see, if you open dialog with auto focus dialog will focus first focusable element or just blur previously focused automatically. Otherwise, without auto focus, the focus will stay on the previously focused element. Please, open dialogs in the separate window and try to click on the button without focus and then hit space any times. Multiple same dialogs will be opened. @stacked-example(Auto focus, dialog/dialog-auto-focus.component)

constructor

constructor(
    document: any,
    globalConfig: any,
    positionBuilder: NbPositionBuilderService,
    overlay: NbOverlayService,
    injector: Injector,
    cfr: ComponentFactoryResolver
);

property cfr

protected cfr: ComponentFactoryResolver;

property document

protected document: any;

property globalConfig

protected globalConfig: any;

property injector

protected injector: Injector;

property overlay

protected overlay: NbOverlayService;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDialogService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbDialogService>;

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

method createComponentPortal

protected createComponentPortal: <T>(
    config: NbDialogConfig,
    content: Type<T>,
    dialogRef: NbDialogRef<T>
) => NbComponentPortal;

We're creating portal with custom injector provided through config or using global injector. This approach provides us capability inject NbDialogRef in dialog component.

method createContainer

protected createContainer: (
    config: NbDialogConfig,
    overlayRef: OverlayRef
) => NbDialogContainerComponent;

method createContent

protected createContent: <T>(
    config: NbDialogConfig,
    content: Type<T> | TemplateRef<T>,
    container: NbDialogContainerComponent,
    dialogRef: NbDialogRef<T>
) => void;

method createInjector

protected createInjector: (config: NbDialogConfig) => Injector;

method createOverlay

protected createOverlay: (config: NbDialogConfig) => OverlayRef;

method createPositionStrategy

protected createPositionStrategy: () => NbGlobalPositionStrategy;

method createScrollStrategy

protected createScrollStrategy: (hasScroll: boolean) => ScrollStrategy;

method createTemplatePortal

protected createTemplatePortal: <T>(
    config: NbDialogConfig,
    content: TemplateRef<T>,
    dialogRef: NbDialogRef<T>
) => NbTemplatePortal;

method open

open: <T>(
    content: Type<T> | TemplateRef<T>,
    userConfig?: Partial<NbDialogConfig<Partial<T> | string>>
) => NbDialogRef<T>;

Opens new instance of the dialog, may receive optional config.

method registerCloseListeners

protected registerCloseListeners: <T>(
    config: NbDialogConfig,
    overlayRef: OverlayRef,
    dialogRef: NbDialogRef<T>
) => void;

class NbDirectionality

class NbDirectionality extends Directionality {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDirectionality, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbDirectionality>;

class NbDynamicOverlay

class NbDynamicOverlay {}

constructor

constructor(
    overlay: NbOverlayService,
    componentFactoryResolver: ComponentFactoryResolver,
    zone: NgZone,
    overlayContainer: NbOverlayContainer
);

property componentFactoryResolver

protected componentFactoryResolver: ComponentFactoryResolver;

property componentType

protected componentType: Type<NbRenderableContainer>;

property container

protected container: ComponentRef<NbRenderableContainer>;

property content

protected content: any;

property context

protected context: Object;

property destroy$

protected destroy$: Subject<void>;

property disabled

protected disabled: boolean;

property isAttached

readonly isAttached: boolean;

property isShown

readonly isShown: Observable<boolean>;

property isShown$

protected isShown$: BehaviorSubject<boolean>;

property lastAppliedPosition

protected lastAppliedPosition: NbPosition;

property overlay

protected overlay: NbOverlayService;

property overlayConfig

protected overlayConfig: OverlayConfig;

property overlayContainer

protected overlayContainer: NbOverlayContainer;

property overlayDestroy$

protected overlayDestroy$: Subject<any>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDynamicOverlay, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbDynamicOverlay>;

property positionStrategy

protected positionStrategy: NbAdjustableConnectedPositionStrategy;

property positionStrategyChange$

protected positionStrategyChange$: Subject<void>;

property ref

protected ref: OverlayRef;

property zone

protected zone: NgZone;

method create

create: (
    componentType: Type<NbRenderableContainer>,
    content: NbOverlayContent,
    context: Object,
    positionStrategy: NbAdjustableConnectedPositionStrategy,
    overlayConfig?: OverlayConfig,
    disabled?: boolean
) => this;

method createContainerContext

protected createContainerContext: () => Object;

method createOverlay

protected createOverlay: () => void;

method dispose

dispose: () => void;

method disposeOverlayRef

protected disposeOverlayRef: () => void;

method getContainer

getContainer: () => ComponentRef<NbRenderableContainer>;

method hasOverlayInContainer

protected hasOverlayInContainer: () => boolean;

method hide

hide: () => void;

method renderContainer

protected renderContainer: () => void;

method setComponent

setComponent: (componentType: Type<NbRenderableContainer>) => void;

method setContent

setContent: (content: NbOverlayContent) => void;

method setContentAndContext

setContentAndContext: (content: NbOverlayContent, context: Object) => void;

method setContext

setContext: (context: Object) => void;

method setDisabled

setDisabled: (disabled: boolean) => void;

method setOverlayConfig

setOverlayConfig: (overlayConfig: OverlayConfig) => void;

method setPositionStrategy

setPositionStrategy: (
    positionStrategy: NbAdjustableConnectedPositionStrategy
) => void;

method show

show: () => any;

method toggle

toggle: () => void;

method updateContext

protected updateContext: () => void;

method updatePosition

protected updatePosition: () => void;

method updatePositionWhenStable

protected updatePositionWhenStable: (overlay: OverlayRef) => void;

Dimensions of the container may change after content update. So we listen to zone.stable event to reposition the container.

class NbDynamicOverlayChange

class NbDynamicOverlayChange extends SimpleChange {}

constructor

constructor(previousValue: any, currentValue: any, firstChange?: boolean);

method isChanged

isChanged: () => boolean;

class NbDynamicOverlayHandler

class NbDynamicOverlayHandler {}

constructor

constructor(
    positionBuilder: NbPositionBuilderService,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    dynamicOverlayService: NbDynamicOverlay,
    directionService: NbLayoutDirectionService
);

property changes

protected changes: { [key: string]: NbDynamicOverlayChange };

property destroy$

protected destroy$: Subject<void>;

property dynamicOverlay

protected dynamicOverlay: NbDynamicOverlay;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbDynamicOverlayHandler, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbDynamicOverlayHandler>;

property positionStrategy

protected positionStrategy: NbAdjustableConnectedPositionStrategy;

property triggerStrategy

protected triggerStrategy: NbTriggerStrategy;

method adjustment

adjustment: (adjustment: NbAdjustment) => this;

method build

build: () => NbDynamicOverlay;

method clearChanges

protected clearChanges: () => void;

method componentType

componentType: (componentType: Type<NbRenderableContainer>) => this;

method connect

connect: () => void;

method content

content: (content: NbOverlayContent) => this;

method context

context: (context: {}) => this;

method createPositionStrategy

protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;

method destroy

destroy: () => void;

method disabled

disabled: (disabled: boolean) => this;

method disconnect

disconnect: () => void;

method host

host: (host: ElementRef) => this;

method isAdjustmentUpdated

protected isAdjustmentUpdated: () => boolean;

method isComponentTypeUpdated

protected isComponentTypeUpdated: () => boolean;

method isComponentTypeUpdateRequired

protected isComponentTypeUpdateRequired: () => boolean;

method isContainerRerenderRequired

protected isContainerRerenderRequired: () => boolean;

method isContentUpdated

protected isContentUpdated: () => boolean;

method isContextUpdated

protected isContextUpdated: () => boolean;

method isDisabledUpdated

protected isDisabledUpdated: () => boolean;

method isHostUpdated

protected isHostUpdated: () => boolean;

method isOffsetUpdated

protected isOffsetUpdated: () => boolean;

method isOverlayConfigUpdated

protected isOverlayConfigUpdated: () => boolean;

method isPositionStrategyUpdateRequired

protected isPositionStrategyUpdateRequired: () => boolean;

method isPositionUpdated

protected isPositionUpdated: () => boolean;

method isTriggerStrategyUpdateRequired

protected isTriggerStrategyUpdateRequired: () => boolean;

method isTriggerUpdated

protected isTriggerUpdated: () => boolean;

method offset

offset: (offset: number) => this;

method overlayConfig

overlayConfig: (overlayConfig: OverlayConfig) => this;

method position

position: (position: NbPosition) => this;

method rebuild

rebuild: () => NbDynamicOverlay;

method subscribeOnDirectionChange

protected subscribeOnDirectionChange: () => void;

method subscribeOnTriggers

protected subscribeOnTriggers: (dynamicOverlay: NbDynamicOverlay) => void;

method trigger

trigger: (trigger: NbTrigger) => this;

class NbFilterDirective

class NbFilterDirective {}

property filterable

filterable: NbFilterable;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbFilterDirective,
    '[nbFilter]',
    never,
    { filterable: { alias: 'nbFilter'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFilterDirective, never>;

method filter

filter: (filterRequest: string) => void;

class NbFilterInputDirective

class NbFilterInputDirective
    extends NbFilterDirective
    implements OnInit, OnDestroy {}

Helper directive to trigger data source's filter method when user types in input

property debounceTime

debounceTime: number;

Debounce time before triggering filter method. Set in milliseconds. Default 200.

property filterable

filterable: NbFilterable;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbFilterInputDirective,
    '[nbFilterInput]',
    never,
    {
        filterable: { alias: 'nbFilterInput'; required: false };
        debounceTime: { alias: 'debounceTime'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFilterInputDirective, never>;

method filter

filter: (event: any) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbFlexibleConnectedPositionStrategy

class NbFlexibleConnectedPositionStrategy extends FlexibleConnectedPositionStrategy {}

class NbFlipCardComponent

class NbFlipCardComponent {}

Flip card example: @stacked-example(Showcase, flip-card/flip-card-showcase.component)
As a content Flip card accepts two instances of nb-card - for front and back sides.
Basic flip card configuration:
<nb-flip-card> <nb-card-front> <nb-card> <nb-card-body> Front </nb-card-body> </nb-card> </nb-card-front> <nb-card-back> <nb-card> <nb-card-body> Back </nb-card-body> </nb-card> </nb-card-back> </nb-flip-card>
### Installation
Import NbCardModule to your feature module.
@NgModule({ imports: [ // ... NbCardModule, ], }) export class PageModule { }
### Usage
Flip Card with header and footer: @stacked-example(With Header & Footer, flip-card/flip-card-full.component.ts)
Colored flip-cards could be simply configured by providing a status property: @stacked-example(Colored Card, flip-card/flip-card-colors.component)
It is also possible to assign an accent property for a slight card highlight as well as combine it with status: @stacked-example(Accent Card, flip-card/flip-card-accents.component)
@additional-example(Multiple Sizes, flip-card/flip-card-sizes.component)

property flipped

flipped: boolean;

Flip state boolean

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbFlipCardComponent,
    'nb-flip-card',
    never,
    {
        flipped: { alias: 'flipped'; required: false };
        showToggleButton: { alias: 'showToggleButton'; required: false };
    },
    {},
    never,
    ['nb-card-front', 'nb-card-back'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFlipCardComponent, never>;

property showToggleButton

showToggleButton: boolean;

Show/hide toggle button to be able to control toggle from your code {boolean}

method toggle

toggle: () => void;

class NbFocusKeyManager

class NbFocusKeyManager<T> extends FocusKeyManager<T> {}

class NbFocusKeyManagerFactoryService

class NbFocusKeyManagerFactoryService<T extends NbFocusableOption> {}

method create

create: (items: QueryList<T> | T[]) => NbFocusKeyManager<T>;

class NbFocusMonitor

class NbFocusMonitor extends FocusMonitor {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFocusMonitor, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbFocusMonitor>;

class NbFocusTrap

class NbFocusTrap extends FocusTrap {}

Overrides angular cdk focus trap to keep restore functionality inside trap.

constructor

constructor(
    element: HTMLElement,
    checker: InteractivityChecker,
    ngZone: NgZone,
    document: Document,
    deferAnchors: any
);

property checker

protected checker: InteractivityChecker;

property document

protected document: Document;

property element

protected element: HTMLElement;

property ngZone

protected ngZone: NgZone;

property previouslyFocusedElement

protected previouslyFocusedElement: HTMLElement;

method blurPreviouslyFocusedElement

blurPreviouslyFocusedElement: () => void;

method restoreFocus

restoreFocus: () => void;

method savePreviouslyFocusedElement

protected savePreviouslyFocusedElement: () => void;

class NbFocusTrapFactoryService

class NbFocusTrapFactoryService extends FocusTrapFactory {}

constructor

constructor(checker: InteractivityChecker, ngZone: NgZone, document: any);

property checker

protected checker: InteractivityChecker;

property ngZone

protected ngZone: NgZone;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFocusTrapFactoryService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbFocusTrapFactoryService>;

method create

create: (element: HTMLElement, deferCaptureElements?: boolean) => NbFocusTrap;

class NbFocusTriggerStrategy

class NbFocusTriggerStrategy extends NbTriggerStrategyBase {}

Creates show and hide event streams. Fires open event when a focus is on the host element and stay over at least 100 milliseconds. Fires close event when the focus leaves the host element.

property clickIn$

protected clickIn$: Observable<Event>;

property clickOut$

protected clickOut$: Observable<Event>;

property focusOut$

protected focusOut$: Observable<Event>;

property hide$

hide$: Observable<Event>;

property show$

show$: Observable<Event>;

property tabKeyPress$

protected tabKeyPress$: Observable<Event>;

class NbFontIcon

class NbFontIcon implements NbIcon {}

constructor

constructor(name: any, content: any, params?: NbFontIconPackParams);

property content

protected content: any;

property name

protected name: any;

property params

protected params: NbFontIconPackParams;

method getClasses

getClasses: (options?: NbIconOptions) => string[];

method getContent

getContent: (options?: NbIconOptions) => string;

class NbFooterCellDefDirective

class NbFooterCellDefDirective extends CdkFooterCellDef {}

Footer cell definition for the nb-table. Captures the template of a column's footer cell and as well as cell-specific properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbFooterCellDefDirective,
    '[nbFooterCellDef]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFooterCellDefDirective, never>;

class NbFooterCellDirective

class NbFooterCellDirective extends CdkFooterCell {}

Footer cell template container that adds the right classes and role.

constructor

constructor(columnDef: NbColumnDefDirective, elementRef: ElementRef);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbFooterCellDirective,
    'nb-footer-cell, td[nbFooterCell]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFooterCellDirective, never>;

class NbFooterRowComponent

class NbFooterRowComponent extends CdkFooterRow {}

Footer template container that contains the cell outlet. Adds the right class and role.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbFooterRowComponent,
    'nb-footer-row, tr[nbFooterRow]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFooterRowComponent, never>;

class NbFooterRowDefDirective

class NbFooterRowDefDirective extends CdkFooterRowDef {}

Footer row definition for the nb-table. Captures the footer row's template and other footer properties such as the columns to display.

property columns

columns: Iterable<string>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbFooterRowDefDirective,
    '[nbFooterRowDef]',
    never,
    {
        columns: { alias: 'nbFooterRowDef'; required: false };
        sticky: { alias: 'nbFooterRowDefSticky'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFooterRowDefDirective, never>;

property sticky

sticky: boolean;

method hasStickyChanged

hasStickyChanged: () => boolean;

Whether the sticky state has changed.

method resetStickyChanged

resetStickyChanged: () => void;

Resets the sticky changed state.

class NbFooterRowOutletDirective

class NbFooterRowOutletDirective extends FooterRowOutlet {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbFooterRowOutletDirective,
    '[nbFooterRowOutlet]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFooterRowOutletDirective, never>;

class NbFormFieldComponent

class NbFormFieldComponent
    implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {}

constructor

constructor(
    cd: ChangeDetectorRef,
    zone: NgZone,
    elementRef: ElementRef,
    renderer: Renderer2
);

property cd

protected cd: ChangeDetectorRef;

property destroy$

protected readonly destroy$: Subject<void>;

property elementRef

protected elementRef: ElementRef;

property formControl

formControl: NbFormFieldControl;

property formControlConfig

formControlConfig: NbFormFieldControlConfig;

property formControlState$

protected formControlState$: ReplaySubject<NbFormControlState>;

property formFieldClasses

formFieldClasses: any;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbFormFieldComponent,
    'nb-form-field',
    never,
    {},
    {},
    ['formControl', 'formControlConfig', 'prefix', 'suffix'],
    ['[nbPrefix]', '*', '[nbSuffix]'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldComponent, never>;

property prefix

prefix: QueryList<NbPrefixDirective>;

property prefixClasses$

prefixClasses$: Observable<string[]>;

property renderer

protected renderer: Renderer2;

property suffix

suffix: QueryList<NbSuffixDirective>;

property suffixClasses$

suffixClasses$: Observable<string[]>;

property zone

protected zone: NgZone;

method getAddonClasses

protected getAddonClasses: (
    addon: NbFormControlAddon,
    state: NbFormControlState
) => string[];

method getFormControlConfig

protected getFormControlConfig: () => NbFormFieldControlConfig;

method isStatesEqual

protected isStatesEqual: (
    oldState: NbFormControlState,
    state: NbFormControlState
) => boolean;

method ngAfterContentChecked

ngAfterContentChecked: () => void;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method shouldShowPrefix

shouldShowPrefix: () => boolean;

method shouldShowSuffix

shouldShowSuffix: () => boolean;

method subscribeToAddonChange

protected subscribeToAddonChange: () => void;

method subscribeToFormControlStateChange

protected subscribeToFormControlStateChange: () => void;

class NbFormFieldControl

abstract class NbFormFieldControl {}

property disabled$

disabled$: Observable<boolean>;

property focused$

focused$: Observable<boolean>;

property fullWidth$

fullWidth$: Observable<boolean>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldControl, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbFormFieldControl>;

property size$

size$: Observable<NbComponentSize>;

property status$

status$: Observable<string>;

class NbFormFieldControlConfig

class NbFormFieldControlConfig {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldControlConfig, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbFormFieldControlConfig>;

property supportsPrefix

supportsPrefix: boolean;

property supportsSuffix

supportsSuffix: boolean;

class NbFormFieldModule

class NbFormFieldModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbFormFieldModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbFormFieldModule,
    [
        typeof i1.NbFormFieldComponent,
        typeof i2.NbPrefixDirective,
        typeof i3.NbSuffixDirective
    ],
    [any],
    [
        typeof i1.NbFormFieldComponent,
        typeof i2.NbPrefixDirective,
        typeof i3.NbSuffixDirective
    ]
>;

class NbGlobalPositionStrategy

class NbGlobalPositionStrategy extends GlobalPositionStrategy {}

method position

position: (position: NbGlobalLogicalPosition) => this;

class NbHeaderCellDefDirective

class NbHeaderCellDefDirective extends CdkHeaderCellDef {}

Header cell definition for the nb-table. Captures the template of a column's header cell and as well as cell-specific properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbHeaderCellDefDirective,
    '[nbHeaderCellDef]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbHeaderCellDefDirective, never>;

class NbHeaderCellDirective

class NbHeaderCellDirective extends CdkHeaderCell {}

Header cell template container that adds the right classes and role.

constructor

constructor(
    columnDef: NbColumnDefDirective,
    elementRef: ElementRef<HTMLElement>
);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbHeaderCellDirective,
    'nb-header-cell, th[nbHeaderCell]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbHeaderCellDirective, never>;

class NbHeaderRowComponent

class NbHeaderRowComponent extends CdkHeaderRow {}

Footer template container that contains the cell outlet. Adds the right class and role.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbHeaderRowComponent,
    'nb-header-row, tr[nbHeaderRow]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbHeaderRowComponent, never>;

class NbHeaderRowDefDirective

class NbHeaderRowDefDirective extends CdkHeaderRowDef {}

Header row definition for the nb-table. Captures the header row's template and other header properties such as the columns to display.

property columns

columns: Iterable<string>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbHeaderRowDefDirective,
    '[nbHeaderRowDef]',
    never,
    {
        columns: { alias: 'nbHeaderRowDef'; required: false };
        sticky: { alias: 'nbHeaderRowDefSticky'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbHeaderRowDefDirective, never>;

property sticky

sticky: boolean;

method hasStickyChanged

hasStickyChanged: () => boolean;

method resetStickyChanged

resetStickyChanged: () => void;

Resets the sticky changed state.

class NbHeaderRowOutletDirective

class NbHeaderRowOutletDirective extends HeaderRowOutlet {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbHeaderRowOutletDirective,
    '[nbHeaderRowOutlet]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbHeaderRowOutletDirective, never>;

class NbHintTriggerStrategy

class NbHintTriggerStrategy extends NbTriggerStrategyBase {}

Creates show and hide event streams. Fires open event when a mouse hovers over the host element and stay over at least 100 milliseconds. Fires close event when the mouse leaves the host element.

property hide$

hide$: Observable<Event>;

property show$

show$: Observable<Event>;

class NbHoverTriggerStrategy

class NbHoverTriggerStrategy extends NbTriggerStrategyBase {}

Creates show and hide event streams. Fires open event when a mouse hovers over the host element and stay over at least 100 milliseconds. Fires close event when the mouse leaves the host element and stops out of the host and popover container.

property hide$

hide$: Observable<Event>;

property show$

show$: Observable<Event>;

class NbIconComponent

class NbIconComponent implements NbIconConfig, OnChanges, OnInit {}

Icon component. Allows to render both svg and font icons. Starting from Nebular 4.0 uses [Eva Icons](https://akveo.github.io/eva-icons/) pack by default.
Basic icon example: @stacked-example(Showcase, icon/icon-showcase.component)
Icon configuration:
<nb-icon icon="star"></nb-icon>
### Installation
By default Nebular comes without any pre-installed icon pack. Starting with Nebular 4.0.0 we ship separate package called @nebular/eva-icons which integrates SVG [Eva Icons](https://akveo.github.io/eva-icons/) pack to Nebular. To add it to your project run:
npm i eva-icons @nebular/eva-icons
This command will install Eva Icons pack. Then register NbEvaIconsModule into your app module:
import { NbEvaIconsModule } from '@nebular/eva-icons'; @NgModule({ imports: [ // ... NbEvaIconsModule, ], }) export class AppModule { }
Last thing, import NbIconModule to your feature module where you need to show an icon:
import { NbIconModule } from '@nebular/theme'; @NgModule({ imports: [ // ... NbIconModule, ], }) export class PageModule { }
### Usage
Icon can be colored using status input:
<nb-icon icon="star" status="warning"></nb-icon>
Colored icons: @stacked-example(Colored Icons, icon/icon-colors.component)
In case you need to specify an icon from a specific icon pack, this could be done using pack input property:
<nb-icon icon="star" pack="font-awesome"></nb-icon>
Additional icon settings (if available by the icon pack) could be passed using options input:
<nb-icon icon="star" [options]="{ animation: { type: 'zoom' } }"></nb-icon>
icon-font-size: icon-line-height: icon-width: icon-height: icon-svg-vertical-align: icon-basic-color: icon-primary-color: icon-info-color: icon-success-color: icon-warning-color: icon-danger-color: icon-control-color:

constructor

constructor(
    sanitizer: DomSanitizer,
    iconLibrary: NbIconLibraries,
    el: ElementRef,
    renderer: Renderer2,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property config

config: string | NbIconConfig;

Sets all icon configurable properties via config object. If passed value is a string set icon name. @docs-private

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property el

protected el: ElementRef;

property html

html: SafeHtml;

property icon

icon: string;

Icon name
Parameter status

property iconDef

protected iconDef: any;

property iconLibrary

protected iconLibrary: NbIconLibraries;

property info

readonly info: boolean;

property options

options: { [name: string]: any };

Additional icon settings
Parameter
{[name: string]: any}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbIconComponent,
    'nb-icon',
    never,
    {
        icon: { alias: 'icon'; required: false };
        pack: { alias: 'pack'; required: false };
        options: { alias: 'options'; required: false };
        status: { alias: 'status'; required: false };
        config: { alias: 'config'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbIconComponent, never>;

property pack

pack: string;

Icon pack name
Parameter status

property prevClasses

protected prevClasses: any[];

property primary

readonly primary: boolean;

property renderer

protected renderer: Renderer2;

property sanitizer

protected sanitizer: DomSanitizer;

property status

status?: string;

Icon status (adds specific styles): basic, primary, info, success, warning, danger, control

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property warning

readonly warning: boolean;

method assignClasses

protected assignClasses: (classes: string[]) => void;

method clearIcon

protected clearIcon: () => void;

method ngOnChanges

ngOnChanges: () => void;

method ngOnInit

ngOnInit: () => void;

method renderIcon

renderIcon: (
    name: string,
    pack?: string,
    options?: { [name: string]: any }
) => import('./icon-libraries').NbIconDefinition;

class NbIconDefinition

class NbIconDefinition {}

property icon

icon: NbIcon;

property name

name: string;

property pack

pack: string;

property type

type: string;

class NbIconLibraries

class NbIconLibraries {}

This service allows to register multiple icon packs to use them later within <nb-icon></nb-icon> component.

property defaultPack

protected defaultPack: NbIconPack;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbIconLibraries, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbIconLibraries>;

property packs

protected packs: Map<string, NbIconPack>;

method createFontIcon

protected createFontIcon: (
    name: string,
    content: NbIcon | string,
    params: NbFontIconPackParams
) => NbFontIcon;

method createSvgIcon

protected createSvgIcon: (
    name: string,
    content: NbIcon | string,
    params: NbIconPackParams
) => NbSvgIcon;

method getDefaultPackOrThrow

protected getDefaultPackOrThrow: () => NbIconPack;

method getFontIcon

getFontIcon: (name: string, pack?: string) => NbIconDefinition;

Returns Font icon
Parameter name
Parameter pack
Returns
NbIconDefinition

method getIcon

getIcon: (name: string, pack?: string) => NbIconDefinition | null;

Returns an icon
Parameter name
Parameter pack
Returns
NbIconDefinition

method getIconFromPack

protected getIconFromPack: (
    name: string,
    pack: NbIconPack
) => NbIcon | string | null;

method getPack

getPack: (name: string) => NbIconPack;

Returns pack by name
Parameter name

method getPackOrThrow

protected getPackOrThrow: (name: string) => NbIconPack;

method getSvgIcon

getSvgIcon: (name: string, pack?: string) => NbIconDefinition | null;

Returns Svg icon
Parameter name
Parameter pack
Returns
NbIconDefinition

method registerFontPack

registerFontPack: (name: string, params?: NbFontIconPackParams) => void;

Registers new font pack
Parameter name
Parameter params

method registerSvgPack

registerSvgPack: (
    name: string,
    icons: NbIcons,
    params?: NbIconPackParams
) => void;

Registers new Svg icon pack
Parameter name
Parameter icons
Parameter params

method setDefaultPack

setDefaultPack: (name: string) => void;

Sets pack as a default
Parameter name

class NbIconModule

class NbIconModule {}

constructor

constructor(iconsLibrary: NbIconLibraries);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbIconModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbIconModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbIconModule,
    [typeof i1.NbIconComponent],
    [any],
    [typeof i1.NbIconComponent]
>;

class NbInfiniteListDirective

class NbInfiniteListDirective implements AfterViewInit, OnDestroy {}

Infinite List Directive
<nb-list nbInfiniteList [threshold]="500" (bottomThreshold)="loadNext()"> <nb-list-item *ngFor="let item of items"></nb-list-item> </nb-list>
@stacked-example(Simple infinite list, infinite-list/infinite-list-showcase.component)
Directive will notify when list scrolled up or down to a given threshold. By default it listen to scroll of list on which applied, but also can be set to listen to window scroll.
@stacked-example(Scroll modes, infinite-list/infinite-list-scroll-modes.component)
To improve UX of infinite lists, it's better to keep current page in url, so user able to return to the last viewed page or to share a link to this page. nbListPageTracker directive will help you to know, what page user currently viewing. Just put it on a list, set page size and it will calculate page that currently in viewport. You can [open the example](example/infinite-list/infinite-news-list.component) in a new tab to check out this feature.
@stacked-example(Infinite list with pager, infinite-list/infinite-news-list.component)
@stacked-example(Infinite list with placeholders at the top, infinite-list/infinite-list-placeholders.component)

constructor

constructor(
    elementRef: ElementRef,
    scrollService: NbLayoutScrollService,
    dimensionsService: NbLayoutRulerService
);

property bottomThreshold

bottomThreshold: EventEmitter<any>;

Emits when distance between list bottom and current scroll position is less than threshold.

property listItems

listItems: QueryList<NbListItemComponent>;

property ngAcceptInputType_listenWindowScroll

static ngAcceptInputType_listenWindowScroll: NbBooleanInput;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbInfiniteListDirective,
    '[nbInfiniteList]',
    never,
    {
        threshold: { alias: 'threshold'; required: false };
        throttleTime: { alias: 'throttleTime'; required: false };
        listenWindowScroll: { alias: 'listenWindowScroll'; required: false };
    },
    { bottomThreshold: 'bottomThreshold'; topThreshold: 'topThreshold' },
    ['listItems'],
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbInfiniteListDirective, never>;

property threshold

threshold: number;

Threshold after which event load more event will be emited. In pixels.

property throttleTime

throttleTime: number;

property topThreshold

topThreshold: EventEmitter<any>;

Emits when distance between list top and current scroll position is less than threshold.

property windowScroll

windowScroll: boolean;

method checkPosition

checkPosition: ({
    scrollHeight,
    scrollTop,
    clientHeight,
}: NbScrollableContainerDimensions) => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onElementScroll

onElementScroll: () => void;

class NbInputDirective

class NbInputDirective
    implements
        DoCheck,
        OnChanges,
        OnInit,
        AfterViewInit,
        OnDestroy,
        NbFormFieldControl {}

Basic input directive.
<input nbInput></input>
### Installation
Import NbInputModule to your feature module.
@NgModule({ imports: [ // ... NbInputModule, ], }) export class PageModule { }
### Usage
Default input size is medium: @stacked-example(Showcase, input/input-showcase.component)
Inputs are available in multiple colors using status property: @stacked-example(Input Colors, input/input-colors.component)
There are three input sizes:
@stacked-example(Input Sizes, input/input-sizes.component)
Inputs available in different shapes, which could be combined with the other properties: @stacked-example(Input Shapes, input/input-shapes.component)
nbInput could be applied to the following selectors - input, textarea: @stacked-example(Input Elements, input/input-types.component)
You can add fullWidth attribute to make element fill container: @stacked-example(Full width inputs, input/input-full-width.component)
Or you can bind control with form controls or ngModel: @stacked-example(Input form binding, input/input-form.component)
Use <nb-form-field> to add custom content to the input field. First import NbFormFieldModule. Then put the input field and custom content into <nb-form-field> and add nbPrefix or nbSuffix directive to the custom content. nbPrefix puts content before input and nbSuffix after.
@stacked-example(Input with icon, form-field/form-field-input.component) @stacked-example(Input with button, form-field/form-field-password.component)
input-border-style: input-border-width: input-outline-color: input-outline-width: input-placeholder-text-font-family: input-text-font-family: input-basic-text-color: input-basic-placeholder-text-color: input-basic-background-color: input-basic-border-color: input-basic-focus-background-color: input-basic-focus-border-color: input-basic-hover-background-color: input-basic-hover-border-color: input-basic-disabled-background-color: input-basic-disabled-border-color: input-basic-disabled-text-color: input-basic-disabled-placeholder-text-color: input-primary-text-color: input-primary-placeholder-text-color: input-primary-background-color: input-primary-border-color: input-primary-focus-background-color: input-primary-focus-border-color: input-primary-hover-background-color: input-primary-hover-border-color: input-primary-disabled-background-color: input-primary-disabled-border-color: input-primary-disabled-text-color: input-primary-disabled-placeholder-text-color: input-success-text-color: input-success-placeholder-text-color: input-success-background-color: input-success-border-color: input-success-focus-background-color: input-success-focus-border-color: input-success-hover-background-color: input-success-hover-border-color: input-success-disabled-background-color: input-success-disabled-border-color: input-success-disabled-text-color: input-success-disabled-placeholder-text-color: input-info-text-color: input-info-placeholder-text-color: input-info-background-color: input-info-border-color: input-info-focus-background-color: input-info-focus-border-color: input-info-hover-background-color: input-info-hover-border-color: input-info-disabled-background-color: input-info-disabled-border-color: input-info-disabled-text-color: input-info-disabled-placeholder-text-color: input-warning-text-color: input-warning-placeholder-text-color: input-warning-background-color: input-warning-border-color: input-warning-focus-background-color: input-warning-focus-border-color: input-warning-hover-background-color: input-warning-hover-border-color: input-warning-disabled-background-color: input-warning-disabled-border-color: input-warning-disabled-text-color: input-warning-disabled-placeholder-text-color: input-danger-text-color: input-danger-placeholder-text-color: input-danger-background-color: input-danger-border-color: input-danger-focus-background-color: input-danger-focus-border-color: input-danger-hover-background-color: input-danger-hover-border-color: input-danger-disabled-background-color: input-danger-disabled-border-color: input-danger-disabled-text-color: input-danger-disabled-placeholder-text-color: input-control-text-color: input-control-placeholder-text-color: input-control-background-color: input-control-border-color: input-control-focus-background-color: input-control-focus-border-color: input-control-hover-background-color: input-control-hover-border-color: input-control-disabled-background-color: input-control-disabled-border-color: input-control-disabled-text-color: input-control-disabled-placeholder-text-color: input-rectangle-border-radius: input-semi-round-border-radius: input-round-border-radius: input-tiny-text-font-size: input-tiny-text-font-weight: input-tiny-text-line-height: input-tiny-placeholder-text-font-size: input-tiny-placeholder-text-font-weight: input-tiny-placeholder-text-line-height: input-tiny-padding: input-tiny-max-width: input-small-text-font-size: input-small-text-font-weight: input-small-text-line-height: input-small-placeholder-text-font-size: input-small-placeholder-text-font-weight: input-small-placeholder-text-line-height: input-small-padding: input-small-max-width: input-medium-text-font-size: input-medium-text-font-weight: input-medium-text-line-height: input-medium-placeholder-text-font-size: input-medium-placeholder-text-font-weight: input-medium-placeholder-text-line-height: input-medium-padding: input-medium-max-width: input-large-text-font-size: input-large-text-font-weight: input-large-text-line-height: input-large-placeholder-text-font-size: input-large-placeholder-text-font-weight: input-large-placeholder-text-line-height: input-large-padding: input-large-max-width: input-giant-text-font-size: input-giant-text-font-weight: input-giant-text-line-height: input-giant-placeholder-text-font-size: input-giant-placeholder-text-font-weight: input-giant-placeholder-text-line-height: input-giant-padding: input-giant-max-width:

constructor

constructor(
    elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>,
    focusMonitor: NbFocusMonitor,
    renderer: Renderer2,
    zone: NgZone,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property destroy$

protected destroy$: Subject<void>;

property disabled$

disabled$: BehaviorSubject<boolean>;

property elementRef

protected elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>;

property fieldSize

fieldSize: NbComponentSize;

Field size modifications. Possible values: small, medium (default), large.

property focused$

focused$: BehaviorSubject<boolean>;

property focusMonitor

protected focusMonitor: NbFocusMonitor;

property fullWidth

fullWidth: boolean;

If set element will fill container. false by default.

property fullWidth$

fullWidth$: BehaviorSubject<boolean>;

property giant

readonly giant: boolean;

property info

readonly info: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbInputDirective,
    'input[nbInput],textarea[nbInput]',
    never,
    {
        fieldSize: { alias: 'fieldSize'; required: false };
        status: { alias: 'status'; required: false };
        shape: { alias: 'shape'; required: false };
        fullWidth: { alias: 'fullWidth'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbInputDirective, never>;

property primary

readonly primary: boolean;

property rectangle

readonly rectangle: boolean;

property renderer

protected renderer: Renderer2;

property round

readonly round: boolean;

property semiRound

readonly semiRound: boolean;

property shape

shape: NbComponentShape;

Field shapes modifications. Possible values: rectangle (default), round, semi-round.

property size$

size$: BehaviorSubject<NbComponentSize>;

property small

readonly small: boolean;

property status

status: string;

Field status (adds specific styles): basic, primary, info, success, warning, danger, control

property status$

status$: BehaviorSubject<string>;

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property tiny

readonly tiny: boolean;

property warning

readonly warning: boolean;

property zone

protected zone: NgZone;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngDoCheck

ngDoCheck: () => void;

method ngOnChanges

ngOnChanges: ({ status, fieldSize, fullWidth }: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbInputModule

class NbInputModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbInputModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbInputModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbInputModule,
    [typeof i1.NbInputDirective],
    [typeof i2.NbSharedModule],
    [typeof i1.NbInputDirective]
>;

class NbJSThemesRegistry

class NbJSThemesRegistry {}

Js Themes registry - provides access to the JS themes' variables. Usually shouldn't be used directly, but through the NbThemeService class methods (getJsTheme).

constructor

constructor(builtInThemes: NbJSThemeOptions[], newThemes?: NbJSThemeOptions[]);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbJSThemesRegistry, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbJSThemesRegistry>;

method get

get: (themeName: string) => NbJSThemeOptions;

Return a theme
Parameter themeName
Returns
NbJSThemeOptions

method has

has: (themeName: string) => boolean;

Checks whether the theme is registered
Parameter themeName
Returns
boolean

method register

register: (config: any, themeName: string, baseTheme: string) => void;

Registers a new JS theme
Parameter config
any
Parameter themeName
string
Parameter baseTheme
string

class NbLayoutColumnComponent

class NbLayoutColumnComponent {}

A container component which determines a content position inside of the layout. The layout could contain unlimited columns (not including the sidebars).
By default the columns are ordered from the left to the right, but it's also possible to overwrite this behavior by setting a left attribute to the column, moving it to the very first position:
@stacked-example(Column Left, layout/layout-column-left.component)

property leftValue

leftValue: boolean;

property ngAcceptInputType_left

static ngAcceptInputType_left: NbBooleanInput;

property ngAcceptInputType_start

static ngAcceptInputType_start: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbLayoutColumnComponent,
    'nb-layout-column',
    never,
    {
        left: { alias: 'left'; required: false };
        start: { alias: 'start'; required: false };
    },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutColumnComponent, never>;

property startValue

startValue: boolean;

class NbLayoutComponent

class NbLayoutComponent implements AfterViewInit, OnDestroy {}

Layout container component. When using with Nebular Theme System it is required that all child components should be placed inside.
Basic example of two column layout with header:
@stacked-example(Showcase, layout/layout-showcase.component)
Can contain the following components inside:
<nb-layout> <nb-layout-header></nb-layout-header> <nb-layout-footer></nb-layout-footer> <nb-layout-column></nb-layout-column> <nb-sidebar></nb-sidebar> </nb-layout>
### Installation
Import NbLayoutModule to your app module.
@NgModule({ imports: [ // ... NbLayoutModule, ], }) export class AppModule { }
### Usage By default the layout fills up the whole view-port. The window scrollbars are disabled on the body and moved inside of the nb-layout, so that the scrollbars won't mess with the fixed nb-header.
The child components are projected into a flexible layout structure allowing to adjust the layout behavior based on the settings provided.
The layout content (columns) becomes centered when the window width is more than the value specified in the theme variable layout-content-width.
The layout also contains the area on the very top (the first child of the nb-layout), which could be used to dynamically append some components like modals or spinners/loaders so that they are located on top of the elements hierarchy. More details are under the ThemeService section.
The layout component is also responsible for changing application themes. It listens to the themeChange event and change a theme CSS class appended to body. Based on the class appended, specific CSS-theme is applied to the application. More details of the Theme System could be found here [Enabling Theme System](#/docs/concepts/theme-system)
A simple layout with footer:
@stacked-example(Layout With Footer, layout/layout-w-footer.component)
It is possible to ask the layout to center the columns (notice: we added a center attribute to the layout:
<nb-layout center> <nb-layout-header>Awesome Company</nb-layout-header> <nb-layout-column> Hello World! </nb-layout-column> <nb-layout-footer>Contact us</nb-layout-footer> </nb-layout>
layout-background-color: layout-text-color: layout-text-font-family: layout-text-font-size: layout-text-font-weight: layout-text-line-height: layout-min-height: layout-content-width: layout-window-mode-min-width: layout-window-mode-background-color: layout-window-mode-padding-top: layout-window-shadow: layout-padding: layout-medium-padding: layout-small-padding: layout-scrollbar-background-color: layout-scrollbar-color: layout-scrollbar-width:

constructor

constructor(
    themeService: NbThemeService,
    spinnerService: NbSpinnerService,
    elementRef: ElementRef,
    renderer: Renderer2,
    window: any,
    document: any,
    platformId: Object,
    layoutDirectionService: NbLayoutDirectionService,
    scrollService: NbLayoutScrollService,
    rulerService: NbLayoutRulerService,
    scrollTop: NbRestoreScrollTopHelper,
    overlayContainer: NbOverlayContainerAdapter
);

property afterViewInit$

protected afterViewInit$: BehaviorSubject<any>;

property centerValue

centerValue: boolean;

property document

protected document: any;

property elementRef

protected elementRef: ElementRef;

property isScrollBlocked

protected isScrollBlocked: boolean;

property layoutContainerRef

layoutContainerRef: ElementRef<HTMLElement>;

property layoutDirectionService

protected layoutDirectionService: NbLayoutDirectionService;

property layoutPaddingOldValue

protected layoutPaddingOldValue: { left: string; right: string };

property ngAcceptInputType_center

static ngAcceptInputType_center: NbBooleanInput;

property ngAcceptInputType_restoreScrollTop

static ngAcceptInputType_restoreScrollTop: NbBooleanInput;

property ngAcceptInputType_windowMode

static ngAcceptInputType_windowMode: NbBooleanInput;

property ngAcceptInputType_withScroll

static ngAcceptInputType_withScroll: NbBooleanInput;

property overlayContainer

protected overlayContainer: NbOverlayContainerAdapter;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbLayoutComponent,
    'nb-layout',
    never,
    {
        center: { alias: 'center'; required: false };
        windowMode: { alias: 'windowMode'; required: false };
        withScroll: { alias: 'withScroll'; required: false };
        restoreScrollTop: { alias: 'restoreScrollTop'; required: false };
    },
    {},
    never,
    [
        'nb-layout-header:not([subheader])',
        'nb-sidebar',
        'nb-layout-header[subheader]',
        'nb-layout-column',
        'nb-layout-footer'
    ],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutComponent, never>;

property platformId

protected platformId: Object;

property renderer

protected renderer: Renderer2;

property restoreScrollTopValue

restoreScrollTopValue: boolean;

property rulerService

protected rulerService: NbLayoutRulerService;

property scrollableContainerOverflowOldValue

protected scrollableContainerOverflowOldValue: string;

property scrollableContainerRef

scrollableContainerRef: ElementRef<HTMLElement>;

property scrollBlockClass

protected scrollBlockClass: string;

property scrollService

protected scrollService: NbLayoutScrollService;

property scrollTop

protected scrollTop: NbRestoreScrollTopHelper;

property spinnerService

protected spinnerService: NbSpinnerService;

property themeService

protected themeService: NbThemeService;

property veryTopRef

veryTopRef: ViewContainerRef;

property window

protected window: any;

property windowModeValue

windowModeValue: boolean;

property withScrollValue

withScrollValue: boolean;

property withSubheader

withSubheader: boolean;

method blockScroll

protected blockScroll: () => void;

method getDimensions

getDimensions: () => NbLayoutDimensions;

Returns scroll and client height/width
Depending on the current scroll mode (withScroll=true) returns sizes from the body element or from the .scrollable-container
Returns
{NbLayoutDimensions}

method getScrollPosition

getScrollPosition: () => NbScrollPosition;

Returns scroll position of current scroll container.
If withScroll = true, returns scroll position of the .scrollable-container element, otherwise - of the scrollable element of the window (which may be different depending of a browser)
Returns
{NbScrollPosition}

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onResize

onResize: (event: any) => void;

method onScroll

onScroll: ($event: any) => void;

method registerAsOverlayContainer

protected registerAsOverlayContainer: () => void;

method unregisterAsOverlayContainer

protected unregisterAsOverlayContainer: () => void;

class NbLayoutDirectionService

class NbLayoutDirectionService {}

Layout Direction Service. Allows to set or get layout direction and listen to its changes

constructor

constructor(direction?: NbLayoutDirection);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbLayoutDirectionService,
    [{ optional: true }]
>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbLayoutDirectionService>;

method getDirection

getDirection: () => NbLayoutDirection;

Returns current layout direction.
Returns
NbLayoutDirection.

method isLtr

isLtr: () => boolean;

Returns true if layout direction set to left to right.
Returns
boolean.

method isRtl

isRtl: () => boolean;

Returns true if layout direction set to right to left.
Returns
boolean.

method onDirectionChange

onDirectionChange: () => Observable<NbLayoutDirection>;

Triggered when direction was changed.
Returns
Observable.

method setDirection

setDirection: (direction: NbLayoutDirection) => void;

Sets layout direction
Parameter direction

class NbLayoutFooterComponent

class NbLayoutFooterComponent {}

Page footer. Located under the nb-layout content (specifically, under the columns). Could be made fixed, becoming sticky to the bottom of the view port (window).
footer-background-color: footer-text-color: footer-text-font-family: footer-text-font-size: footer-text-font-weight: footer-text-line-height: footer-text-highlight-color: footer-height: footer-padding: footer-divider-color: footer-divider-style: footer-divider-width: footer-shadow:

property fixedValue

fixedValue: boolean;

property ngAcceptInputType_fixed

static ngAcceptInputType_fixed: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbLayoutFooterComponent,
    'nb-layout-footer',
    never,
    { fixed: { alias: 'fixed'; required: false } },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutFooterComponent, never>;

class NbLayoutHeaderComponent

class NbLayoutHeaderComponent {}

Page header component. Located on top of the page above the layout columns and sidebars. Could be made fixed by setting the corresponding property. In the fixed mode the header becomes sticky to the top of the nb-layout (to of the page). Here's an example:
@stacked-example(Fixed Header, layout/layout-fixed-header.component)
In a pair with sidebar it is possible to setup a configuration when header is placed on a side of the sidebar and not on top of it. To achieve this simply put a subheader property to the header like this:
<nb-layout-header subheader></nb-layout-header>
@stacked-example(Subheader, layout/layout-sidebar-subheader.component) Note that in such configuration sidebar shadow is removed and header cannot be make fixed.
Same way you can put both fixed and clipped headers adding creating a sub-header for your app:
@stacked-example(Subheader, layout/layout-subheader.component)
header-background-color: header-text-color: header-text-font-family: header-text-font-size: header-text-font-weight: header-text-line-height: header-height: header-padding: header-shadow:

constructor

constructor(layout: NbLayoutComponent);

property fixedValue

fixedValue: boolean;

property ngAcceptInputType_fixed

static ngAcceptInputType_fixed: NbBooleanInput;

property ngAcceptInputType_subheader

static ngAcceptInputType_subheader: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbLayoutHeaderComponent,
    'nb-layout-header',
    never,
    {
        fixed: { alias: 'fixed'; required: false };
        subheader: { alias: 'subheader'; required: false };
    },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutHeaderComponent, never>;

property subheaderValue

subheaderValue: boolean;

class NbLayoutModule

class NbLayoutModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbLayoutModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbLayoutModule,
    [
        typeof i1.NbLayoutComponent,
        typeof i1.NbLayoutColumnComponent,
        typeof i1.NbLayoutFooterComponent,
        typeof i1.NbLayoutHeaderComponent,
        typeof i2.NbLtrDirective,
        typeof i2.NbRtlDirective
    ],
    [typeof i3.NbSharedModule],
    [
        typeof i1.NbLayoutComponent,
        typeof i1.NbLayoutColumnComponent,
        typeof i1.NbLayoutFooterComponent,
        typeof i1.NbLayoutHeaderComponent,
        typeof i2.NbLtrDirective,
        typeof i2.NbRtlDirective
    ]
>;

class NbLayoutRulerService

class NbLayoutRulerService {}

Simple helper service to return Layout dimensions Depending of current Layout scroll mode (default or withScroll when scroll is moved to an element inside of the layout) corresponding dimensions will be returns - of documentElement in first case and .scrollable-container in the second.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutRulerService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbLayoutRulerService>;

method getDimensions

getDimensions: () => Observable<NbLayoutDimensions>;

Content dimensions
Returns
{Observable}

method onGetDimensions

onGetDimensions: () => Subject<any>;

Returns
{Subject}

class NbLayoutScrollService

class NbLayoutScrollService {}

Layout scroll service. Provides information about current scroll position, as well as methods to update position of the scroll.
The reason we added this service is that in Nebular there are two scroll modes: - the default mode when scroll is on body - and the withScroll mode, when scroll is removed from the body and moved to an element inside of the nb-layout component

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutScrollService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbLayoutScrollService>;

method fireScrollChange

fireScrollChange: (event: any) => void;

Parameter event

method getPosition

getPosition: () => Observable<NbScrollPosition>;

Returns scroll position
Returns
{Observable}

method onGetPosition

onGetPosition: () => Subject<any>;

Returns
{Subject}

method onManualScroll

onManualScroll: () => Observable<NbScrollPosition>;

Returns
Observable.

method onScroll

onScroll: () => Observable<any>;

Returns a stream of scroll events
Returns
{Observable}

method onScrollableChange

onScrollableChange: () => Observable<boolean>;

method scrollable

scrollable: (scrollable: boolean) => void;

method scrollTo

scrollTo: (x?: number, y?: number) => void;

Sets scroll position
Parameter x
Parameter y

class NbListComponent

class NbListComponent {}

List is a container component that wraps nb-list-item component.
Basic example: @stacked-example(Simple list, list/simple-list-showcase.component)
nb-list-item accepts arbitrary content, so you can create a list of any components.
### Installation
Import NbListModule to your feature module.
@NgModule({ imports: [ // ... NbListModule, ], }) export class PageModule { }
### Usage
List of users: @stacked-example(Users list, list/users-list-showcase.component)
list-item-divider-color: list-item-divider-style: list-item-divider-width: list-item-padding: list-item-text-color: list-item-font-family: list-item-font-size: list-item-font-weight: list-item-line-height:

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbListComponent,
    'nb-list',
    never,
    { role: { alias: 'role'; required: false } },
    {},
    never,
    ['nb-list-item'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbListComponent, never>;

property role

role: string;

Role attribute value
{string}

class NbListItemComponent

class NbListItemComponent {}

List item component is a grouping component that accepts arbitrary content. It should be direct child of nb-list componet.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbListItemComponent,
    'nb-list-item',
    never,
    { role: { alias: 'role'; required: false } },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbListItemComponent, never>;

property role

role: string;

Role attribute value
{string}

class NbListModule

class NbListModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbListModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbListModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbListModule,
    [
        typeof i1.NbListComponent,
        typeof i1.NbListItemComponent,
        typeof i2.NbListPageTrackerDirective,
        typeof i3.NbInfiniteListDirective
    ],
    never,
    [
        typeof i1.NbListComponent,
        typeof i1.NbListItemComponent,
        typeof i2.NbListPageTrackerDirective,
        typeof i3.NbInfiniteListDirective
    ]
>;

class NbListPageTrackerDirective

class NbListPageTrackerDirective implements AfterViewInit, OnDestroy {}

List pager directive
Directive allows you to determine page of currently viewing items.

constructor

constructor();

property listItems

listItems: QueryList<ElementRef>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbListPageTrackerDirective,
    '[nbListPageTracker]',
    never,
    {
        pageSize: { alias: 'pageSize'; required: false };
        startPage: { alias: 'startPage'; required: false };
    },
    { pageChange: 'pageChange' },
    ['listItems'],
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbListPageTrackerDirective, never>;

property pageChange

pageChange: EventEmitter<number>;

Emits when another page become visible.

property pageSize

pageSize: number;

Items per page.

property startPage

startPage: number;

Page to start counting with.

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

class NbLtrDirective

class NbLtrDirective extends NbBaseLayoutDirectionDirective {}

Apply nbLtr directive to the element you need to show only when layout direction is LTR.
<div *nbLtr>This text is visible only when layout direction is LTR</div>

constructor

constructor(
    templateRef: TemplateRef<any>,
    viewContainer: ViewContainerRef,
    cd: ChangeDetectorRef,
    directionService: NbLayoutDirectionService
);

property cd

protected cd: ChangeDetectorRef;

property directionService

protected directionService: NbLayoutDirectionService;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbLtrDirective,
    '[nbLtr]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbLtrDirective, never>;

property templateRef

protected templateRef: TemplateRef<any>;

property viewContainer

protected viewContainer: ViewContainerRef;

class NbMediaBreakpointsService

class NbMediaBreakpointsService {}

Manages media breakpoints
Provides access to available media breakpoints to convert window width to a configured breakpoint, e.g. 200px - *xs* breakpoint

constructor

constructor(breakpoints: any);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbMediaBreakpointsService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbMediaBreakpointsService>;

method getBreakpoints

getBreakpoints: () => NbMediaBreakpoint[];

Returns a list of configured breakpoints for the theme
Returns
NbMediaBreakpoint[]

method getBreakpointsMap

getBreakpointsMap: () => { [breakpoint: string]: number };

Returns a map of configured breakpoints for the theme
Returns
{[p: string]: number}

method getByName

getByName: (name: string) => NbMediaBreakpoint;

Returns a configured breakpoint by name
Parameter name
string
Returns
NbMediaBreakpoint

method getByWidth

getByWidth: (width: number) => NbMediaBreakpoint;

Returns a configured breakpoint by width
Parameter width
number
Returns
{Z|{name: string, width: number}}

class NbMenuComponent

class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {}

Vertical menu component.
Accepts a list of menu items and renders them accordingly. Supports multi-level menus.
Basic example @stacked-example(Showcase, menu/menu-showcase.component)
// ... items: NbMenuItem[] = [ { title: home, link: '/' }, { title: dashboard, link: 'dashboard' } ]; // ... <nb-menu [items]="items"></nb-menu>
### Installation
Import NbMenuModule.forRoot() to your app module.
@NgModule({ imports: [ // ... NbMenuModule.forRoot(), ], }) export class AppModule { }
and NbMenuModule to your feature module where the component should be shown:
@NgModule({ imports: [ // ... NbMenuModule, ], }) export class PageModule { }
### Usage
Two-level menu example @stacked-example(Two Levels, menu/menu-children.component)
Autocollapse menu example @stacked-example(Autocollapse Menu, menu/menu-autocollapse.component)
Menu badge @stacked-example(Menu item badge, menu/menu-badge.component)
menu-background-color: menu-text-color: menu-text-font-family: menu-text-font-size: menu-text-font-weight: menu-text-line-height: menu-group-text-color: menu-item-border-radius: menu-item-padding: menu-item-hover-background-color: menu-item-hover-cursor: menu-item-hover-text-color: menu-item-icon-hover-color: menu-item-active-background-color: menu-item-active-text-color: menu-item-icon-active-color: menu-item-icon-color: menu-item-icon-margin: menu-item-icon-width: menu-item-divider-color: menu-item-divider-style: menu-item-divider-width: menu-submenu-background-color: menu-submenu-text-color: menu-submenu-margin: menu-submenu-padding: menu-submenu-item-border-color: menu-submenu-item-border-style: menu-submenu-item-border-width: menu-submenu-item-border-radius: menu-submenu-item-padding: menu-submenu-item-hover-background-color: menu-submenu-item-hover-border-color: menu-submenu-item-hover-text-color: menu-submenu-item-icon-hover-color: menu-submenu-item-active-background-color: menu-submenu-item-active-border-color: menu-submenu-item-active-text-color: menu-submenu-item-icon-active-color: menu-submenu-item-active-hover-background-color: menu-submenu-item-active-hover-border-color: menu-submenu-item-active-hover-text-color: menu-submenu-item-icon-active-hover-color:

constructor

constructor(
    window: any,
    platformId: any,
    menuInternalService: NbMenuInternalService,
    router: Router
);

property autoCollapse

autoCollapse: boolean;

Collapse all opened submenus on the toggle event Default value is "false" boolean

property destroy$

protected destroy$: Subject<void>;

property items

items: NbMenuItem[];

List of menu items. List | List | any

property menuInternalService

protected menuInternalService: NbMenuInternalService;

property ngAcceptInputType_autoCollapse

static ngAcceptInputType_autoCollapse: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbMenuComponent,
    'nb-menu',
    never,
    {
        tag: { alias: 'tag'; required: false };
        items: { alias: 'items'; required: false };
        autoCollapse: { alias: 'autoCollapse'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuComponent, never>;

property platformId

protected platformId: any;

property router

protected router: Router;

property tag

tag: string;

Tags a menu with some ID, can be later used in the menu service to determine which menu triggered the action, if multiple menus exist on the page.
{string}

property window

protected window: any;

method collapseAll

protected collapseAll: () => void;

method compareTag

protected compareTag: (tag: string) => boolean;

method getHomeItem

protected getHomeItem: (items: NbMenuItem[]) => NbMenuItem;

method getSelectedItem

protected getSelectedItem: (items: NbMenuItem[]) => NbMenuItem;

method navigateHome

protected navigateHome: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onAddItem

onAddItem: (data: { tag: string; items: NbMenuItem[] }) => void;

method onHoverItem

onHoverItem: (item: NbMenuItem) => void;

method onItemClick

onItemClick: (item: NbMenuItem) => void;

method onSelectItem

onSelectItem: (item: NbMenuItem) => void;

method onToggleSubMenu

onToggleSubMenu: (item: NbMenuItem) => void;

class NbMenuItem

class NbMenuItem {}

Menu Item options example @stacked-example(Menu Link Parameters, menu/menu-link-params.component)

property ariaRole

ariaRole?: string;

The name of a role in the ARIA specification {string}

property badge

badge?: NbMenuBadgeConfig;

Badge component {boolean}

property children

children?: NbMenuItem[];

Children items {List}

property data

data?: any;

property expanded

expanded?: boolean;

Expanded by default {boolean}

property fragment

fragment?: string;

property group

group?: boolean;

Whether the item is just a group (non-clickable) {boolean}

property hidden

hidden?: boolean;

Hidden Item {boolean}

property home

home?: boolean;

Where this is a home item {boolean}

property icon

icon?: string | NbIconConfig;

Icon class name or icon config object {string | NbIconConfig}

property link

link?: string;

Item relative link (for routerLink) {string}

property parent

parent?: NbMenuItem;

property pathMatch

pathMatch?: 'full' | 'prefix';

Item is selected when partly or fully equal to the current url {string}

property preserveFragment

preserveFragment?: boolean;

property queryParams

queryParams?: Params;

Map of query parameters {Params}

property queryParamsHandling

queryParamsHandling?: QueryParamsHandling;

property selected

selected?: boolean;

property skipLocationChange

skipLocationChange?: boolean;

Whether the item skipLocationChange is true or false {boolean}

property target

target?: string;

HTML Link target {string}

property title

title: string;

Item Title {string}

property url

url?: string;

Item URL (absolute) {string}

method getParents

static getParents: (item: NbMenuItem) => NbMenuItem[];

Returns
item parents in top-down order

method isParent

static isParent: (item: NbMenuItem, possibleChild: NbMenuItem) => boolean;

class NbMenuItemComponent

class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {}

constructor

constructor(
    menuService: NbMenuService,
    directionService: NbLayoutDirectionService
);

property badge

badge: NbMenuBadgeConfig;

property destroy$

protected destroy$: Subject<void>;

property directionService

protected directionService: NbLayoutDirectionService;

property hoverItem

hoverItem: EventEmitter<any>;

property itemClick

itemClick: EventEmitter<any>;

property menuItem

menuItem: NbMenuItem;

property menuService

protected menuService: NbMenuService;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbMenuItemComponent,
    '[nbMenuItem]',
    never,
    {
        menuItem: { alias: 'menuItem'; required: false };
        badge: { alias: 'badge'; required: false };
    },
    {
        hoverItem: 'hoverItem';
        toggleSubMenu: 'toggleSubMenu';
        selectItem: 'selectItem';
        itemClick: 'itemClick';
    },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuItemComponent, never>;

property selectItem

selectItem: EventEmitter<any>;

property toggleState

toggleState: NbToggleStates;

property toggleSubMenu

toggleSubMenu: EventEmitter<any>;

method getExpandStateIcon

getExpandStateIcon: () => string;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngDoCheck

ngDoCheck: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onHoverItem

onHoverItem: (item: NbMenuItem) => void;

method onItemClick

onItemClick: (item: NbMenuItem) => void;

method onSelectItem

onSelectItem: (item: NbMenuItem) => void;

method onToggleSubMenu

onToggleSubMenu: (item: NbMenuItem) => void;

class NbMenuModule

class NbMenuModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbMenuModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbMenuModule,
    [typeof i1.NbMenuComponent, typeof i1.NbMenuItemComponent],
    [typeof i2.NbSharedModule, typeof i3.NbIconModule, typeof i4.NbBadgeModule],
    [typeof i1.NbMenuComponent, typeof i1.NbMenuItemComponent]
>;

method forRoot

static forRoot: () => ModuleWithProviders<NbMenuModule>;

class NbMenuService

class NbMenuService {}

Menu Service. Allows you to listen to menu events, or to interact with a menu. @stacked-example(Menu Service, menu/menu-service.component)

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbMenuService>;

method addItems

addItems: (items: NbMenuItem[], tag?: string) => void;

Add items to the end of the menu items list
Parameter items
Parameter tag

method collapseAll

collapseAll: (tag?: string) => void;

Collapses all menu items
Parameter tag

method getSelectedItem

getSelectedItem: (tag?: string) => Observable<NbMenuBag>;

Returns currently selected item. Won't subscribe to the future events.
Parameter tag
Returns
{Observable<{tag: string; item: NbMenuItem}>}

method navigateHome

navigateHome: (tag?: string) => void;

Navigate to the home menu item
Parameter tag

method onItemClick

onItemClick: () => Observable<NbMenuBag>;

method onItemHover

onItemHover: () => Observable<NbMenuBag>;

method onItemSelect

onItemSelect: () => Observable<NbMenuBag>;

method onSubmenuToggle

onSubmenuToggle: () => Observable<NbMenuBag>;

class NbNativeDateService

class NbNativeDateService extends NbDateService<Date> {}

The NbNativeDateService is basic implementation of NbDateService using native js date objects and angular localization services.

constructor

constructor(locale: string);

property datePipe

protected datePipe: DatePipe;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbNativeDateService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbNativeDateService>;

method addDay

addDay: (date: Date, num: number) => Date;

method addHours

addHours: (date: Date, hour: number) => Date;

method addMinutes

addMinutes: (date: Date, minute: number) => Date;

method addMonth

addMonth: (date: Date, num: number) => Date;

method addYear

addYear: (date: Date, num: number) => Date;

method clone

clone: (date: Date) => Date;

method compareDates

compareDates: (date1: Date, date2: Date) => number;

method createDate

createDate: (year: number, month: number, date: number) => Date;

method format

format: (date: Date, format: string) => string;

method getDate

getDate: (date: Date) => number;

method getDateFormat

getDateFormat: () => string;

method getDayOfWeek

getDayOfWeek: (date: Date) => number;

method getDayOfWeekNames

getDayOfWeekNames: () => string[];

method getFirstDayOfWeek

getFirstDayOfWeek: () => number;

returns first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.

method getHours

getHours: (date: Date) => number;

method getId

getId: () => string;

method getLocaleTimeFormat

getLocaleTimeFormat: () => string;

method getMilliseconds

getMilliseconds: (date: Date) => number;

method getMinutes

getMinutes: (date: Date) => number;

method getMonth

getMonth: (date: Date) => number;

method getMonthEnd

getMonthEnd: (date: Date) => Date;

method getMonthName

getMonthName: (date: Date, style?: TranslationWidth) => string;

method getMonthNameByIndex

getMonthNameByIndex: (index: number, style?: TranslationWidth) => string;

method getMonthStart

getMonthStart: (date: Date) => Date;

method getNumberOfDaysInMonth

getNumberOfDaysInMonth: (date: Date) => number;

method getSeconds

getSeconds: (date: Date) => number;

method getTwelveHoursFormat

getTwelveHoursFormat: () => string;

method getWeekNumber

getWeekNumber: (date: Date) => number;

method getYear

getYear: (date: Date) => number;

method getYearEnd

getYearEnd: (date: Date) => Date;

method getYearStart

getYearStart: (date: Date) => Date;

method isSameDay

isSameDay: (date1: Date, date2: Date) => boolean;

method isSameMonth

isSameMonth: (date1: Date, date2: Date) => boolean;

method isSameYear

isSameYear: (date1: Date, date2: Date) => boolean;

method isValidDateString

isValidDateString: (date: string, format: string) => boolean;

method isValidTimeString

isValidTimeString: (date: string, format: string) => boolean;

method parse

parse: (date: string, format: string) => Date;

We haven't got capability to parse date using formatting without third party libraries.

method setHours

setHours: (date: Date, hour: number) => Date;

method setLocale

setLocale: (locale: string) => void;

method setMilliseconds

setMilliseconds: (date: Date, second: number) => Date;

method setMinutes

setMinutes: (date: Date, minute: number) => Date;

method setSeconds

setSeconds: (date: Date, second: number) => Date;

method today

today: () => Date;

method valueOf

valueOf: (date: Date) => number;

class NbNoDataRowOutletDirective

class NbNoDataRowOutletDirective extends NoDataRowOutlet {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbNoDataRowOutletDirective,
    '[nbNoDataRowOutlet]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbNoDataRowOutletDirective, never>;

class NbNoopTriggerStrategy

class NbNoopTriggerStrategy extends NbTriggerStrategyBase {}

Creates empty show and hide event streams.

property hide$

hide$: Observable<Event>;

property show$

show$: Observable<Event>;

class NbOptionComponent

class NbOptionComponent<T = any>
    implements OnDestroy, AfterViewInit, NbFocusableOption, NbHighlightableOption {}

NbOptionComponent
option-background-color: option-text-color: option-text-font-family: option-hover-background-color: option-hover-text-color: option-active-background-color: option-active-text-color: option-focus-background-color: option-focus-text-color: option-selected-background-color: option-selected-text-color: option-selected-hover-background-color: option-selected-hover-text-color: option-selected-active-background-color: option-selected-active-text-color: option-selected-focus-background-color: option-selected-focus-text-color: option-disabled-background-color: option-disabled-text-color: option-tiny-text-font-size: option-tiny-text-font-weight: option-tiny-text-line-height: option-tiny-padding: option-small-text-font-size: option-small-text-font-weight: option-small-text-line-height: option-small-padding: option-medium-text-font-size: option-medium-text-font-weight: option-medium-text-line-height: option-medium-padding: option-large-text-font-size: option-large-text-font-weight: option-large-text-line-height: option-large-padding: option-giant-text-font-size: option-giant-text-font-weight: option-giant-text-line-height: option-giant-padding:

constructor

constructor(
    parent: any,
    elementRef: ElementRef,
    cd: ChangeDetectorRef,
    zone: NgZone,
    renderer: Renderer2
);

property activeClass

readonly activeClass: boolean;

property alive

protected alive: boolean;

property cd

protected cd: ChangeDetectorRef;

property click

readonly click: Observable<NbOptionComponent<T>>;

property click$

protected click$: Subject<NbOptionComponent<T>>;

Fires when option clicked

property content

readonly content: any;

property disabled

disabled: boolean;

property disabledAttribute

readonly disabledAttribute: string;

property disabledByGroup

protected disabledByGroup: boolean;

property elementRef

protected elementRef: ElementRef;

property hidden

readonly hidden: any;

property id

id: string;

Component scoped id for aria attributes.

property multiple

readonly multiple: boolean;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbOptionComponent<any>,
    'nb-option',
    never,
    {
        value: { alias: 'value'; required: false };
        disabled: { alias: 'disabled'; required: false };
    },
    { selectionChange: 'selectionChange' },
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbOptionComponent<any>,
    [{ optional: true }, null, null, null, null]
>;

property parent

protected parent: NbSelectComponent;

property renderer

protected renderer: Renderer2;

property selected

selected: boolean;

property selectedClass

readonly selectedClass: boolean;

property selectionChange

selectionChange: EventEmitter<NbOptionComponent<T>>;

Fires value when option selection change.

property tabindex

readonly tabindex: string;

property value

value: {};

Option value that will be fired on selection.

property withCheckbox

readonly withCheckbox: boolean;

Determines should we render checkbox.

property zone

protected zone: NgZone;

method deselect

deselect: () => void;

method focus

focus: () => void;

method getLabel

getLabel: () => string;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onClick

onClick: (event: any) => void;

method select

select: () => void;

method setActiveStyles

setActiveStyles: () => void;

method setDisabledByGroupState

setDisabledByGroupState: (disabled: boolean) => void;

Sets disabled by group state and marks component for check.

method setInactiveStyles

setInactiveStyles: () => void;

method setSelection

protected setSelection: (selected: boolean) => void;

class NbOptionGroupComponent

class NbOptionGroupComponent implements AfterContentInit, OnDestroy {}

NbOptionGroupComponent
option-group-text-color: option-group-tiny-start-padding: option-group-small-start-padding: option-group-medium-start-padding: option-group-large-start-padding: option-group-giant-start-padding:

property destroy$

protected destroy$: Subject<void>;

property disabled

disabled: boolean;

property disabledAttribute

readonly disabledAttribute: string;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property options

options: QueryList<NbOptionComponent<any>>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbOptionGroupComponent,
    'nb-option-group',
    never,
    {
        title: { alias: 'title'; required: false };
        disabled: { alias: 'disabled'; required: false };
    },
    {},
    ['options'],
    ['nb-option, ng-container'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOptionGroupComponent, never>;

property title

title: string;

method asyncUpdateOptionsDisabledState

protected asyncUpdateOptionsDisabledState: () => void;

Updates options disabled state after promise resolution. This way change detection will be triggered after options state updated. Use this method when updating options during change detection run (e.g. QueryList.changes, lifecycle hooks).

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method updateOptionsDisabledState

protected updateOptionsDisabledState: () => void;

Sets disabled state for each option to current group disabled state.

class NbOptionListComponent

class NbOptionListComponent<T> {}

The NbOptionListComponent is container component for NbOptionGroupComponent andNbOptionComponent list.
option-list-max-height: option-list-shadow: option-list-background-color: option-list-border-style: option-list-border-width: option-list-border-color: option-list-border-radius: option-list-adjacent-border-color: option-list-adjacent-border-style: option-list-adjacent-border-width:

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbOptionListComponent<any>,
    'nb-option-list',
    never,
    {
        size: { alias: 'size'; required: false };
        position: { alias: 'position'; required: false };
    },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOptionListComponent<any>, never>;

property position

position: NbPosition;

property positionBottom

readonly positionBottom: boolean;

property positionTop

readonly positionTop: boolean;

property size

size: NbComponentSize;

property sizeGiant

readonly sizeGiant: boolean;

property sizeLarge

readonly sizeLarge: boolean;

property sizeMedium

readonly sizeMedium: boolean;

property sizeSmall

readonly sizeSmall: boolean;

property sizeTiny

readonly sizeTiny: boolean;

class NbOptionModule

class NbOptionModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOptionModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbOptionModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbOptionModule,
    [
        typeof i1.NbOptionListComponent,
        typeof i2.NbOptionComponent,
        typeof i3.NbOptionGroupComponent
    ],
    [any, typeof i5.NbCheckboxModule],
    [
        typeof i1.NbOptionListComponent,
        typeof i2.NbOptionComponent,
        typeof i3.NbOptionGroupComponent
    ]
>;

class NbOverlay

class NbOverlay extends Overlay {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlay, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlay>;

property scrollStrategies

scrollStrategies: NbScrollStrategyOptions;

class NbOverlayContainer

class NbOverlayContainer extends OverlayContainer {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayContainer, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlayContainer>;

class NbOverlayContainerAdapter

class NbOverlayContainerAdapter extends NbOverlayContainer {}

Provides nb-layout as overlay container. Container has to be cleared when layout destroys. Another way previous version of the container will be used but it isn't inserted in DOM and exists in memory only. This case important only if you switch between multiple layouts.

property container

protected container: HTMLElement;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayContainerAdapter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlayContainerAdapter>;

method checkContainer

protected checkContainer: () => void;

method clearContainer

clearContainer: () => void;

method setContainer

setContainer: (container: HTMLElement) => void;

class NbOverlayContainerComponent

class NbOverlayContainerComponent {}

constructor

constructor(
    vcr: ViewContainerRef,
    injector: Injector,
    changeDetectorRef: ChangeDetectorRef
);

property content

content: string;

property injector

protected injector: Injector;

property isAttached

isAttached: boolean;

property isStringContent

readonly isStringContent: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbOverlayContainerComponent,
    'nb-overlay-container',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayContainerComponent, never>;

property portalOutlet

portalOutlet: NbPortalOutletDirective;

property vcr

protected vcr: ViewContainerRef;

method attachComponentPortal

attachComponentPortal: <T>(
    portal: NbComponentPortal<T>,
    context?: Object
) => ComponentRef<T>;

method attachStringContent

attachStringContent: (content: string) => void;

method attachTemplatePortal

attachTemplatePortal: <C>(portal: NbTemplatePortal<C>) => EmbeddedViewRef<C>;

method createChildInjector

protected createChildInjector: (
    cfr: ComponentFactoryResolver
) => NbPortalInjector;

method detach

detach: () => void;

class NbOverlayModule

class NbOverlayModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbOverlayModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbOverlayModule,
    [
        typeof i1.NbPositionedContainerComponent,
        typeof i1.NbOverlayContainerComponent
    ],
    [typeof i2.NbCdkMappingModule, typeof i3.NbSharedModule],
    [
        typeof i2.NbCdkMappingModule,
        typeof i4.NbCdkAdapterModule,
        typeof i1.NbOverlayContainerComponent
    ]
>;

method forRoot

static forRoot: () => ModuleWithProviders<NbOverlayModule>;

class NbOverlayPositionBuilder

class NbOverlayPositionBuilder extends OverlayPositionBuilder {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayPositionBuilder, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlayPositionBuilder>;

class NbOverlayService

class NbOverlayService {}

constructor

constructor(overlay: NbOverlay, layoutDirection: NbLayoutDirectionService);

property layoutDirection

protected layoutDirection: NbLayoutDirectionService;

property overlay

protected overlay: NbOverlay;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlayService>;

property scrollStrategies

readonly scrollStrategies: NbScrollStrategyOptions;

method create

create: (config?: OverlayConfig) => OverlayRef;

class NbPlatform

class NbPlatform extends Platform {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPlatform, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbPlatform>;

class NbPopoverComponent

class NbPopoverComponent
    extends NbPositionedContainerComponent
    implements NbRenderableContainer {}

Overlay container. Renders provided content inside.
popover-text-color: popover-text-font-family: popover-text-font-size: popover-text-font-weight: popover-text-line-height: popover-background-color: popover-border-width: popover-border-color: popover-border-radius: popover-shadow: popover-arrow-size: popover-padding:

property cfr

cfr: ComponentFactoryResolver;

property content

content: any;

property context

context: Object;

property overlayContainer

overlayContainer: NbOverlayContainerComponent;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbPopoverComponent,
    'nb-popover',
    never,
    {
        content: { alias: 'content'; required: false };
        context: { alias: 'context'; required: false };
        cfr: { alias: 'cfr'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPopoverComponent, never>;

method attachComponent

protected attachComponent: () => void;

method attachContent

protected attachContent: () => void;

method attachString

protected attachString: () => void;

method attachTemplate

protected attachTemplate: () => void;

method detachContent

protected detachContent: () => void;

method renderContent

renderContent: () => void;

class NbPopoverDirective

class NbPopoverDirective
    implements
        NbDynamicOverlayController,
        OnChanges,
        AfterViewInit,
        OnDestroy,
        OnInit {}

Powerful popover directive, which provides the best UX for your users.
@stacked-example(Showcase, popover/popover-showcase.component)
Popover can accept different content such as: TemplateRef
<button [nbPopover]="templateRef"></button> <ng-template #templateRef> <span>Hello, Popover!</span> </ng-template>
### Installation
Import NbPopoverModule to your feature module.
@NgModule({ imports: [ // ... NbPopoverModule, ], }) export class PageModule { }
### Usage
Custom components
<button [nbPopover]="MyPopoverComponent"></button>
Both custom components and templateRef popovers can receive *contentContext* property that will be passed to the content props.
Primitive types
<button nbPopover="Hello, Popover!"></button>
Popover has different placements, such as: top, bottom, left, right, start and end which can be used as following:
@stacked-example(Placements, popover/popover-placements.component)
By default popover will try to adjust itself to maximally fit viewport and provide the best user experience. It will try to change position of the popover container. If you want to disable this behaviour set it noop.
<button nbPopover="Hello, Popover!" nbPopoverAdjustment="noop"></button>
Popover has a number of triggers which provides an ability to show and hide the component in different ways:
- Click mode shows the component when a user clicks on the host element and hides when the user clicks somewhere on the document outside the component. - Hint provides capability to show the component when the user hovers over the host element and hide when the user hovers out of the host. - Hover works like hint mode with one exception - when the user moves mouse from host element to the container element the component remains open, so that it is possible to interact with it content. - Focus mode is applied when user focuses the element. - Noop mode - the component won't react to the user interaction.
@stacked-example(Available Triggers, popover/popover-modes.component.html)
Noop mode is especially useful when you need to control Popover programmatically, for example show/hide as a result of some third-party action, like HTTP request or validation check:
@stacked-example(Manual Control, popover/popover-noop.component)
Below are examples for manual popover settings control, both via template binding and code. @stacked-example(Popover Settings, popover/popover-dynamic.component)
Please note, while manipulating Popover setting via code, you need to call rebuild() method to apply the settings changed. @stacked-example(Popover Settings Code, popover/popover-dynamic-code.component)
@additional-example(Template Ref, popover/popover-template-ref.component) @additional-example(Custom Component, popover/popover-custom-component.component)

constructor

constructor(hostRef: ElementRef, dynamicOverlayHandler: NbDynamicOverlayHandler);

property adjustment

adjustment: NbAdjustment;

Container position will be changes automatically based on this strategy if container can't fit view port. Set this property to noop value if you want to disable automatically adjustment. Available values: clockwise (default), counterclockwise, vertical, horizontal, noop.

property content

content: any;

Popover content which will be rendered in NbArrowedOverlayContainerComponent. Available content: template ref, component and any primitive.

property context

context: Object;

Container content context. Will be applied to the rendered component.

property destroy$

protected destroy$: Subject<void>;

property disabled

disabled: boolean;

Disables the display of the tooltip.

property dynamicOverlay

protected dynamicOverlay: NbDynamicOverlay;

property dynamicOverlayHandler

protected dynamicOverlayHandler: NbDynamicOverlayHandler;

property hostRef

protected hostRef: ElementRef;

property isShown

readonly isShown: boolean;

property nbPopoverShowStateChange

nbPopoverShowStateChange: EventEmitter<{ isShown: boolean }>;

property ngAcceptInputType_adjustment

static ngAcceptInputType_adjustment: NbAdjustmentValues;

property ngAcceptInputType_position

static ngAcceptInputType_position: NbPositionValues;

property ngAcceptInputType_trigger

static ngAcceptInputType_trigger: NbTriggerValues;

property offset

offset: number;

Sets popover offset

property overlayConfig

protected overlayConfig: OverlayConfig;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbPopoverDirective,
    '[nbPopover]',
    ['nbPopover'],
    {
        content: { alias: 'nbPopover'; required: false };
        context: { alias: 'nbPopoverContext'; required: false };
        position: { alias: 'nbPopoverPlacement'; required: false };
        adjustment: { alias: 'nbPopoverAdjustment'; required: false };
        trigger: { alias: 'nbPopoverTrigger'; required: false };
        offset: { alias: 'nbPopoverOffset'; required: false };
        disabled: { alias: 'nbTooltipDisabled'; required: false };
        popoverClass: { alias: 'nbPopoverClass'; required: false };
    },
    { nbPopoverShowStateChange: 'nbPopoverShowStateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPopoverDirective, never>;

property popoverClass

popoverClass: string;

property popoverComponent

protected popoverComponent: typeof NbPopoverComponent;

property position

position: NbPosition;

Position will be calculated relatively host element based on the position. Can be top, right, bottom, left, start or end.

property trigger

trigger: NbTrigger;

Describes when the container will be shown. Available options: click, hover, hint, focus and noop

method configureDynamicOverlay

protected configureDynamicOverlay: () => NbDynamicOverlayHandler;

method hide

hide: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method rebuild

rebuild: () => void;

method show

show: () => void;

method toggle

toggle: () => void;

class NbPopoverModule

class NbPopoverModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPopoverModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbPopoverModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbPopoverModule,
    [typeof i1.NbPopoverDirective, typeof i2.NbPopoverComponent],
    [typeof i3.NbOverlayModule],
    [typeof i1.NbPopoverDirective]
>;

class NbPortalDirective

class NbPortalDirective extends CdkPortal {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbPortalDirective,
    '[nbPortal]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPortalDirective, never>;

class NbPortalInjector

class NbPortalInjector extends PortalInjector {}

class NbPortalOutletDirective

class NbPortalOutletDirective extends CdkPortalOutlet {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbPortalOutletDirective,
    '[nbPortalOutlet]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPortalOutletDirective, never>;

class NbPositionBuilderService

class NbPositionBuilderService {}

constructor

constructor(
    document: any,
    viewportRuler: NbViewportRulerAdapter,
    platform: NbPlatform,
    positionBuilder: NbOverlayPositionBuilder,
    overlayContainer: NbOverlayContainerAdapter
);

property document

protected document: any;

property overlayContainer

protected overlayContainer: NbOverlayContainerAdapter;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPositionBuilderService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbPositionBuilderService>;

property platform

protected platform: NbPlatform;

property positionBuilder

protected positionBuilder: NbOverlayPositionBuilder;

property viewportRuler

protected viewportRuler: NbViewportRulerAdapter;

method connectedTo

connectedTo: (elementRef: ElementRef) => NbAdjustableConnectedPositionStrategy;

method global

global: () => NbGlobalPositionStrategy;

class NbPositionedContainerComponent

class NbPositionedContainerComponent {}

property bottom

readonly bottom: boolean;

property bottomEnd

readonly bottomEnd: boolean;

property bottomStart

readonly bottomStart: boolean;

property endBottom

readonly endBottom: boolean;

property endTop

readonly endTop: boolean;

property left

readonly left: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbPositionedContainerComponent,
    'ng-component',
    never,
    { position: { alias: 'position'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPositionedContainerComponent, never>;

property position

position: NbPosition;

property right

readonly right: boolean;

property startBottom

readonly startBottom: boolean;

property startTop

readonly startTop: boolean;

property top

readonly top: boolean;

property topEnd

readonly topEnd: boolean;

property topStart

readonly topStart: boolean;

class NbPositionHelper

class NbPositionHelper {}

constructor

constructor(layoutDirection: NbLayoutDirectionService);

property layoutDirection

protected layoutDirection: NbLayoutDirectionService;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPositionHelper, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbPositionHelper>;

method isRightPosition

isRightPosition: (position: NbGlobalPosition) => boolean;

method isTopPosition

isTopPosition: (position: NbGlobalPosition) => boolean;

method toLogicalPosition

toLogicalPosition: (position: NbGlobalPosition) => NbGlobalLogicalPosition;

method toLogicalPositionWhenLtr

protected toLogicalPositionWhenLtr: (
    position: NbGlobalPhysicalPosition
) => NbGlobalLogicalPosition;

method toLogicalPositionWhenRtl

protected toLogicalPositionWhenRtl: (
    position: NbGlobalPhysicalPosition
) => NbGlobalLogicalPosition;

method toPhysicalPosition

toPhysicalPosition: (position: NbGlobalPosition) => NbGlobalPhysicalPosition;

method toPhysicalPositionWhenLtr

protected toPhysicalPositionWhenLtr: (
    position: NbGlobalLogicalPosition
) => NbGlobalPhysicalPosition;

method toPhysicalPositionWhenRtl

protected toPhysicalPositionWhenRtl: (
    position: NbGlobalLogicalPosition
) => NbGlobalPhysicalPosition;

class NbPrefixDirective

class NbPrefixDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbPrefixDirective,
    '[nbPrefix]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbPrefixDirective, never>;

class NbProgressBarComponent

class NbProgressBarComponent {}

Progress Bar is a component for indicating progress.
Simple usage:
<nb-progress-bar [value]="50"></nb-progress-bar>
### Installation
Import NbProgressBarModule to your feature module.
@NgModule({ imports: [ // ... NbProgressBarModule, ], }) export class PageModule { }
### Usage
Progress bar accepts property value in range 0-100 @stacked-example(Progress bar, progress-bar/progress-bar-showcase.component)
Progress bar background could be configured by providing a status property: @stacked-example(Progress bar status, progress-bar/progress-bar-status.component)
Progress bar size (height and font-size) could be configured by providing a size property: @stacked-example(Progress bar size, progress-bar/progress-bar-size.component)
displayValue property shows current value inside progress bar. It's also possible to add custom text inside: @stacked-example(Progress bar value, progress-bar/progress-bar-value.component)
Progress bar supports width and background-color transition: @stacked-example(Progress bar interactive, progress-bar/progress-bar-interactive.component)
progress-bar-animation-duration: progress-bar-border-radius: progress-bar-text-font-family: progress-bar-tiny-height: progress-bar-tiny-text-font-size: progress-bar-tiny-text-font-weight: progress-bar-tiny-text-line-height: progress-bar-small-height: progress-bar-small-text-font-size: progress-bar-small-text-font-weight: progress-bar-small-text-line-height: progress-bar-medium-height: progress-bar-medium-text-font-size: progress-bar-medium-text-font-weight: progress-bar-medium-text-line-height: progress-bar-large-height: progress-bar-large-text-font-size: progress-bar-large-text-font-weight: progress-bar-large-text-line-height: progress-bar-giant-height: progress-bar-giant-text-font-size: progress-bar-giant-text-font-weight: progress-bar-giant-text-line-height: progress-bar-basic-background-color: progress-bar-basic-filled-background-color: progress-bar-basic-text-color: progress-bar-primary-background-color: progress-bar-primary-filled-background-color: progress-bar-primary-text-color: progress-bar-success-background-color: progress-bar-success-filled-background-color: progress-bar-success-text-color: progress-bar-info-background-color: progress-bar-info-filled-background-color: progress-bar-info-text-color: progress-bar-warning-background-color: progress-bar-warning-filled-background-color: progress-bar-warning-text-color: progress-bar-danger-background-color: progress-bar-danger-filled-background-color: progress-bar-danger-text-color: progress-bar-control-background-color: progress-bar-control-filled-background-color: progress-bar-control-text-color:

constructor

constructor(statusService: NbStatusService);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property displayValue

displayValue: boolean;

Displays value inside progress bar

property giant

readonly giant: boolean;

property info

readonly info: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbProgressBarComponent,
    'nb-progress-bar',
    never,
    {
        value: { alias: 'value'; required: false };
        status: { alias: 'status'; required: false };
        size: { alias: 'size'; required: false };
        displayValue: { alias: 'displayValue'; required: false };
    },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbProgressBarComponent, never>;

property primary

readonly primary: boolean;

property size

size: NbComponentSize;

Progress bar size (tiny, small, medium (default), large, giant)

property small

readonly small: boolean;

property status

status: string;

Progress bar background (basic (default), primary, info, success, warning, danger, control)

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property tiny

readonly tiny: boolean;

property value

value: number;

Progress bar value in percent (0 - 100)

property warning

readonly warning: boolean;

class NbProgressBarModule

class NbProgressBarModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbProgressBarModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbProgressBarModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbProgressBarModule,
    [typeof i1.NbProgressBarComponent],
    [typeof i2.NbSharedModule],
    [typeof i1.NbProgressBarComponent]
>;

class NbRadioComponent

class NbRadioComponent {}

The NbRadioComponent provides the same functionality as native <input type="radio"> with Nebular styles and animations.
@stacked-example(Showcase, radio/radio-showcase.component)
### Installation
Import NbRadioModule to your feature module.
@NgModule({ imports: [ // ... NbRadioModule, ], }) export class PageModule { }
### Usage
Radio buttons should be wrapped in nb-radio-group to provide form bindings.
<nb-radio-group [(ngModel)]="selectedOption"> <nb-radio value="1">Option 1</nb-radio> <nb-radio value="2">Option 2</nb-radio> <nb-radio value="3">Option 3</nb-radio> </nb-radio-group>
You can disable some radios in the group using a disabled attribute.
@stacked-example(Disabled, radio/radio-disabled.component)
radio-width: radio-height: radio-border-style: radio-border-width: radio-text-font-family: radio-text-font-size: radio-text-font-weight: radio-text-line-height: radio-outline-color: radio-outline-width: radio-basic-text-color: radio-basic-border-color: radio-basic-background-color: radio-basic-checked-background-color: radio-basic-checked-border-color: radio-basic-inner-circle-color: radio-basic-focus-border-color: radio-basic-focus-inner-circle-color: radio-basic-hover-background-color: radio-basic-hover-border-color: radio-basic-hover-inner-circle-color: radio-basic-hover-checked-background-color: radio-basic-active-border-color: radio-basic-active-inner-circle-color: radio-basic-disabled-background-color: radio-basic-disabled-border-color: radio-basic-disabled-text-color: radio-basic-disabled-checked-background-color: radio-basic-disabled-checked-border-color: radio-basic-disabled-checked-inner-circle-color: radio-primary-text-color: radio-primary-border-color: radio-primary-background-color: radio-primary-checked-background-color: radio-primary-checked-border-color: radio-primary-inner-circle-color: radio-primary-focus-border-color: radio-primary-focus-inner-circle-color: radio-primary-hover-background-color: radio-primary-hover-border-color: radio-primary-hover-inner-circle-color: radio-primary-hover-checked-background-color: radio-primary-active-border-color: radio-primary-active-inner-circle-color: radio-primary-disabled-background-color: radio-primary-disabled-border-color: radio-primary-disabled-text-color: radio-primary-disabled-checked-background-color: radio-primary-disabled-checked-border-color: radio-primary-disabled-checked-inner-circle-color: radio-success-text-color: radio-success-border-color: radio-success-background-color: radio-success-checked-background-color: radio-success-checked-border-color: radio-success-inner-circle-color: radio-success-focus-border-color: radio-success-focus-inner-circle-color: radio-success-hover-background-color: radio-success-hover-border-color: radio-success-hover-inner-circle-color: radio-success-hover-checked-background-color: radio-success-active-border-color: radio-success-active-inner-circle-color: radio-success-disabled-background-color: radio-success-disabled-border-color: radio-success-disabled-text-color: radio-success-disabled-checked-background-color: radio-success-disabled-checked-border-color: radio-success-disabled-checked-inner-circle-color: radio-info-text-color: radio-info-border-color: radio-info-background-color: radio-info-checked-background-color: radio-info-checked-border-color: radio-info-inner-circle-color: radio-info-focus-border-color: radio-info-focus-inner-circle-color: radio-info-hover-background-color: radio-info-hover-border-color: radio-info-hover-inner-circle-color: radio-info-hover-checked-background-color: radio-info-active-border-color: radio-info-active-inner-circle-color: radio-info-disabled-background-color: radio-info-disabled-border-color: radio-info-disabled-text-color: radio-info-disabled-checked-background-color: radio-info-disabled-checked-border-color: radio-info-disabled-checked-inner-circle-color: radio-warning-text-color: radio-warning-border-color: radio-warning-background-color: radio-warning-checked-background-color: radio-warning-checked-border-color: radio-warning-inner-circle-color: radio-warning-focus-border-color: radio-warning-focus-inner-circle-color: radio-warning-hover-background-color: radio-warning-hover-border-color: radio-warning-hover-inner-circle-color: radio-warning-hover-checked-background-color: radio-warning-active-border-color: radio-warning-active-inner-circle-color: radio-warning-disabled-background-color: radio-warning-disabled-border-color: radio-warning-disabled-text-color: radio-warning-disabled-checked-background-color: radio-warning-disabled-checked-border-color: radio-warning-disabled-checked-inner-circle-color: radio-danger-text-color: radio-danger-border-color: radio-danger-background-color: radio-danger-checked-background-color: radio-danger-checked-border-color: radio-danger-inner-circle-color: radio-danger-focus-border-color: radio-danger-focus-inner-circle-color: radio-danger-hover-background-color: radio-danger-hover-border-color: radio-danger-hover-inner-circle-color: radio-danger-hover-checked-background-color: radio-danger-active-border-color: radio-danger-active-inner-circle-color: radio-danger-disabled-background-color: radio-danger-disabled-border-color: radio-danger-disabled-text-color: radio-danger-disabled-checked-background-color: radio-danger-disabled-checked-border-color: radio-danger-disabled-checked-inner-circle-color: radio-control-text-color: radio-control-background-color: radio-control-border-color: radio-control-checked-background-color: radio-control-checked-border-color: radio-control-inner-circle-color: radio-control-focus-border-color: radio-control-focus-inner-circle-color: radio-control-hover-background-color: radio-control-hover-border-color: radio-control-hover-inner-circle-color: radio-control-hover-checked-background-color: radio-control-active-border-color: radio-control-active-inner-circle-color: radio-control-disabled-background-color: radio-control-disabled-border-color: radio-control-disabled-text-color: radio-control-disabled-checked-background-color: radio-control-disabled-checked-border-color: radio-control-disabled-checked-inner-circle-color:

constructor

constructor(
    cd: ChangeDetectorRef,
    renderer: Renderer2,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property blur

blur: EventEmitter<void>;

property cd

protected cd: ChangeDetectorRef;

property checked

checked: boolean;

property disabled

disabled: boolean;

property input

input: ElementRef<HTMLInputElement>;

property isBasic

readonly isBasic: boolean;

property isControl

readonly isControl: boolean;

property isDanger

readonly isDanger: boolean;

property isInfo

readonly isInfo: boolean;

property isPrimary

readonly isPrimary: boolean;

property isSuccess

readonly isSuccess: boolean;

property isWarning

readonly isWarning: boolean;

property name

name: string;

property ngAcceptInputType_checked

static ngAcceptInputType_checked: NbBooleanInput;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbRadioComponent,
    'nb-radio',
    never,
    {
        name: { alias: 'name'; required: false };
        checked: { alias: 'checked'; required: false };
        value: { alias: 'value'; required: false };
        disabled: { alias: 'disabled'; required: false };
        status: { alias: 'status'; required: false };
    },
    { valueChange: 'valueChange'; blur: 'blur' },
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRadioComponent, never>;

property renderer

protected renderer: Renderer2;

property status

status: string;

property statusService

protected statusService: NbStatusService;

property value

value: any;

property valueChange

valueChange: EventEmitter<any>;

method onChange

onChange: (event: Event) => void;

method onClick

onClick: (event: Event) => void;

class NbRadioGroupComponent

class NbRadioGroupComponent
    implements AfterContentInit, OnDestroy, ControlValueAccessor {}

The NbRadioGroupComponent is the wrapper for nb-radio button. It provides form bindings:
<nb-radio-group [(ngModel)]="selectedOption"> <nb-radio value="1">Option 1</nb-radio> <nb-radio value="2">Option 2</nb-radio> <nb-radio value="3">Option 3</nb-radio> </nb-radio-group>
Also, you can use value and valueChange for binding without forms.
<nb-radio-group [(value)]="selectedOption"> <nb-radio value="1">Option 1</nb-radio> <nb-radio value="2">Option 2</nb-radio> <nb-radio value="3">Option 3</nb-radio> </nb-radio-group>
Radio items name has to be provided through name input property of the radio group.
<nb-radio-group name="my-radio-group"> ... </nb-radio-group>
You can change radio group status by setting status input. @stacked-example(Statuses, radio/radio-statuses.component)
Also, you can disable the whole group using disabled attribute. @stacked-example(Disabled group, radio/radio-disabled-group.component)
Radio group supports ngModel and reactive forms: @stacked-example(Radio Group with forms, radio/radio-form.component)

constructor

constructor(
    hostElement: ElementRef<HTMLElement>,
    platformId: any,
    document: any
);

property destroy$

protected destroy$: Subject<void>;

property disabled

disabled: boolean;

property document

protected document: any;

property hostElement

protected hostElement: ElementRef<HTMLElement>;

property name

name: string;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property onChange

protected onChange: (value: any) => void;

property onTouched

protected onTouched: () => void;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbRadioGroupComponent,
    'nb-radio-group',
    never,
    {
        value: { alias: 'value'; required: false };
        name: { alias: 'name'; required: false };
        disabled: { alias: 'disabled'; required: false };
        status: { alias: 'status'; required: false };
    },
    { valueChange: 'valueChange' },
    ['radios'],
    ['nb-radio'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRadioGroupComponent, never>;

property platformId

protected platformId: any;

property radios

radios: QueryList<NbRadioComponent>;

property status

status: string;

Radio buttons status. Possible values are primary (default), success, warning, danger, info.

property value

value: any;

property valueChange

valueChange: EventEmitter<any>;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method propagateValue

protected propagateValue: (value: any) => void;

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method subscribeOnRadiosBlur

protected subscribeOnRadiosBlur: () => void;

method subscribeOnRadiosValueChange

protected subscribeOnRadiosValueChange: () => void;

method updateAndMarkForCheckRadios

protected updateAndMarkForCheckRadios: (
    updateFn: (NbRadioComponent: any) => void
) => void;

method updateAndSubscribeToRadios

protected updateAndSubscribeToRadios: () => void;

method updateDisabled

protected updateDisabled: () => void;

method updateNames

protected updateNames: () => void;

method updateStatus

protected updateStatus: () => void;

method updateValueFromCheckedOption

protected updateValueFromCheckedOption: () => void;

method updateValues

protected updateValues: () => void;

method writeValue

writeValue: (value: any) => void;

class NbRadioModule

class NbRadioModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRadioModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbRadioModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbRadioModule,
    [typeof i1.NbRadioComponent, typeof i2.NbRadioGroupComponent],
    never,
    [typeof i1.NbRadioComponent, typeof i2.NbRadioGroupComponent]
>;

class NbRangeAdapterService

class NbRangeAdapterService<D> extends NbDatepickerAdapter<NbCalendarRange<D>> {}

constructor

constructor(dateService: NbDateService<D>);

property dateService

protected dateService: NbDateService<D>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRangeAdapterService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbRangeAdapterService<any>>;

property picker

picker: Type<NbRangepickerComponent<D>>;

method format

format: (range: NbCalendarRange<D>, format: string) => string;

method isValid

isValid: (range: string, format: string) => boolean;

method parse

parse: (range: string, format: any) => NbCalendarRange<D>;

class NbRangepickerComponent

class NbRangepickerComponent<D> extends NbBasePickerComponent<
    D,
    NbCalendarRange<D>,
    NbCalendarRangeComponent<D>
> {}

The RangeDatePicker components itself. Provides a proxy to NbCalendarRange options as well as custom picker options.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbRangepickerComponent<any>,
    'nb-rangepicker',
    never,
    { range: { alias: 'range'; required: false } },
    { rangeChange: 'rangeChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRangepickerComponent<any>, never>;

property pickerClass

protected pickerClass: Type<NbCalendarRangeComponent<D>>;

property pickerValueChange

readonly pickerValueChange: Observable<NbCalendarRange<D>>;

property rangeChange

readonly rangeChange: EventEmitter<NbCalendarRange<D>>;

Emits range when start selected and emits again when end selected.

property value

value: NbCalendarRange<D>;

method shouldHide

shouldHide: () => boolean;

method writeQueue

protected writeQueue: () => void;

class NbRestoreScrollTopHelper

class NbRestoreScrollTopHelper {}

This service determines whether we should scroll the layout back to top. This occurs when the page is changed, so when current url PATH is not equal to the previous one.
TODO: this is most likely a temporary solutions as recently Angular introduces ViewportScroll and scroll restoration process

constructor

constructor(router: Router);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRestoreScrollTopHelper, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbRestoreScrollTopHelper>;

method shouldRestore

shouldRestore: () => Observable<boolean>;

class NbRevealCardComponent

class NbRevealCardComponent {}

Reveal card example: @stacked-example(My example, reveal-card/reveal-card-showcase.component)
As a content Reveal card accepts two instances of nb-card - for front and back sides.
Basic reveal card configuration:
<nb-reveal-card> <nb-card-front> <nb-card> <nb-card-body> Front </nb-card-body> </nb-card> </nb-card-front> <nb-card-back> <nb-card> <nb-card-body> Back </nb-card-body> </nb-card> </nb-card-back> </nb-reveal-card>
### Installation
Import NbCardModule to your feature module.
@NgModule({ imports: [ // ... NbCardModule, ], }) export class PageModule { }
### Usage
Reveal Card with header and footer: @stacked-example(With Header & Footer, reveal-card/reveal-card-full.component)
Colored reveal-cards could be simply configured by providing a status property: @stacked-example(Colored Card, reveal-card/reveal-card-colors.component)
It is also possible to assign an accent property for a slight card highlight as well as combine it with status: @stacked-example(Accent Card, reveal-card/reveal-card-accents.component)
@additional-example(Multiple Sizes, reveal-card/reveal-card-sizes.component)

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbRevealCardComponent,
    'nb-reveal-card',
    never,
    {
        revealed: { alias: 'revealed'; required: false };
        showToggleButton: { alias: 'showToggleButton'; required: false };
    },
    {},
    never,
    ['nb-card-front', 'nb-card-back'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRevealCardComponent, never>;

property revealed

revealed: boolean;

Reveal state boolean

property showToggleButton

showToggleButton: boolean;

Show/hide toggle button to be able to control toggle from your code {boolean}

method toggle

toggle: () => void;

class NbRouteTabsetComponent

class NbRouteTabsetComponent {}

Route tabset components. Renders tabs inside of a router-outlet.
tabs = [ { title: 'Route tab #1', route: '/pages/description', icon: 'home', responsive: true, // hide title before `$tabset-tab-text-hide-breakpoint` value }, { title: 'Route tab #2', route: '/pages/images', } ]; <nb-route-tabset [tabs]="tabs"></nb-route-tabset>
### Installation
Import NbRouteTabsetModule to your feature module.
@NgModule({ imports: [ // ... NbRouteTabsetModule, ], }) export class PageModule { }
@stacked-example(Route Tabset, tabset/route-tabset-showcase.component)
route-tabset-background-color: route-tabset-border-radius: route-tabset-shadow: route-tabset-tab-background-color: route-tabset-tab-padding: route-tabset-tab-text-color: route-tabset-tab-text-font-family: route-tabset-tab-text-font-size: route-tabset-tab-text-font-weight: route-tabset-tab-text-line-height: route-tabset-tab-text-transform: route-tabset-tab-underline-width: route-tabset-tab-underline-color: route-tabset-tab-active-background-color: route-tabset-tab-active-text-color: route-tabset-tab-active-underline-color: route-tabset-tab-focus-background-color: route-tabset-tab-focus-text-color: route-tabset-tab-focus-underline-color: route-tabset-tab-hover-background-color: route-tabset-tab-hover-text-color: route-tabset-tab-hover-underline-color: route-tabset-tab-disabled-background-color: route-tabset-tab-disabled-text-color: route-tabset-tab-disabled-underline-color: route-tabset-divider-color: route-tabset-divider-style: route-tabset-divider-width: route-tabset-scrollbar-color: route-tabset-scrollbar-background-color: route-tabset-scrollbar-width:

property activeLinkOptions

activeLinkOptions: RouterLinkActive;

Options passed to routerLinkActiveOptions directive which set on tab links. { exact: true } by default.

property changeTab

changeTab: EventEmitter<NbRouteTab>;

Emits when tab is selected {EventEmitter}

property fullWidthValue

fullWidthValue: boolean;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbRouteTabsetComponent,
    'nb-route-tabset',
    never,
    {
        tabs: { alias: 'tabs'; required: false };
        activeLinkOptions: { alias: 'activeLinkOptions'; required: false };
        fullWidth: { alias: 'fullWidth'; required: false };
    },
    { changeTab: 'changeTab' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRouteTabsetComponent, never>;

property tabs

tabs: NbRouteTab[];

Tabs configuration

method selectTab

selectTab: (tab: NbRouteTab) => void;

class NbRouteTabsetModule

class NbRouteTabsetModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRouteTabsetModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbRouteTabsetModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbRouteTabsetModule,
    [typeof i1.NbRouteTabsetComponent, typeof i2.NbMergeConfigsPipe],
    [typeof i3.NbSharedModule, typeof i4.NbIconModule],
    [typeof i1.NbRouteTabsetComponent]
>;

class NbRowComponent

class NbRowComponent extends CdkRow {}

Data row template container that contains the cell outlet. Adds the right class and role.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbRowComponent,
    'nb-row, tr[nbRow]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRowComponent, never>;

class NbRowDefDirective

class NbRowDefDirective<T> extends CdkRowDef<T> {}

Data row definition for the nb-table. Captures the data row's template and other properties such as the columns to display and a when predicate that describes when this row should be used.

property columns

columns: Iterable<string>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbRowDefDirective<any>,
    '[nbRowDef]',
    never,
    {
        columns: { alias: 'nbRowDefColumns'; required: false };
        when: { alias: 'nbRowDefWhen'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRowDefDirective<any>, never>;

property when

when: (index: number, rowData: T) => boolean;

class NbRtlDirective

class NbRtlDirective extends NbBaseLayoutDirectionDirective {}

Apply nbRtl directive to the element you need to show only when layout direction is RTL.
<div *nbRtl>This text is visible only when layout direction is RTL</div>

constructor

constructor(
    templateRef: TemplateRef<any>,
    viewContainer: ViewContainerRef,
    cd: ChangeDetectorRef,
    directionService: NbLayoutDirectionService
);

property cd

protected cd: ChangeDetectorRef;

property directionService

protected directionService: NbLayoutDirectionService;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbRtlDirective,
    '[nbRtl]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbRtlDirective, never>;

property templateRef

protected templateRef: TemplateRef<any>;

property viewContainer

protected viewContainer: ViewContainerRef;

class NbScrollableContainerDimensions

class NbScrollableContainerDimensions {}

property clientHeight

clientHeight: number;

property scrollHeight

scrollHeight: number;

property scrollTop

scrollTop: number;

class NbScrollDispatcherAdapter

class NbScrollDispatcherAdapter extends ScrollDispatcher {}

constructor

constructor(
    ngZone: NgZone,
    platform: NbPlatform,
    scrollService: NbLayoutScrollService,
    document: any
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbScrollDispatcherAdapter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbScrollDispatcherAdapter>;

property scrollService

protected scrollService: NbLayoutScrollService;

method scrolled

scrolled: (auditTimeInMs?: number) => Observable<any>;

class NbScrollStrategyOptions

class NbScrollStrategyOptions extends ScrollStrategyOptions {}

constructor

constructor(
    scrollService: NbLayoutScrollService,
    scrollDispatcher: ScrollDispatcher,
    viewportRuler: NbViewportRulerAdapter,
    ngZone: NgZone,
    document: any
);

property block

block: () => NbBlockScrollStrategyAdapter;

property document

protected document: any;

property ngZone

protected ngZone: NgZone;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbScrollStrategyOptions, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbScrollStrategyOptions>;

property scrollDispatcher

protected scrollDispatcher: ScrollDispatcher;

property scrollService

protected scrollService: NbLayoutScrollService;

property viewportRuler

protected viewportRuler: NbViewportRulerAdapter;

class NbSearchComponent

class NbSearchComponent implements OnInit, OnDestroy {}

Beautiful full-page search control.
@stacked-example(Showcase, search/search-showcase.component)
Basic setup:
<nb-search type="rotate-layout"></nb-search>
### Installation
Import NbSearchModule to your feature module.
@NgModule({ imports: [ // ... NbSearchModule, ], }) export class PageModule { }
### Usage
Several animation types are available: modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
It is also possible to handle search event using NbSearchService:
@stacked-example(Search Event, search/search-event.component)
search-background-color: search-divider-color: search-divider-style: search-divider-width: search-extra-background-color: search-text-color: search-text-font-family: search-text-font-size: search-text-font-weight: search-text-line-height: search-placeholder-text-color: search-info-text-color: search-info-text-font-family: search-info-text-font-size: search-info-text-font-weight: search-info-text-line-height:

constructor

constructor(
    searchService: NbSearchService,
    themeService: NbThemeService,
    router: Router,
    overlayService: NbOverlayService,
    changeDetector: ChangeDetectorRef
);

property hint

hint: string;

Hint showing under the input field to improve user experience
{string}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSearchComponent,
    'nb-search',
    never,
    {
        tag: { alias: 'tag'; required: false };
        placeholder: { alias: 'placeholder'; required: false };
        hint: { alias: 'hint'; required: false };
        type: { alias: 'type'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSearchComponent, never>;

property placeholder

placeholder: string;

Search input placeholder {string}

property searchButton

searchButton: ElementRef<HTMLElement>;

property searchFieldPortal

searchFieldPortal: NbPortalDirective;

property showSearchField

showSearchField: boolean;

property tag

tag: string;

Tags a search with some ID, can be later used in the search service to determine which search component triggered the action, if multiple searches exist on the page.
{string}

property type

type: NbSearchType;

Search design type, available types are modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half {string}

method emitActivate

emitActivate: () => void;

method emitDeactivate

emitDeactivate: () => void;

method emitInput

emitInput: (term: string) => void;

method hideSearch

hideSearch: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method openSearch

openSearch: () => void;

method search

search: (term: any) => void;

class NbSearchFieldComponent

class NbSearchFieldComponent implements OnChanges, AfterViewInit {}

search-field-component is used under the hood by nb-search component can't be used itself

property close

close: EventEmitter<any>;

property columnCurtain

readonly columnCurtain: boolean;

property curtain

readonly curtain: boolean;

property hint

hint: string;

property inputElement

inputElement: ElementRef<HTMLInputElement>;

property modalDrop

readonly modalDrop: boolean;

property modalHalf

readonly modalHalf: boolean;

property modalMove

readonly modalMove: boolean;

property modalZoomin

readonly modalZoomin: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSearchFieldComponent,
    'nb-search-field',
    never,
    {
        type: { alias: 'type'; required: false };
        placeholder: { alias: 'placeholder'; required: false };
        hint: { alias: 'hint'; required: false };
        show: { alias: 'show'; required: false };
    },
    { close: 'close'; search: 'search'; searchInput: 'searchInput' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSearchFieldComponent, never>;

property placeholder

placeholder: string;

property rotateLayout

readonly rotateLayout: boolean;

property search

search: EventEmitter<any>;

property searchInput

searchInput: EventEmitter<any>;

property show

show: boolean;

property showClass

readonly showClass: boolean;

property type

type: string;

property TYPE_COLUMN_CURTAIN

static readonly TYPE_COLUMN_CURTAIN: string;

property TYPE_CURTAIN

static readonly TYPE_CURTAIN: string;

property TYPE_MODAL_DROP

static readonly TYPE_MODAL_DROP: string;

property TYPE_MODAL_HALF

static readonly TYPE_MODAL_HALF: string;

property TYPE_MODAL_MOVE

static readonly TYPE_MODAL_MOVE: string;

property TYPE_MODAL_ZOOMIN

static readonly TYPE_MODAL_ZOOMIN: string;

property TYPE_ROTATE_LAYOUT

static readonly TYPE_ROTATE_LAYOUT: string;

method emitClose

emitClose: () => void;

method emitSearchInput

emitSearchInput: (term: string) => void;

method focusInput

focusInput: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: ({ show }: SimpleChanges) => void;

method submitSearch

submitSearch: (term: any) => void;

class NbSearchModule

class NbSearchModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSearchModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbSearchModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbSearchModule,
    [typeof i1.NbSearchComponent, typeof i1.NbSearchFieldComponent],
    [
        typeof i2.NbSharedModule,
        typeof i3.NbOverlayModule,
        typeof i4.NbIconModule,
        typeof i5.NbButtonModule
    ],
    [typeof i1.NbSearchComponent, typeof i1.NbSearchFieldComponent]
>;

class NbSearchService

class NbSearchService {}

Search component service, connects your code to a page-level search component.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSearchService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbSearchService>;

method activateSearch

activateSearch: (searchType: string, tag?: string) => void;

* Activate (open) search component
Parameter searchType
Parameter tag

method deactivateSearch

deactivateSearch: (searchType: string, tag?: string) => void;

Deactibate (close) search component
Parameter searchType
Parameter tag

method onSearchActivate

onSearchActivate: () => Observable<{ searchType: string; tag?: string }>;

Subscribe to 'activate' event
Returns
Observable<{searchType: string; tag?: string}>

method onSearchDeactivate

onSearchDeactivate: () => Observable<{ searchType: string; tag?: string }>;

Subscribe to 'deactivate' event
Returns
Observable<{searchType: string; tag?: string}>

method onSearchInput

onSearchInput: () => Observable<{ term: string; tag?: string }>;

Subscribe to input event
Returns
Observable<{term: string; tag?: string}>

method onSearchSubmit

onSearchSubmit: () => Observable<{ term: string; tag?: string }>;

Subscribe to 'submit' event (when submit button clicked)
Returns
Observable<{term: string; tag?: string}>

method searchInput

searchInput: (term: string, tag?: string) => void;

Trigger search submit by input event
Parameter term
Parameter tag

method submitSearch

submitSearch: (term: string, tag?: string) => void;

Trigger search submit
Parameter term
Parameter tag

class NbSelectComponent

class NbSelectComponent
    implements
        OnChanges,
        AfterViewInit,
        AfterContentInit,
        OnDestroy,
        ControlValueAccessor,
        NbFormFieldControl {}

The NbSelectComponent provides a capability to select one of the passed items.
@stacked-example(Showcase, select/select-showcase.component)
### Installation
Import NbSelectModule to your feature module.
@NgModule({ imports: [ // ... NbSelectModule, ], }) export class PageModule { }
### Usage
If you want to use it as the multi-select control you have to mark it as multiple. In this case, nb-select will work only with arrays - accept arrays and propagate arrays.
@stacked-example(Multiple, select/select-multiple.component)
Items without values will clean the selection. Both null and undefined values will also clean the selection.
@stacked-example(Clean selection, select/select-clean.component)
Select may be bounded using selected input:
<nb-select [(selected)]="selected"></nb-selected>
Or you can bind control with form controls or ngModel:
@stacked-example(Select form binding, select/select-form.component)
Options in the select may be grouped using nb-option-group component.
@stacked-example(Grouping, select/select-groups.component)
Select may have a placeholder that will be shown when nothing selected:
@stacked-example(Placeholder, select/select-placeholder.component)
You can disable select, options and whole groups.
@stacked-example(Disabled select, select/select-disabled.component)
Also, the custom label may be provided in select. This custom label will be used for instead placeholder when something selected.
@stacked-example(Custom label, select/select-label.component)
Default nb-select size is medium and status is basic. Select is available in multiple colors using status property:
@stacked-example(Select statuses, select/select-status.component)
There are five select sizes:
@stacked-example(Select sizes, select/select-sizes.component)
And two additional style types - filled:
@stacked-example(Filled select, select/select-filled.component)
and hero:
@stacked-example(Select colors, select/select-hero.component)
Select is available in different shapes, that could be combined with the other properties:
@stacked-example(Select shapes, select/select-shapes.component)
By default, the component selects options whose values are strictly equal (===) with the select value. To change such behavior, pass a custom comparator function to the compareWith attribute.
@stacked-example(Select custom comparator, select/select-compare-with.component)
You can add an additional icon to the select via the nb-form-field component: @stacked-example(Select with icon, select/select-icon.component)
@additional-example(Interactive, select/select-interactive.component)
select-cursor: select-disabled-cursor: select-min-width: select-outline-width: select-outline-color: select-icon-offset: select-text-font-family: select-placeholder-text-font-family: select-tiny-text-font-size: select-tiny-text-font-weight: select-tiny-text-line-height: select-tiny-placeholder-text-font-size: select-tiny-placeholder-text-font-weight: select-tiny-max-width: select-small-text-font-size: select-small-text-font-weight: select-small-text-line-height: select-small-placeholder-text-font-size: select-small-placeholder-text-font-weight: select-small-max-width: select-medium-text-font-size: select-medium-text-font-weight: select-medium-text-line-height: select-medium-placeholder-text-font-size: select-medium-placeholder-text-font-weight: select-medium-max-width: select-large-text-font-size: select-large-text-font-weight: select-large-text-line-height: select-large-placeholder-text-font-size: select-large-placeholder-text-font-weight: select-large-max-width: select-giant-text-font-size: select-giant-text-font-weight: select-giant-text-line-height: select-giant-placeholder-text-font-size: select-giant-placeholder-text-font-weight: select-giant-max-width: select-rectangle-border-radius: select-semi-round-border-radius: select-round-border-radius: select-outline-border-style: select-outline-border-width: select-outline-tiny-padding: select-outline-small-padding: select-outline-medium-padding: select-outline-large-padding: select-outline-giant-padding: select-outline-basic-icon-color: select-outline-basic-text-color: select-outline-basic-placeholder-text-color: select-outline-basic-background-color: select-outline-basic-border-color: select-outline-basic-focus-background-color: select-outline-basic-focus-border-color: select-outline-basic-hover-background-color: select-outline-basic-hover-border-color: select-outline-basic-disabled-background-color: select-outline-basic-disabled-border-color: select-outline-basic-disabled-icon-color: select-outline-basic-disabled-text-color: select-outline-primary-icon-color: select-outline-primary-text-color: select-outline-primary-placeholder-text-color: select-outline-primary-background-color: select-outline-primary-border-color: select-outline-primary-focus-background-color: select-outline-primary-focus-border-color: select-outline-primary-hover-background-color: select-outline-primary-hover-border-color: select-outline-primary-disabled-background-color: select-outline-primary-disabled-border-color: select-outline-primary-disabled-icon-color: select-outline-primary-disabled-text-color: select-outline-success-icon-color: select-outline-success-text-color: select-outline-success-placeholder-text-color: select-outline-success-background-color: select-outline-success-border-color: select-outline-success-focus-background-color: select-outline-success-focus-border-color: select-outline-success-hover-background-color: select-outline-success-hover-border-color: select-outline-success-disabled-background-color: select-outline-success-disabled-border-color: select-outline-success-disabled-icon-color: select-outline-success-disabled-text-color: select-outline-info-icon-color: select-outline-info-text-color: select-outline-info-placeholder-text-color: select-outline-info-background-color: select-outline-info-border-color: select-outline-info-focus-background-color: select-outline-info-focus-border-color: select-outline-info-hover-background-color: select-outline-info-hover-border-color: select-outline-info-disabled-background-color: select-outline-info-disabled-border-color: select-outline-info-disabled-icon-color: select-outline-info-disabled-text-color: select-outline-warning-icon-color: select-outline-warning-text-color: select-outline-warning-placeholder-text-color: select-outline-warning-background-color: select-outline-warning-border-color: select-outline-warning-focus-background-color: select-outline-warning-focus-border-color: select-outline-warning-hover-background-color: select-outline-warning-hover-border-color: select-outline-warning-disabled-background-color: select-outline-warning-disabled-border-color: select-outline-warning-disabled-icon-color: select-outline-warning-disabled-text-color: select-outline-danger-icon-color: select-outline-danger-text-color: select-outline-danger-placeholder-text-color: select-outline-danger-background-color: select-outline-danger-border-color: select-outline-danger-focus-background-color: select-outline-danger-focus-border-color: select-outline-danger-hover-background-color: select-outline-danger-hover-border-color: select-outline-danger-disabled-background-color: select-outline-danger-disabled-border-color: select-outline-danger-disabled-icon-color: select-outline-danger-disabled-text-color: select-outline-control-icon-color: select-outline-control-text-color: select-outline-control-placeholder-text-color: select-outline-control-background-color: select-outline-control-border-color: select-outline-control-focus-background-color: select-outline-control-focus-border-color: select-outline-control-hover-background-color: select-outline-control-hover-border-color: select-outline-control-disabled-background-color: select-outline-control-disabled-border-color: select-outline-control-disabled-icon-color: select-outline-control-disabled-text-color: select-outline-adjacent-border-style: select-outline-adjacent-border-width: select-outline-basic-open-border-color: select-outline-basic-adjacent-border-color: select-outline-primary-open-border-color: select-outline-primary-adjacent-border-color: select-outline-success-open-border-color: select-outline-success-adjacent-border-color: select-outline-info-open-border-color: select-outline-info-adjacent-border-color: select-outline-warning-open-border-color: select-outline-warning-adjacent-border-color: select-outline-danger-open-border-color: select-outline-danger-adjacent-border-color: select-outline-control-open-border-color: select-outline-control-adjacent-border-color: select-filled-border-style: select-filled-border-width: select-filled-tiny-padding: select-filled-small-padding: select-filled-medium-padding: select-filled-large-padding: select-filled-giant-padding: select-filled-basic-background-color: select-filled-basic-border-color: select-filled-basic-icon-color: select-filled-basic-text-color: select-filled-basic-placeholder-text-color: select-filled-basic-focus-background-color: select-filled-basic-focus-border-color: select-filled-basic-hover-background-color: select-filled-basic-hover-border-color: select-filled-basic-disabled-background-color: select-filled-basic-disabled-border-color: select-filled-basic-disabled-icon-color: select-filled-basic-disabled-text-color: select-filled-primary-background-color: select-filled-primary-border-color: select-filled-primary-icon-color: select-filled-primary-text-color: select-filled-primary-placeholder-text-color: select-filled-primary-focus-background-color: select-filled-primary-focus-border-color: select-filled-primary-hover-background-color: select-filled-primary-hover-border-color: select-filled-primary-disabled-background-color: select-filled-primary-disabled-border-color: select-filled-primary-disabled-icon-color: select-filled-primary-disabled-text-color: select-filled-success-background-color: select-filled-success-border-color: select-filled-success-icon-color: select-filled-success-text-color: select-filled-success-placeholder-text-color: select-filled-success-focus-background-color: select-filled-success-focus-border-color: select-filled-success-hover-background-color: select-filled-success-hover-border-color: select-filled-success-disabled-background-color: select-filled-success-disabled-border-color: select-filled-success-disabled-icon-color: select-filled-success-disabled-text-color: select-filled-info-background-color: select-filled-info-border-color: select-filled-info-icon-color: select-filled-info-text-color: select-filled-info-placeholder-text-color: select-filled-info-focus-background-color: select-filled-info-focus-border-color: select-filled-info-hover-background-color: select-filled-info-hover-border-color: select-filled-info-disabled-background-color: select-filled-info-disabled-border-color: select-filled-info-disabled-icon-color: select-filled-info-disabled-text-color: select-filled-warning-background-color: select-filled-warning-border-color: select-filled-warning-icon-color: select-filled-warning-text-color: select-filled-warning-placeholder-text-color: select-filled-warning-focus-background-color: select-filled-warning-focus-border-color: select-filled-warning-hover-background-color: select-filled-warning-hover-border-color: select-filled-warning-disabled-background-color: select-filled-warning-disabled-border-color: select-filled-warning-disabled-icon-color: select-filled-warning-disabled-text-color: select-filled-danger-background-color: select-filled-danger-border-color: select-filled-danger-icon-color: select-filled-danger-text-color: select-filled-danger-placeholder-text-color: select-filled-danger-focus-background-color: select-filled-danger-focus-border-color: select-filled-danger-hover-background-color: select-filled-danger-hover-border-color: select-filled-danger-disabled-background-color: select-filled-danger-disabled-border-color: select-filled-danger-disabled-icon-color: select-filled-danger-disabled-text-color: select-filled-control-background-color: select-filled-control-border-color: select-filled-control-icon-color: select-filled-control-text-color: select-filled-control-placeholder-text-color: select-filled-control-focus-background-color: select-filled-control-focus-border-color: select-filled-control-hover-background-color: select-filled-control-hover-border-color: select-filled-control-disabled-background-color: select-filled-control-disabled-border-color: select-filled-control-disabled-icon-color: select-filled-control-disabled-text-color: select-hero-tiny-padding: select-hero-small-padding: select-hero-medium-padding: select-hero-large-padding: select-hero-giant-padding: select-hero-basic-left-background-color: select-hero-basic-right-background-color: select-hero-basic-icon-color: select-hero-basic-text-color: select-hero-basic-placeholder-text-color: select-hero-basic-focus-left-background-color: select-hero-basic-focus-right-background-color: select-hero-basic-hover-left-background-color: select-hero-basic-hover-right-background-color: select-hero-basic-disabled-background-color: select-hero-basic-disabled-icon-color: select-hero-basic-disabled-text-color: select-hero-primary-left-background-color: select-hero-primary-right-background-color: select-hero-primary-icon-color: select-hero-primary-text-color: select-hero-primary-placeholder-text-color: select-hero-primary-focus-left-background-color: select-hero-primary-focus-right-background-color: select-hero-primary-hover-left-background-color: select-hero-primary-hover-right-background-color: select-hero-primary-disabled-background-color: select-hero-primary-disabled-icon-color: select-hero-primary-disabled-text-color: select-hero-success-left-background-color: select-hero-success-right-background-color: select-hero-success-icon-color: select-hero-success-text-color: select-hero-success-placeholder-text-color: select-hero-success-focus-left-background-color: select-hero-success-focus-right-background-color: select-hero-success-hover-left-background-color: select-hero-success-hover-right-background-color: select-hero-success-disabled-background-color: select-hero-success-disabled-icon-color: select-hero-success-disabled-text-color: select-hero-info-left-background-color: select-hero-info-right-background-color: select-hero-info-icon-color: select-hero-info-text-color: select-hero-info-placeholder-text-color: select-hero-info-focus-left-background-color: select-hero-info-focus-right-background-color: select-hero-info-hover-left-background-color: select-hero-info-hover-right-background-color: select-hero-info-disabled-background-color: select-hero-info-disabled-icon-color: select-hero-info-disabled-text-color: select-hero-warning-left-background-color: select-hero-warning-right-background-color: select-hero-warning-icon-color: select-hero-warning-text-color: select-hero-warning-placeholder-text-color: select-hero-warning-focus-left-background-color: select-hero-warning-focus-right-background-color: select-hero-warning-hover-left-background-color: select-hero-warning-hover-right-background-color: select-hero-warning-disabled-background-color: select-hero-warning-disabled-icon-color: select-hero-warning-disabled-text-color: select-hero-danger-left-background-color: select-hero-danger-right-background-color: select-hero-danger-icon-color: select-hero-danger-text-color: select-hero-danger-placeholder-text-color: select-hero-danger-focus-left-background-color: select-hero-danger-focus-right-background-color: select-hero-danger-hover-left-background-color: select-hero-danger-hover-right-background-color: select-hero-danger-disabled-background-color: select-hero-danger-disabled-icon-color: select-hero-danger-disabled-text-color: select-hero-control-left-background-color: select-hero-control-right-background-color: select-hero-control-icon-color: select-hero-control-text-color: select-hero-control-placeholder-text-color: select-hero-control-focus-left-background-color: select-hero-control-focus-right-background-color: select-hero-control-hover-left-background-color: select-hero-control-hover-right-background-color: select-hero-control-disabled-background-color: select-hero-control-disabled-icon-color: select-hero-control-disabled-text-color:

constructor

constructor(
    document: any,
    overlay: NbOverlayService,
    hostRef: ElementRef<HTMLElement>,
    positionBuilder: NbPositionBuilderService,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    cd: ChangeDetectorRef,
    focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<
        NbOptionComponent<any>
    >,
    focusMonitor: NbFocusMonitor,
    renderer: Renderer2,
    zone: NgZone,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property alive

protected alive: boolean;

property appearance

appearance: NbSelectAppearance;

Select appearances: outline (default), filled, hero

property basic

readonly basic: boolean;

property button

button: ElementRef<HTMLButtonElement>;

property cd

protected cd: ChangeDetectorRef;

property compareWith

compareWith: NbSelectCompareFunction<any>;

A function to compare option value with selected value. By default, values are compared with strict equality (===).

property control

readonly control: boolean;

property customLabel

customLabel: any;

Custom select label, will be rendered instead of default enumeration with coma.

property danger

readonly danger: boolean;

property destroy$

protected destroy$: Subject<void>;

property disabled

disabled: boolean;

Disables the select

property disabled$

disabled$: BehaviorSubject<boolean>;

property document

protected document: any;

property filled

filled: boolean;

Adds filled styles

property focused$

focused$: BehaviorSubject<boolean>;

property focusKeyManagerFactoryService

protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<
    NbOptionComponent<any>
>;

property focusMonitor

protected focusMonitor: NbFocusMonitor;

property fullWidth

fullWidth: boolean;

If set element will fill its container

property fullWidth$

fullWidth$: BehaviorSubject<boolean>;

property giant

readonly giant: boolean;

property hero

hero: boolean;

Adds hero styles

property hostRef

protected hostRef: ElementRef<HTMLElement>;

property hostWidth

readonly hostWidth: number;

Returns width of the select button.

property info

readonly info: boolean;

property isHidden

readonly isHidden: boolean;

Determines is select hidden.

property isOpen

readonly isOpen: boolean;

Determines is select opened.

property keyManager

protected keyManager: NbFocusKeyManager<NbOptionComponent<any>>;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property multiple

multiple: boolean;

Gives capability just write multiple over the element.

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_filled

static ngAcceptInputType_filled: NbBooleanInput;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ngAcceptInputType_hero

static ngAcceptInputType_hero: NbBooleanInput;

property ngAcceptInputType_multiple

static ngAcceptInputType_multiple: NbBooleanInput;

property ngAcceptInputType_outline

static ngAcceptInputType_outline: NbBooleanInput;

property onChange

protected onChange: Function;

Function passed through control value accessor to propagate changes.

property onTouched

protected onTouched: Function;

property options

options: QueryList<NbOptionComponent<any>>;

List of NbOptionComponent's components passed as content. TODO maybe it would be better provide wrapper

property optionsListClass

optionsListClass: NgClass;

Specifies class to be set on nb-options container (nb-option-list)

property optionsOverlayOffset

optionsOverlayOffset: number;

Determines options overlay offset (in pixels).

property optionsPanelClass

optionsPanelClass: string | string[];

Specifies class for the overlay panel with options

property optionsWidth

optionsWidth: number;

Specifies width (in pixels) to be set on nb-options container (nb-option-list)

property outline

outline: boolean;

Adds outline styles

property overlay

protected overlay: NbOverlayService;

property overlayPosition

overlayPosition: NbPosition;

Current overlay position because of we have to toggle overlayPosition in [ngClass] direction and this directive can use only string.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSelectComponent,
    'nb-select',
    never,
    {
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        shape: { alias: 'shape'; required: false };
        appearance: { alias: 'appearance'; required: false };
        optionsListClass: { alias: 'optionsListClass'; required: false };
        optionsPanelClass: { alias: 'optionsPanelClass'; required: false };
        optionsWidth: { alias: 'optionsWidth'; required: false };
        outline: { alias: 'outline'; required: false };
        filled: { alias: 'filled'; required: false };
        hero: { alias: 'hero'; required: false };
        disabled: { alias: 'disabled'; required: false };
        fullWidth: { alias: 'fullWidth'; required: false };
        placeholder: { alias: 'placeholder'; required: false };
        compareWith: { alias: 'compareWith'; required: false };
        selected: { alias: 'selected'; required: false };
        multiple: { alias: 'multiple'; required: false };
        optionsOverlayOffset: { alias: 'optionsOverlayOffset'; required: false };
        scrollStrategy: { alias: 'scrollStrategy'; required: false };
    },
    { selectedChange: 'selectedChange' },
    ['customLabel', 'options'],
    ['nb-select-label', 'nb-option, nb-option-group'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSelectComponent, never>;

property placeholder

placeholder: string;

Renders select placeholder if nothing selected.

property portal

portal: NbPortalDirective;

NbCard with options content.

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

property positionStrategy

positionStrategy: NbAdjustableConnectedPositionStrategy;

property primary

readonly primary: boolean;

property queue

protected queue: any;

If a user assigns value before content nb-options's rendered the value will be putted in this variable. And then applied after content rendered. Only the last value will be applied.

property rectangle

readonly rectangle: boolean;

property ref

protected ref: OverlayRef;

property renderer

protected renderer: Renderer2;

property round

readonly round: boolean;

property scrollStrategy

scrollStrategy: 'close' | 'noop' | 'block' | 'reposition';

Determines options overlay scroll strategy.

property selectButtonClasses

readonly selectButtonClasses: string[];

property selected

selected: any;

property selectedChange

selectedChange: EventEmitter<any>;

Will be emitted when selected value changes.

property selectionModel

selectionModel: NbOptionComponent<any>[];

List of selected options.

property selectionView

readonly selectionView: any;

Content rendered in the label.

property semiRound

readonly semiRound: boolean;

property shape

shape: NbComponentShape;

Select shapes: rectangle (default), round, semi-round

property size

size: NbComponentSize;

Select size, available sizes: tiny, small, medium (default), large, giant

property size$

size$: BehaviorSubject<NbComponentSize>;

property small

readonly small: boolean;

property status

status: string;

Select status (adds specific styles): basic, primary, info, success, warning, danger, control

property status$

status$: BehaviorSubject<string>;

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property tiny

readonly tiny: boolean;

property triggerStrategy

protected triggerStrategy: NbTriggerStrategy;

property triggerStrategyBuilder

protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;

property warning

readonly warning: boolean;

property zone

protected zone: NgZone;

method attachToOverlay

protected attachToOverlay: () => void;

method canSelectValue

protected canSelectValue: () => boolean;

method createKeyManager

protected createKeyManager: () => void;

method createOverlay

protected createOverlay: () => void;

method createPositionStrategy

protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;

method createScrollStrategy

protected createScrollStrategy: () => ScrollStrategy;

method createTriggerStrategy

protected createTriggerStrategy: () => NbTriggerStrategy;

method emitSelected

protected emitSelected: (selected: any) => void;

Propagate selected value.

method getContainer

protected getContainer: () => ComponentRef<any>;

method handleMultipleSelect

protected handleMultipleSelect: (option: NbOptionComponent) => void;

Select for multiple options.

method handleOptionClick

protected handleOptionClick: (option: NbOptionComponent) => void;

Selects option or clear all selected options if value is null.

method handleSingleSelect

protected handleSingleSelect: (option: NbOptionComponent) => void;

Select single option.

method hide

hide: () => void;

method isClickedWithinComponent

protected isClickedWithinComponent: ($event: Event) => boolean;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: ({ disabled, status, size, fullWidth }: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method reset

protected reset: () => void;

Deselect all selected options.

method selectOption

protected selectOption: (option: NbOptionComponent) => void;

Determines how to select option as multiple or single.

method selectValue

protected selectValue: (value: any) => void;

Selects value.

method setActiveOption

protected setActiveOption: () => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method setSelection

protected setSelection: (value: any) => void;

Set selected value in model.

method shouldShow

protected shouldShow: () => boolean;

method show

show: () => void;

method subscribeOnButtonFocus

protected subscribeOnButtonFocus: () => void;

method subscribeOnOptionClick

protected subscribeOnOptionClick: () => void;

method subscribeOnOverlayKeys

protected subscribeOnOverlayKeys: () => void;

method subscribeOnPositionChange

protected subscribeOnPositionChange: () => void;

method subscribeOnTriggers

protected subscribeOnTriggers: () => void;

method trySetTouched

trySetTouched: () => void;

Sets touched if focus moved outside of button and overlay, ignoring the case when focus moved to options overlay.

method writeValue

writeValue: (value: any) => void;

class NbSelectLabelComponent

class NbSelectLabelComponent {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSelectLabelComponent,
    'nb-select-label',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSelectLabelComponent, never>;

class NbSelectModule

class NbSelectModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSelectModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbSelectModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbSelectModule,
    [typeof i1.NbSelectComponent, typeof i1.NbSelectLabelComponent],
    [
        typeof i2.NbSharedModule,
        typeof i3.NbOverlayModule,
        typeof i4.NbButtonModule,
        typeof i5.NbInputModule,
        typeof i6.NbCardModule,
        typeof i7.NbIconModule,
        typeof i8.NbOptionModule
    ],
    [
        typeof i1.NbSelectComponent,
        typeof i1.NbSelectLabelComponent,
        typeof i8.NbOptionModule
    ]
>;

class NbSelectWithAutocompleteComponent

class NbSelectWithAutocompleteComponent
    implements
        OnChanges,
        AfterViewInit,
        AfterContentInit,
        OnDestroy,
        ControlValueAccessor,
        NbFormFieldControl {}

Experimental component with autocomplete possibility. Could be changed without any prior notice. Use at your own risk.
Style variables is fully inherited. Component's public API (@Input() and @Output()) works in a same way as NbSelectComponent.

constructor

constructor(
    document: any,
    overlay: NbOverlayService,
    hostRef: ElementRef<HTMLElement>,
    positionBuilder: NbPositionBuilderService,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    cd: ChangeDetectorRef,
    focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<
        NbOptionComponent<any>
    >,
    focusMonitor: NbFocusMonitor,
    renderer: Renderer2,
    zone: NgZone,
    statusService: NbStatusService,
    activeDescendantKeyManagerFactoryService: NbActiveDescendantKeyManagerFactoryService<
        NbOptionComponent<any>
    >
);

property activeDescendantKeyManager

protected activeDescendantKeyManager: NbActiveDescendantKeyManager<
    NbOptionComponent<any>
>;

property activeDescendantKeyManagerFactoryService

protected activeDescendantKeyManagerFactoryService: NbActiveDescendantKeyManagerFactoryService<
    NbOptionComponent<any>
>;

property additionalClasses

readonly additionalClasses: string[];

property alive

protected alive: boolean;

property appearance

appearance: NbSelectAppearance;

Select appearances: outline (default), filled, hero

property basic

readonly basic: boolean;

property button

button: any;

property cd

protected cd: ChangeDetectorRef;

property compareWith

compareWith: NbSelectCompareFunction<any>;

A function to compare option value with selected value. By default, values are compared with strict equality (===).

property control

readonly control: boolean;

property currentKeyManager

protected currentKeyManager: ListKeyManager<NbOptionComponent<any>>;

property customLabel

customLabel: any;

Custom select label, will be rendered instead of default enumeration with coma.

property danger

readonly danger: boolean;

property destroy$

protected destroy$: Subject<void>;

property disabled

disabled: boolean;

Disables the select

property disabled$

disabled$: BehaviorSubject<boolean>;

property document

protected document: any;

property filled

filled: boolean;

Adds filled styles

property focused$

focused$: BehaviorSubject<boolean>;

property focusKeyManager

protected focusKeyManager: NbFocusKeyManager<NbOptionComponent<any>>;

property focusKeyManagerFactoryService

protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<
    NbOptionComponent<any>
>;

property focusMonitor

protected focusMonitor: NbFocusMonitor;

property fullWidth

fullWidth: boolean;

If set element will fill its container

property fullWidth$

fullWidth$: BehaviorSubject<boolean>;

property giant

readonly giant: boolean;

property hero

hero: boolean;

Adds hero styles

property hostRef

protected hostRef: ElementRef<HTMLElement>;

property hostWidth

readonly hostWidth: number;

Returns width of the select button.

property info

readonly info: boolean;

property isHidden

readonly isHidden: boolean;

Determines is select hidden.

property isOpen

readonly isOpen: boolean;

Determines is select opened.

property isOptionsAutocompleteAllowed

readonly isOptionsAutocompleteAllowed: boolean;

property isOptionsAutocompleteInputShown

readonly isOptionsAutocompleteInputShown: boolean;

property large

readonly large: boolean;

property lastShownButtonWidth

lastShownButtonWidth: number;

property medium

readonly medium: boolean;

property multiple

multiple: boolean;

Gives capability just write multiple over the element.

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_filled

static ngAcceptInputType_filled: NbBooleanInput;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ngAcceptInputType_hero

static ngAcceptInputType_hero: NbBooleanInput;

property ngAcceptInputType_multiple

static ngAcceptInputType_multiple: NbBooleanInput;

property ngAcceptInputType_outline

static ngAcceptInputType_outline: NbBooleanInput;

property onChange

protected onChange: Function;

Function passed through control value accessor to propagate changes.

property onTouched

protected onTouched: Function;

property options

options: QueryList<NbOptionComponent<any>>;

List of NbOptionComponent's components passed as content. TODO maybe it would be better provide wrapper

property optionsAutocompleteInput

optionsAutocompleteInput: any;

property optionsAutocompleteInputChange

optionsAutocompleteInputChange: EventEmitter<string>;

property optionsListClass

optionsListClass: NgClass;

Specifies class to be set on nb-options container (nb-option-list)

property optionsOverlayOffset

optionsOverlayOffset: number;

Determines options overlay offset (in pixels).

property optionsPanelClass

optionsPanelClass: string | string[];

Specifies class for the overlay panel with options

property optionsWidth

optionsWidth: number;

Specifies width (in pixels) to be set on nb-options container (nb-option-list)

property outline

outline: boolean;

Adds outline styles

property overlay

protected overlay: NbOverlayService;

property overlayPosition

overlayPosition: NbPosition;

Current overlay position because of we have to toggle overlayPosition in [ngClass] direction and this directive can use only string.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSelectWithAutocompleteComponent,
    'nb-select-with-autocomplete',
    never,
    {
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
        shape: { alias: 'shape'; required: false };
        appearance: { alias: 'appearance'; required: false };
        optionsListClass: { alias: 'optionsListClass'; required: false };
        optionsPanelClass: { alias: 'optionsPanelClass'; required: false };
        optionsWidth: { alias: 'optionsWidth'; required: false };
        outline: { alias: 'outline'; required: false };
        filled: { alias: 'filled'; required: false };
        hero: { alias: 'hero'; required: false };
        disabled: { alias: 'disabled'; required: false };
        fullWidth: { alias: 'fullWidth'; required: false };
        placeholder: { alias: 'placeholder'; required: false };
        compareWith: { alias: 'compareWith'; required: false };
        selected: { alias: 'selected'; required: false };
        multiple: { alias: 'multiple'; required: false };
        optionsOverlayOffset: { alias: 'optionsOverlayOffset'; required: false };
        scrollStrategy: { alias: 'scrollStrategy'; required: false };
        withOptionsAutocomplete: {
            alias: 'withOptionsAutocomplete';
            required: false;
        };
    },
    {
        selectedChange: 'selectedChange';
        selectOpen: 'selectOpen';
        selectClose: 'selectClose';
        optionsAutocompleteInputChange: 'optionsAutocompleteInputChange';
    },
    ['customLabel', 'options'],
    ['nb-select-label', 'nb-option, nb-option-group'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSelectWithAutocompleteComponent, never>;

property placeholder

placeholder: string;

Renders select placeholder if nothing selected.

property portal

portal: NbPortalDirective;

NbCard with options content.

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

property positionStrategy$

positionStrategy$: BehaviorSubject<NbAdjustableConnectedPositionStrategy>;

property primary

readonly primary: boolean;

property queue

protected queue: any;

If a user assigns value before content nb-options's rendered the value will be putted in this variable. And then applied after content rendered. Only the last value will be applied.

property rectangle

readonly rectangle: boolean;

property ref

protected ref: OverlayRef;

property renderer

protected renderer: Renderer2;

property round

readonly round: boolean;

property scrollStrategy

scrollStrategy: 'close' | 'noop' | 'block' | 'reposition';

Determines options overlay scroll strategy.

property selectButtonClasses

readonly selectButtonClasses: string[];

property selectClose

selectClose: EventEmitter<void>;

property selected

selected: any;

property selectedChange

selectedChange: EventEmitter<any>;

Will be emitted when selected value changes.

property selectionModel

selectionModel: NbOptionComponent<any>[];

List of selected options.

property selectionView

readonly selectionView: any;

Content rendered in the label.

property selectOpen

selectOpen: EventEmitter<void>;

property semiRound

readonly semiRound: boolean;

property shape

shape: NbComponentShape;

Select shapes: rectangle (default), round, semi-round

property size

size: NbComponentSize;

Select size, available sizes: tiny, small, medium (default), large, giant

property size$

size$: BehaviorSubject<NbComponentSize>;

property small

readonly small: boolean;

property status

status: string;

Select status (adds specific styles): basic, primary, info, success, warning, danger, control

property status$

status$: BehaviorSubject<string>;

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property tiny

readonly tiny: boolean;

property triggerStrategy

protected triggerStrategy: NbTriggerStrategy;

property triggerStrategyBuilder

protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;

property warning

readonly warning: boolean;

property withOptionsAutocomplete

withOptionsAutocomplete: boolean;

property zone

protected zone: NgZone;

method attachToOverlay

protected attachToOverlay: () => void;

method canSelectValue

protected canSelectValue: () => boolean;

method createKeyManager

protected createKeyManager: () => void;

method createOverlay

protected createOverlay: () => void;

method createPositionStrategy

protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;

method createScrollStrategy

protected createScrollStrategy: () => ScrollStrategy;

method createTriggerStrategy

protected createTriggerStrategy: () => NbTriggerStrategy;

method emitSelected

protected emitSelected: (selected: any) => void;

Propagate selected value.

method focusButton

protected focusButton: () => void;

method getContainer

protected getContainer: () => ComponentRef<any>;

method handleMultipleSelect

protected handleMultipleSelect: (option: NbOptionComponent) => void;

Select for multiple options.

method handleOptionClick

protected handleOptionClick: (option: NbOptionComponent) => void;

Selects option or clear all selected options if value is null.

method handleSingleSelect

protected handleSingleSelect: (option: NbOptionComponent) => void;

Select single option.

method hide

hide: () => void;

method isClickedWithinComponent

protected isClickedWithinComponent: ($event: Event) => boolean;

method isOptionHidden

protected isOptionHidden: (option: NbOptionComponent) => boolean;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: ({ disabled, status, size, fullWidth }: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onAutocompleteInputChange

onAutocompleteInputChange: (event: Event) => void;

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method reset

protected reset: () => void;

Deselect all selected options.

method resetAutocompleteInput

protected resetAutocompleteInput: () => void;

method selectOption

protected selectOption: (option: NbOptionComponent) => void;

Determines how to select option as multiple or single.

method selectValue

protected selectValue: (value: any) => void;

Selects value.

method setActiveOption

protected setActiveOption: () => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method setSelection

protected setSelection: (value: any) => void;

Set selected value in model.

method shouldShow

protected shouldShow: () => boolean;

method show

show: () => void;

method subscribeOnButtonFocus

protected subscribeOnButtonFocus: () => void;

method subscribeOnOptionClick

protected subscribeOnOptionClick: () => void;

method subscribeOnOptionsAutocompleteChange

protected subscribeOnOptionsAutocompleteChange: () => void;

method subscribeOnOverlayKeys

protected subscribeOnOverlayKeys: () => void;

method subscribeOnPositionChange

protected subscribeOnPositionChange: () => void;

method subscribeOnTriggers

protected subscribeOnTriggers: () => void;

method trySetTouched

trySetTouched: () => void;

Sets touched if focus moved outside of button and overlay, ignoring the case when focus moved to options overlay.

method updateCurrentKeyManager

protected updateCurrentKeyManager: () => void;

method updatePositionStrategy

protected updatePositionStrategy: () => void;

method writeValue

writeValue: (value: any) => void;

class NbSelectWithAutocompleteModule

class NbSelectWithAutocompleteModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSelectWithAutocompleteModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbSelectWithAutocompleteModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbSelectWithAutocompleteModule,
    [typeof i1.NbSelectWithAutocompleteComponent],
    [
        typeof i2.NbSharedModule,
        typeof i3.NbOverlayModule,
        typeof i4.NbButtonModule,
        typeof i5.NbInputModule,
        typeof i6.NbCardModule,
        typeof i7.NbIconModule,
        typeof i8.NbOptionModule,
        typeof i9.NbFormFieldModule,
        typeof i10.NbSelectModule
    ],
    [
        typeof i1.NbSelectWithAutocompleteComponent,
        typeof i8.NbOptionModule,
        typeof i10.NbSelectModule
    ]
>;

class NbSidebarComponent

class NbSidebarComponent implements OnInit, OnDestroy {}

Layout sidebar component.
@stacked-example(Showcase, sidebar/sidebar-showcase.component)
### Installation
Import NbSidebarModule.forRoot() to your app module.
@NgModule({ imports: [ // ... NbSidebarModule.forRoot(), ], }) export class AppModule { }
and NbSidebarModule to your feature module where the component should be shown:
@NgModule({ imports: [ // ... NbSidebarModule, ], }) export class PageModule { }
### Usage
Sidebar can be placed on the left or the right side of the layout, or on start/end position of layout (depends on document direction, left to right or right to left) It can be fixed (shown above the content) or can push the layout when opened.
There are three states - expanded, collapsed, compacted. By default sidebar content is fixed and saves its position while the page is being scrolled.
Compacted sidebar example: @stacked-example(Compacted Sidebar, sidebar/sidebar-compacted.component)
Sidebar also supports a responsive behavior, listening to window size change and changing its size respectably.
In a pair with header it is possible to setup a configuration when header is placed on a side of the sidebar and not on top of it. To achieve this simply put a subheader property to the header like this:
<nb-layout-header subheader></nb-layout-header>
@stacked-example(Subheader, layout/layout-sidebar-subheader.component) Note that in such configuration sidebar shadow is removed and header cannot be make fixed.
@additional-example(Right Sidebar, sidebar/sidebar-right.component) @additional-example(Fixed Sidebar, sidebar/sidebar-fixed.component)
sidebar-background-color: sidebar-text-color: sidebar-text-font-family: sidebar-text-font-size: sidebar-text-font-weight: sidebar-text-line-height: sidebar-height: sidebar-width: sidebar-width-compact: sidebar-padding: sidebar-header-height: sidebar-footer-height: sidebar-shadow: sidebar-menu-item-highlight-color: sidebar-scrollbar-background-color: sidebar-scrollbar-color: sidebar-scrollbar-width:

constructor

constructor(
    sidebarService: NbSidebarService,
    themeService: NbThemeService,
    element: ElementRef,
    cd: ChangeDetectorRef
);

property collapsed

readonly collapsed: boolean;

property collapsedBreakpoints

collapsedBreakpoints: string[];

Controls on which screen sizes sidebar should be switched to collapsed state. Works only when responsive mode is on. Default values are ['xs', 'is'].
string[]

property compacted

readonly compacted: boolean;

property compactedBreakpoints

compactedBreakpoints: string[];

Controls on which screen sizes sidebar should be switched to compacted state. Works only when responsive mode is on. Default values are ['xs', 'is', 'sm', 'md', 'lg'].
string[]

property containerFixedValue

containerFixedValue: boolean;

property destroy$

protected destroy$: Subject<void>;

property endValue

endValue: boolean;

property expanded

readonly expanded: boolean;

property fixedValue

fixedValue: boolean;

property leftValue

leftValue: boolean;

property ngAcceptInputType_containerFixed

static ngAcceptInputType_containerFixed: NbBooleanInput;

property ngAcceptInputType_end

static ngAcceptInputType_end: NbBooleanInput;

property ngAcceptInputType_fixed

static ngAcceptInputType_fixed: NbBooleanInput;

property ngAcceptInputType_left

static ngAcceptInputType_left: NbBooleanInput;

property ngAcceptInputType_responsive

static ngAcceptInputType_responsive: NbBooleanInput;

property ngAcceptInputType_right

static ngAcceptInputType_right: NbBooleanInput;

property ngAcceptInputType_start

static ngAcceptInputType_start: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSidebarComponent,
    'nb-sidebar',
    never,
    {
        right: { alias: 'right'; required: false };
        left: { alias: 'left'; required: false };
        start: { alias: 'start'; required: false };
        end: { alias: 'end'; required: false };
        fixed: { alias: 'fixed'; required: false };
        containerFixed: { alias: 'containerFixed'; required: false };
        state: { alias: 'state'; required: false };
        responsive: { alias: 'responsive'; required: false };
        tag: { alias: 'tag'; required: false };
        compactedBreakpoints: { alias: 'compactedBreakpoints'; required: false };
        collapsedBreakpoints: { alias: 'collapsedBreakpoints'; required: false };
    },
    {
        stateChange: 'stateChange';
        responsiveStateChange: 'responsiveStateChange';
    },
    never,
    ['nb-sidebar-header', '*', 'nb-sidebar-footer'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSidebarComponent, never>;

property responsive

responsive: boolean;

Makes sidebar listen to media query events and change its behaviour {boolean}

property responsiveState

protected responsiveState: NbSidebarResponsiveState;

property responsiveStateChange

readonly responsiveStateChange: EventEmitter<NbSidebarResponsiveState>;

Emits whenever sidebar responsive state change.

property responsiveValueChange$

protected readonly responsiveValueChange$: Subject<boolean>;

property rightValue

rightValue: boolean;

property startValue

startValue: boolean;

property state

state: NbSidebarState;

Initial sidebar state, expanded|collapsed|compacted {string}

property stateChange

readonly stateChange: EventEmitter<NbSidebarState>;

Emits whenever sidebar state change.

property tag

tag: string;

Tags a sidebar with some ID, can be later used in the sidebar service to determine which sidebar triggered the action, if multiple sidebars exist on the page.
{string}

method collapse

collapse: () => void;

Collapses the sidebar

method compact

compact: () => void;

Compacts the sidebar (minimizes)

method expand

expand: () => void;

Expands the sidebar

method getMenuLink

protected getMenuLink: (element: HTMLElement) => HTMLElement | undefined;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onClick

onClick: (event: any) => void;

method subscribeToMediaQueryChange

protected subscribeToMediaQueryChange: () => void;

method toggle

toggle: (compact?: boolean) => void;

Toggles sidebar state (expanded|collapsed|compacted)
Parameter compact
If true, then sidebar state will be changed between expanded & compacted, otherwise - between expanded & collapsed. False by default.
Toggle sidebar state
this.sidebar.toggle(true);

method updateState

protected updateState: (state: NbSidebarState) => void;

class NbSidebarFooterComponent

class NbSidebarFooterComponent {}

Sidebar footer container.
Placeholder which contains a sidebar footer content, placed at the very bottom of the sidebar outside of the scroll area.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSidebarFooterComponent,
    'nb-sidebar-footer',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSidebarFooterComponent, never>;

class NbSidebarHeaderComponent

class NbSidebarHeaderComponent {}

Sidebar header container.
Placeholder which contains a sidebar header content, placed at the very top of the sidebar outside of the scroll area.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSidebarHeaderComponent,
    'nb-sidebar-header',
    never,
    {},
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSidebarHeaderComponent, never>;

class NbSidebarModule

class NbSidebarModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSidebarModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbSidebarModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbSidebarModule,
    [
        typeof i1.NbSidebarComponent,
        typeof i1.NbSidebarFooterComponent,
        typeof i1.NbSidebarHeaderComponent
    ],
    [typeof i2.NbSharedModule],
    [
        typeof i1.NbSidebarComponent,
        typeof i1.NbSidebarFooterComponent,
        typeof i1.NbSidebarHeaderComponent
    ]
>;

method forRoot

static forRoot: () => ModuleWithProviders<NbSidebarModule>;

class NbSidebarService

class NbSidebarService {}

Sidebar service.
Root module service to control the sidebar from any part of the app.
Allows you to change sidebar state dynamically from any part of the app: @stacked-example(Sidebar State, sidebar/sidebar-toggle.component)

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSidebarService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbSidebarService>;

method collapse

collapse: (tag?: string) => void;

Collapses a sidebar
Parameter tag
If you have multiple sidebars on the page, mark them with tag input property and pass it here to specify which sidebar you want to control

method compact

compact: (tag?: string) => void;

Makes sidebar compact
Parameter tag
If you have multiple sidebars on the page, mark them with tag input property and pass it here to specify which sidebar you want to control

method expand

expand: (tag?: string) => void;

Expands a sidebar
Parameter tag
If you have multiple sidebars on the page, mark them with tag input property and pass it here to specify which sidebar you want to control

method getSidebarResponsiveState

getSidebarResponsiveState: (
    tag?: string
) => Observable<NbSidebarResponsiveState>;

Returns sidebar state observable which emits once
Parameter tag
If you have multiple sidebars on the page, mark them with tag input property and pass it here to specify which sidebar responsive state you need

method getSidebarState

getSidebarState: (tag?: string) => Observable<NbSidebarState>;

Returns sidebar state observable which emits once
Parameter tag
If you have multiple sidebars on the page, mark them with tag input property and pass it here to specify which sidebar state you need

method onCollapse

onCollapse: () => Observable<{ tag: string }>;

Subscribe to collapse evens
Returns
Observable<{ tag: string }>

method onCompact

onCompact: () => Observable<{ tag: string }>;

Subscribe to compact evens
Returns
Observable<{ tag: string }>

method onExpand

onExpand: () => Observable<{ tag: string }>;

Subscribe to expand events
Returns
Observable<{ tag: string }>

method onToggle

onToggle: () => Observable<{ compact: boolean; tag: string }>;

Subscribe to toggle events
Returns
Observable<{ compact: boolean, tag: string }>

method toggle

toggle: (compact?: boolean, tag?: string) => void;

Toggle a sidebar
Parameter compact
Parameter tag
If you have multiple sidebars on the page, mark them with tag input property and pass it here to specify which sidebar you want to control

class NbSortDirective

class NbSortDirective {}

Directive triggers sort method of passed object when sort header changes direction

property ngAcceptInputType_sortable

static ngAcceptInputType_sortable: string | NbSortable;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbSortDirective,
    '[nbSort]',
    never,
    { sortable: { alias: 'nbSort'; required: false } },
    { sort: 'sort' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSortDirective, never>;

property sort

sort: EventEmitter<NbSortRequest>;

property sortable

sortable: NbSortable;

method emitSort

emitSort: (sortRequest: NbSortRequest) => void;

class NbSortHeaderComponent

class NbSortHeaderComponent {}

Marks header as sort header so it emitting sort event when clicked.

constructor

constructor(sort: NbSortDirective, columnDef: NbSortHeaderColumnDef);

property direction

direction: NbSortDirection;

Current sort direction. Possible values: asc, desc, ``(none) {NbSortDirection}

property disabled

disabled: boolean;

property ngAcceptInputType_direction

static ngAcceptInputType_direction: NbSortDirectionValues;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSortHeaderComponent,
    '[nbSortHeader]',
    never,
    {
        direction: { alias: 'nbSortHeader'; required: false };
        disabled: { alias: 'disabled'; required: false };
    },
    {},
    ['sortIcon'],
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSortHeaderComponent, never>;

property sortIcon

sortIcon: TemplateRef<NbSortHeaderIconDirectiveContext>;

method getDisabledAttributeValue

getDisabledAttributeValue: () => '' | null;

method getIconContext

getIconContext: () => NbSortHeaderIconDirectiveContext;

method isAscending

isAscending: () => boolean;

method isDescending

isDescending: () => boolean;

method sortData

sortData: () => void;

method sortIfEnabled

sortIfEnabled: () => void;

class NbSortHeaderIconDirective

class NbSortHeaderIconDirective {}

Directive for headers sort icons. Mark you icon implementation with this structural directive and it'll set template's implicit context with current direction. Context also has isAscending, isDescending and isNone properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbSortHeaderIconDirective,
    '[nbSortHeaderIcon]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSortHeaderIconDirective, never>;

class NbSortIconComponent

class NbSortIconComponent {}

property direction

direction: NbSortDirection;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSortIconComponent,
    'nb-sort-icon',
    never,
    { direction: { alias: 'direction'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSortIconComponent, never>;

method isAscending

isAscending: () => boolean;

method isDescending

isDescending: () => boolean;

method isDirectionSet

isDirectionSet: () => boolean;

class NbSpinnerComponent

class NbSpinnerComponent {}

Styled spinner component
spinner-text-color: spinner-text-font-family: spinner-text-font-size: spinner-text-font-weight: spinner-text-line-height: spinner-basic-background-color: spinner-basic-circle-filled-color: spinner-basic-circle-empty-color: spinner-primary-background-color: spinner-primary-circle-filled-color: spinner-primary-circle-empty-color: spinner-info-background-color: spinner-info-circle-filled-color: spinner-info-circle-empty-color: spinner-success-background-color: spinner-success-circle-filled-color: spinner-success-circle-empty-color: spinner-warning-background-color: spinner-warning-circle-filled-color: spinner-warning-circle-empty-color: spinner-danger-background-color: spinner-danger-circle-filled-color: spinner-danger-circle-empty-color: spinner-control-background-color: spinner-control-circle-filled-color: spinner-control-circle-empty-color: spinner-height-tiny: spinner-height-small: spinner-height-medium: spinner-height-large: spinner-height-giant:

constructor

constructor(statusService: NbStatusService);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property giant

readonly giant: boolean;

property info

readonly info: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property message

message: string;

Loading text that is shown near the icon string

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbSpinnerComponent,
    'nb-spinner',
    never,
    {
        message: { alias: 'message'; required: false };
        size: { alias: 'size'; required: false };
        status: { alias: 'status'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSpinnerComponent, never>;

property primary

readonly primary: boolean;

property size

size: NbComponentSize;

Spinner size, available sizes: tiny, small, medium, large, giant
Parameter value

property small

readonly small: boolean;

property status

status: string;

Spinner status (adds specific styles): basic, primary, info, success, warning, danger, control.

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property tiny

readonly tiny: boolean;

property warning

readonly warning: boolean;

class NbSpinnerDirective

class NbSpinnerDirective implements OnInit {}

Styled spinner directive
@stacked-example(Spinner Showcase, spinner/spinner-card.component)
<nb-card [nbSpinner]="loading" nbSpinnerStatus="danger"> <nb-card-body>Card Content</nb-card-body> </nb-card>
### Installation
Import NbSpinnerModule to your feature module.
@NgModule({ imports: [ // ... NbSpinnerModule, ], }) export class PageModule { }
### Usage
Could be colored using status property
@stacked-example(Spinner Colors, spinner/spinner-colors.component)
Available in different sizes with size property:
@stacked-example(Spinner Sizes, spinner/spinner-sizes.component)
It is also possible to place it into the button: @stacked-example(Buttons with spinner, spinner/spinner-button.component)
Or tabs: @stacked-example(Spinner in tabs, spinner/spinner-tabs.component)

constructor

constructor(
    directiveView: ViewContainerRef,
    componentFactoryResolver: ComponentFactoryResolver,
    renderer: Renderer2,
    directiveElement: ElementRef
);

property componentFactory

componentFactory: ComponentFactory<NbSpinnerComponent>;

property isSpinnerExist

isSpinnerExist: boolean;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbSpinnerDirective,
    '[nbSpinner]',
    never,
    {
        spinnerMessage: { alias: 'nbSpinnerMessage'; required: false };
        spinnerStatus: { alias: 'nbSpinnerStatus'; required: false };
        spinnerSize: { alias: 'nbSpinnerSize'; required: false };
        nbSpinner: { alias: 'nbSpinner'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSpinnerDirective, never>;

property spinner

spinner: ComponentRef<NbSpinnerComponent>;

property spinnerMessage

spinnerMessage: string;

Spinner message shown next to the icon {string}

property spinnerSize

spinnerSize: NbComponentSize;

Spinner size. Possible values: tiny, small, medium (default), large, giant

property spinnerStatus

spinnerStatus: string;

Spinner status color basic, primary, info, success, warning, danger, control.

method hide

hide: () => void;

method ngOnInit

ngOnInit: () => void;

method setInstanceInputs

setInstanceInputs: (instance: NbSpinnerComponent) => void;

method show

show: () => void;

class NbSpinnerModule

class NbSpinnerModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSpinnerModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbSpinnerModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbSpinnerModule,
    [typeof i1.NbSpinnerComponent, typeof i2.NbSpinnerDirective],
    [typeof i3.NbSharedModule],
    [typeof i1.NbSpinnerComponent, typeof i2.NbSpinnerDirective]
>;

class NbSpinnerService

class NbSpinnerService {}

Service to control the global page spinner.

constructor

constructor(document: any);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSpinnerService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbSpinnerService>;

method clear

clear: () => void;

Clears the list of loader

method load

load: () => void;

Start the loader process, show spinnder and execute loaders

method registerLoader

registerLoader: (method: Promise<any>) => void;

Appends new loader to the list of loader to be completed before spinner will be hidden
Parameter method
Promise

class NbStatusService

class NbStatusService {}

property coreStatuses

readonly coreStatuses: NbComponentStatus[];

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbStatusService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbStatusService>;

method getStatusClass

getStatusClass: (status: NbComponentOrCustomStatus) => string | undefined;

method isCoreStatus

isCoreStatus: (status: NbComponentOrCustomStatus) => boolean;

method isCustomStatus

isCustomStatus: (status: NbComponentOrCustomStatus) => boolean;

method isValidStatusString

protected isValidStatusString: (status: NbComponentOrCustomStatus) => boolean;

class NbStepComponent

class NbStepComponent {}

Component intended to be used within the <nb-stepper> component. Container for a step

constructor

constructor(stepper: any);

property completed

completed: boolean;

Whether step is marked as completed.
{boolean}

property content

content: TemplateRef<any>;

Step content
{TemplateRef}

property hidden

hidden: boolean;

Whether step will be displayed in wizard
{boolean}

property interacted

interacted: boolean;

property isCompleted

readonly isCompleted: boolean;

property isLabelTemplate

readonly isLabelTemplate: boolean;

Check that label is a TemplateRef.
boolean

property label

label: any;

Step label
{string|TemplateRef}

property ngAcceptInputType_completed

static ngAcceptInputType_completed: NbBooleanInput;

property ngAcceptInputType_hidden

static ngAcceptInputType_hidden: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbStepComponent,
    'nb-step',
    never,
    {
        stepControl: { alias: 'stepControl'; required: false };
        label: { alias: 'label'; required: false };
        hidden: { alias: 'hidden'; required: false };
        completed: { alias: 'completed'; required: false };
    },
    {},
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbStepComponent, never>;

property stepControl

stepControl?: { valid: boolean | null; reset: () => void };

Top level abstract control of the step

property stepper

protected stepper: NbStepperComponent;

method reset

reset: () => void;

Reset step and stepControl state

method select

select: () => void;

Mark step as selected

class NbStepperComponent

class NbStepperComponent {}

Stepper component
@stacked-example(Showcase, stepper/stepper-showcase.component)
### Installation
Import NbStepperModule to your feature module.
@NgModule({ imports: [ // ... NbStepperModule, ], }) export class PageModule { }
### Usage
If step label is string you can pass it as label attribute. Otherwise ng-template should be used:
// ... <nb-stepper orientation="horizontal"> <nb-step label="step number one"> // ... step content here </nb-step> <nb-step label="stepLabel"> <ng-template #stepLabel> <div> step number two </div> </ng-template> // ... step content here </nb-step> </nb-stepper>
When linear mode enabled user can't move forward unless current step is complete. @stacked-example(Linear, stepper/stepper-linear.component)
Specify [stepControl]="form" and stepper allow go to the next step only if form is valid. You can disable it via linear mode setting.
// ... <nb-stepper orientation="horizontal"> <nb-step label="step number one" [stepControl]="form"> <form [formGroup]="form"> // ... </form> </nb-step> // ... </nb-stepper>
@stacked-example(Validation, stepper/stepper-validation.component)
Stepper component has two layout options - vertical & horizontal @stacked-example(Vertical, stepper/stepper-vertical.component)
disableStepNavigation disables navigation by clicking on steps, so user can navigate only using 'nbStepperPrevious' and 'nbStepperNext' buttons. @stacked-example(Disabled steps navigation, stepper/stepper-disabled-step-nav.component)
Use stepChange output to listening to step change event. This event emits NbStepChangeEvent object. @stacked-example(Step change event, stepper/stepper-step-change-event.component)
stepper-step-text-color: stepper-step-text-font-family: stepper-step-text-font-size: stepper-step-text-font-weight: stepper-step-text-line-height: stepper-step-active-text-color: stepper-step-completed-text-color: stepper-step-index-border-color: stepper-step-index-border-style: stepper-step-index-border-width: stepper-step-index-border-radius: stepper-step-index-width: stepper-step-index-active-border-color: stepper-step-index-completed-background-color: stepper-step-index-completed-border-color: stepper-step-index-completed-text-color: stepper-connector-background-color: stepper-connector-completed-background-color: stepper-horizontal-connector-margin: stepper-vertical-connector-margin: stepper-step-content-padding:

property disableStepNavigation

disableStepNavigation: boolean;

property horizontal

readonly horizontal: boolean;

property linear

linear: boolean;

property ngAcceptInputType_disableStepNavigation

static ngAcceptInputType_disableStepNavigation: NbBooleanInput;

property ngAcceptInputType_linear

static ngAcceptInputType_linear: NbBooleanInput;

property orientation

orientation: NbStepperOrientation;

Stepper orientation - horizontal|vertical

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbStepperComponent,
    'nb-stepper',
    never,
    {
        selectedIndex: { alias: 'selectedIndex'; required: false };
        disableStepNavigation: {
            alias: 'disableStepNavigation';
            required: false;
        };
        selected: { alias: 'selected'; required: false };
        orientation: { alias: 'orientation'; required: false };
        linear: { alias: 'linear'; required: false };
    },
    { stepChange: 'stepChange' },
    ['steps'],
    ['nb-step'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbStepperComponent, never>;

property selected

selected: NbStepComponent;

Selected step component

property selectedIndex

selectedIndex: number;

Selected step index

property stepChange

stepChange: EventEmitter<NbStepChangeEvent>;

Emits when step changed {EventEmitter}

property steps

steps: QueryList<NbStepComponent>;

property vertical

readonly vertical: boolean;

method canBeSelected

protected canBeSelected: (indexToCheck: number) => boolean;

method changeStep

changeStep: (step: NbStepComponent) => void;

Select step if navigation is not disabled
Parameter step

method getStepTemplate

getStepTemplate: (step: NbStepComponent) => TemplateRef<any> | null;

method isStepSelected

isStepSelected: (step: NbStepComponent) => boolean;

method isStepValid

protected isStepValid: (index: number) => boolean;

method markCurrentStepInteracted

protected markCurrentStepInteracted: () => void;

method next

next: () => void;

Navigate to next step

method previous

previous: () => void;

Navigate to previous step

method reset

reset: () => void;

Reset stepper and stepControls to initial state

class NbStepperModule

class NbStepperModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbStepperModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbStepperModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbStepperModule,
    [
        typeof i1.NbStepperComponent,
        typeof i2.NbStepComponent,
        typeof i3.NbStepperNextDirective,
        typeof i3.NbStepperPreviousDirective
    ],
    [typeof i4.NbSharedModule, typeof i5.NbIconModule],
    [
        typeof i1.NbStepperComponent,
        typeof i2.NbStepComponent,
        typeof i3.NbStepperNextDirective,
        typeof i3.NbStepperPreviousDirective
    ]
>;

class NbStepperNextDirective

class NbStepperNextDirective {}

constructor

constructor(stepper: NbStepperComponent);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbStepperNextDirective,
    'button[nbStepperNext]',
    never,
    { type: { alias: 'type'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbStepperNextDirective, never>;

property stepper

protected stepper: NbStepperComponent;

property type

type: string;

method onClick

onClick: () => void;

class NbStepperPreviousDirective

class NbStepperPreviousDirective {}

constructor

constructor(stepper: NbStepperComponent);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbStepperPreviousDirective,
    'button[nbStepperPrevious]',
    never,
    { type: { alias: 'type'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbStepperPreviousDirective, never>;

property stepper

protected stepper: NbStepperComponent;

property type

type: string;

method onClick

onClick: () => void;

class NbSuffixDirective

class NbSuffixDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbSuffixDirective,
    '[nbSuffix]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbSuffixDirective, never>;

class NbSvgIcon

class NbSvgIcon implements NbIcon {}

constructor

constructor(name: any, content: any, params?: NbIconPackParams);

property content

protected content: any;

property name

protected name: any;

property params

protected params: NbIconPackParams;

method getClasses

getClasses: (options?: NbIconOptions) => string[];

method getContent

getContent: (options?: NbIconOptions) => string;

class NbTabComponent

class NbTabComponent {}

Specific tab container.

<nb-tab tabTitle="Users"
  badgeText="99+"
  badgeStatus="danger">
  <p>List of <strong>users</strong>.</p>
</nb-tab>

property active

active: boolean;

Specifies active tab
Returns
{boolean}

property activeValue

activeValue: boolean;

property badgeDot

badgeDot: boolean;

Use badge dot mode {boolean}

property badgePosition

badgePosition: NbBadgePosition;

Badge position. Can be set to any class or to one of predefined positions: 'top left', 'top right', 'bottom left', 'bottom right', 'top start', 'top end', 'bottom start', 'bottom end' string

property badgeStatus

badgeStatus: string;

Badge status (adds specific styles): 'primary', 'info', 'success', 'warning', 'danger'
Parameter val

property badgeText

badgeText: string;

Badge text to display string

property disabled

disabled: boolean;

Item is disabled and cannot be opened. {boolean}

property disabledValue

disabledValue: boolean;

property init

init: boolean;

Deprecated
@breaking-change Remove 12.0.0 @docs-private

property ngAcceptInputType_active

static ngAcceptInputType_active: NbBooleanInput;

property ngAcceptInputType_badgeDot

static ngAcceptInputType_badgeDot: NbBooleanInput;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property ngAcceptInputType_lazyLoad

static ngAcceptInputType_lazyLoad: NbBooleanInput;

property ngAcceptInputType_responsive

static ngAcceptInputType_responsive: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTabComponent,
    'nb-tab',
    never,
    {
        tabTitle: { alias: 'tabTitle'; required: false };
        tabId: { alias: 'tabId'; required: false };
        badgeDot: { alias: 'badgeDot'; required: false };
        tabIcon: { alias: 'tabIcon'; required: false };
        disabled: { alias: 'disabled'; required: false };
        responsive: { alias: 'responsive'; required: false };
        route: { alias: 'route'; required: false };
        active: { alias: 'active'; required: false };
        lazyLoad: { alias: 'lazyLoad'; required: false };
        badgeText: { alias: 'badgeText'; required: false };
        badgeStatus: { alias: 'badgeStatus'; required: false };
        badgePosition: { alias: 'badgePosition'; required: false };
    },
    {},
    ['tabContentDirective', 'tabTitleDirective'],
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTabComponent, never>;

property responsive

responsive: boolean;

property responsiveValue

responsiveValue: boolean;

property route

route: string;

Makes this tab a link that initiates navigation to a route string

property tabContentDirective

tabContentDirective: NbTabContentDirective;

property tabIcon

tabIcon: string | NbIconConfig;

Tab icon name or icon config object {string | NbIconConfig}

property tabId

tabId: string;

Tab id {string}

property tabTitle

tabTitle: string;

Tab title {string}

property tabTitleDirective

tabTitleDirective: NbTabTitleDirective;

class NbTabContentDirective

class NbTabContentDirective {}

Directive to wrap tab lazy content.

constructor

constructor(templateRef: TemplateRef<any>);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTabContentDirective,
    '[nbTabContent]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTabContentDirective, never>;

property templateRef

templateRef: TemplateRef<any>;

class NbTable

class NbTable<T> extends CdkTable<T> {}

constructor

constructor(
    differs: IterableDiffers,
    changeDetectorRef: ChangeDetectorRef,
    elementRef: ElementRef,
    role: string,
    dir: NbDirectionality,
    document: any,
    platform: NbPlatform,
    _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
    _coalescedStyleScheduler: _CoalescedStyleScheduler,
    _viewportRuler: NbViewportRulerAdapter,
    _stickyPositioningListener: StickyPositioningListener
);

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTable<any>,
    'nb-table-not-implemented',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbTable<any>,
    [
        null,
        null,
        null,
        { attribute: 'role' },
        null,
        null,
        null,
        null,
        null,
        null,
        { optional: true; skipSelf: true }
    ]
>;

class NbTableModule

class NbTableModule extends CdkTableModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTableModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbTableModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbTableModule,
    [
        typeof NbTable,
        typeof i1.NbHeaderCellDefDirective,
        typeof i2.NbHeaderRowDefDirective,
        typeof i1.NbColumnDefDirective,
        typeof i1.NbCellDefDirective,
        typeof i2.NbRowDefDirective,
        typeof i1.NbFooterCellDefDirective,
        typeof i2.NbFooterRowDefDirective,
        typeof i2.NbDataRowOutletDirective,
        typeof i2.NbHeaderRowOutletDirective,
        typeof i2.NbFooterRowOutletDirective,
        typeof i2.NbNoDataRowOutletDirective,
        typeof i2.NbCellOutletDirective,
        typeof i1.NbHeaderCellDirective,
        typeof i1.NbCellDirective,
        typeof i1.NbFooterCellDirective,
        typeof i2.NbHeaderRowComponent,
        typeof i2.NbRowComponent,
        typeof i2.NbFooterRowComponent
    ],
    [typeof i3.NbBidiModule],
    [
        typeof NbTable,
        typeof i1.NbHeaderCellDefDirective,
        typeof i2.NbHeaderRowDefDirective,
        typeof i1.NbColumnDefDirective,
        typeof i1.NbCellDefDirective,
        typeof i2.NbRowDefDirective,
        typeof i1.NbFooterCellDefDirective,
        typeof i2.NbFooterRowDefDirective,
        typeof i2.NbDataRowOutletDirective,
        typeof i2.NbHeaderRowOutletDirective,
        typeof i2.NbFooterRowOutletDirective,
        typeof i2.NbNoDataRowOutletDirective,
        typeof i2.NbCellOutletDirective,
        typeof i1.NbHeaderCellDirective,
        typeof i1.NbCellDirective,
        typeof i1.NbFooterCellDirective,
        typeof i2.NbHeaderRowComponent,
        typeof i2.NbRowComponent,
        typeof i2.NbFooterRowComponent
    ]
>;

class NbTabsetComponent

class NbTabsetComponent implements AfterContentInit, OnDestroy {}

Dynamic tabset component. @stacked-example(Showcase, tabset/tabset-showcase.component)
Basic tabset example
<nb-tabset> <nb-tab tabTitle="Simple Tab #1"> Tab content 1 </nb-tab> <nb-tab tabTitle="Simple Tab #2"> Tab content 2 </nb-tab> </nb-tabset>
### Installation
Import NbTabsetModule to your feature module.
@NgModule({ imports: [ // ... NbTabsetModule, ], }) export class PageModule { }
### Usage
It is also possible to set a badge to a particular tab: @stacked-example(Tab With Badge, tabset/tabset-badge.component)
and we can set it to full a width of a parent component @stacked-example(Full Width, tabset/tabset-width.component)
tabIcon should be used to add an icon to the tab. Icon can also be combined with title. responsive tab property if set allows you to hide the title on smaller screens ($tabset-tab-text-hide-breakpoint variable) 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.
<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>
You can provide a template as a tab title via <ng-template nbTabTitle>: @stacked-example(Tab title template, tabset/tabset-template-title.component)
tabset-background-color: tabset-border-radius: tabset-shadow: tabset-tab-background-color: tabset-tab-padding: tabset-tab-text-color: tabset-tab-text-font-family: tabset-tab-text-font-size: tabset-tab-text-font-weight: tabset-tab-text-line-height: tabset-tab-text-transform: tabset-tab-underline-width: tabset-tab-underline-color: tabset-tab-active-background-color: tabset-tab-active-text-color: tabset-tab-active-underline-color: tabset-tab-focus-background-color: tabset-tab-focus-text-color: tabset-tab-focus-underline-color: tabset-tab-hover-background-color: tabset-tab-hover-text-color: tabset-tab-hover-underline-color: tabset-tab-disabled-background-color: tabset-tab-disabled-text-color: tabset-tab-disabled-underline-color: tabset-divider-color: tabset-divider-style: tabset-divider-width: tabset-content-background-color: tabset-content-padding: tabset-content-text-color: tabset-content-text-font-family: tabset-content-text-font-size: tabset-content-text-font-weight: tabset-content-text-line-height: tabset-scrollbar-color: tabset-scrollbar-background-color: tabset-scrollbar-width:

constructor

constructor(route: ActivatedRoute, changeDetectorRef: ChangeDetectorRef);

property changeTab

changeTab: EventEmitter<any>;

Emits when tab is selected EventEmitter

property fullWidthValue

fullWidthValue: boolean;

property ngAcceptInputType_fullWidth

static ngAcceptInputType_fullWidth: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTabsetComponent,
    'nb-tabset',
    never,
    {
        fullWidth: { alias: 'fullWidth'; required: false };
        routeParam: { alias: 'routeParam'; required: false };
    },
    { changeTab: 'changeTab' },
    ['tabs'],
    ['nb-tab'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTabsetComponent, never>;

property routeParam

routeParam: string;

If specified - tabset listens to this parameter and selects corresponding tab. {string}

property tabs

tabs: QueryList<NbTabComponent>;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method selectTab

selectTab: (selectedTab: NbTabComponent) => void;

class NbTabsetModule

class NbTabsetModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTabsetModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbTabsetModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbTabsetModule,
    [
        typeof i1.NbTabsetComponent,
        typeof i1.NbTabComponent,
        typeof i2.NbTabContentDirective,
        typeof i3.NbTabTitleDirective
    ],
    [typeof i4.NbSharedModule, typeof i5.NbBadgeModule, typeof i6.NbIconModule],
    [
        typeof i1.NbTabsetComponent,
        typeof i1.NbTabComponent,
        typeof i2.NbTabContentDirective,
        typeof i3.NbTabTitleDirective
    ]
>;

class NbTabTitleDirective

class NbTabTitleDirective {}

constructor

constructor(templateRef: TemplateRef<any>);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTabTitleDirective,
    '[nbTabTitle]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTabTitleDirective, never>;

property templateRef

templateRef: TemplateRef<any>;

class NbTagComponent

class NbTagComponent implements AfterViewInit, OnDestroy, NbHighlightableOption {}

To show a cross on a tag and enable remove event add the removable attribute. @stacked-example(Removable tags, tag/tag-removable.component)
You can change appearance via appearance input: @stacked-example(Tag Appearance, tag/tag-appearance.component)
You can change status via status input: @stacked-example(Tag Status, tag/tag-status.component)
tag-text-font-family: tag-text-transform: tag-border-width: tag-border-style: tag-border-radius: tag-tiny-text-font-size: tag-tiny-text-font-weight: tag-tiny-text-line-height: tag-tiny-padding: tag-tiny-close-offset: tag-small-text-font-size: tag-small-text-font-weight: tag-small-text-line-height: tag-small-padding: tag-small-close-offset: tag-medium-text-font-size: tag-medium-text-font-weight: tag-medium-text-line-height: tag-medium-padding: tag-medium-close-offset: tag-large-text-font-size: tag-large-text-font-weight: tag-large-text-line-height: tag-large-padding: tag-large-close-offset: tag-giant-text-font-size: tag-giant-text-font-weight: tag-giant-text-line-height: tag-giant-padding: tag-giant-close-offset: tag-filled-basic-background-color: tag-filled-basic-border-color: tag-filled-basic-text-color: tag-filled-basic-active-background-color: tag-filled-basic-active-border-color: tag-filled-basic-hover-background-color: tag-filled-basic-hover-border-color: tag-filled-basic-selected-background-color: tag-filled-basic-selected-border-color: tag-filled-primary-background-color: tag-filled-primary-border-color: tag-filled-primary-text-color: tag-filled-primary-active-background-color: tag-filled-primary-active-border-color: tag-filled-primary-hover-background-color: tag-filled-primary-hover-border-color: tag-filled-primary-selected-background-color: tag-filled-primary-selected-border-color: tag-filled-success-background-color: tag-filled-success-border-color: tag-filled-success-text-color: tag-filled-success-active-background-color: tag-filled-success-active-border-color: tag-filled-success-hover-background-color: tag-filled-success-hover-border-color: tag-filled-success-selected-background-color: tag-filled-success-selected-border-color: tag-filled-info-background-color: tag-filled-info-border-color: tag-filled-info-text-color: tag-filled-info-active-background-color: tag-filled-info-active-border-color: tag-filled-info-hover-background-color: tag-filled-info-hover-border-color: tag-filled-info-selected-background-color: tag-filled-info-selected-border-color: tag-filled-warning-background-color: tag-filled-warning-border-color: tag-filled-warning-text-color: tag-filled-warning-active-background-color: tag-filled-warning-active-border-color: tag-filled-warning-hover-background-color: tag-filled-warning-hover-border-color: tag-filled-warning-selected-background-color: tag-filled-warning-selected-border-color: tag-filled-danger-background-color: tag-filled-danger-border-color: tag-filled-danger-text-color: tag-filled-danger-active-background-color: tag-filled-danger-active-border-color: tag-filled-danger-hover-background-color: tag-filled-danger-hover-border-color: tag-filled-danger-selected-background-color: tag-filled-danger-selected-border-color: tag-filled-control-background-color: tag-filled-control-border-color: tag-filled-control-text-color: tag-filled-control-active-background-color: tag-filled-control-active-border-color: tag-filled-control-hover-background-color: tag-filled-control-hover-border-color: tag-filled-control-selected-background-color: tag-filled-control-selected-border-color: tag-outline-basic-background-color: tag-outline-basic-border-color: tag-outline-basic-text-color: tag-outline-basic-active-background-color: tag-outline-basic-active-border-color: tag-outline-basic-active-text-color: tag-outline-basic-hover-background-color: tag-outline-basic-hover-border-color: tag-outline-basic-hover-text-color: tag-outline-basic-selected-background-color: tag-outline-basic-selected-border-color: tag-outline-basic-selected-text-color: tag-outline-primary-background-color: tag-outline-primary-border-color: tag-outline-primary-text-color: tag-outline-primary-active-background-color: tag-outline-primary-active-border-color: tag-outline-primary-active-text-color: tag-outline-primary-hover-background-color: tag-outline-primary-hover-border-color: tag-outline-primary-hover-text-color: tag-outline-primary-selected-background-color: tag-outline-primary-selected-border-color: tag-outline-primary-selected-text-color: tag-outline-success-background-color: tag-outline-success-border-color: tag-outline-success-text-color: tag-outline-success-active-background-color: tag-outline-success-active-border-color: tag-outline-success-active-text-color: tag-outline-success-hover-background-color: tag-outline-success-hover-border-color: tag-outline-success-hover-text-color: tag-outline-success-selected-background-color: tag-outline-success-selected-border-color: tag-outline-success-selected-text-color: tag-outline-info-background-color: tag-outline-info-border-color: tag-outline-info-text-color: tag-outline-info-active-background-color: tag-outline-info-active-border-color: tag-outline-info-active-text-color: tag-outline-info-hover-background-color: tag-outline-info-hover-border-color: tag-outline-info-hover-text-color: tag-outline-info-selected-background-color: tag-outline-info-selected-border-color: tag-outline-info-selected-text-color: tag-outline-warning-background-color: tag-outline-warning-border-color: tag-outline-warning-text-color: tag-outline-warning-active-background-color: tag-outline-warning-active-border-color: tag-outline-warning-active-text-color: tag-outline-warning-hover-background-color: tag-outline-warning-hover-border-color: tag-outline-warning-hover-text-color: tag-outline-warning-selected-background-color: tag-outline-warning-selected-border-color: tag-outline-warning-selected-text-color: tag-outline-danger-background-color: tag-outline-danger-border-color: tag-outline-danger-text-color: tag-outline-danger-active-background-color: tag-outline-danger-active-border-color: tag-outline-danger-active-text-color: tag-outline-danger-hover-background-color: tag-outline-danger-hover-border-color: tag-outline-danger-hover-text-color: tag-outline-danger-selected-background-color: tag-outline-danger-selected-border-color: tag-outline-danger-selected-text-color: tag-outline-control-background-color: tag-outline-control-border-color: tag-outline-control-text-color: tag-outline-control-active-background-color: tag-outline-control-active-border-color: tag-outline-control-active-text-color: tag-outline-control-hover-background-color: tag-outline-control-hover-border-color: tag-outline-control-hover-text-color: tag-outline-control-selected-background-color: tag-outline-control-selected-border-color: tag-outline-control-selected-text-color:

constructor

constructor(
    _hostElement: ElementRef,
    cd: ChangeDetectorRef,
    renderer: Renderer2,
    zone: NgZone,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property appearance

appearance: NbTagAppearance;

Tag appearance: filled, outline.

property basic

readonly basic: boolean;

property cd

protected cd: ChangeDetectorRef;

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property destroy$

readonly destroy$: Observable<NbTagComponent>;

property filled

filled: boolean;

property giant

readonly giant: boolean;

property info

readonly info: boolean;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property ngAcceptInputType_removable

static ngAcceptInputType_removable: NbBooleanInput;

property ngAcceptInputType_selected

static ngAcceptInputType_selected: NbBooleanInput;

property outline

outline: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTagComponent,
    'nb-tag',
    ['nbTag'],
    {
        text: { alias: 'text'; required: false };
        selected: { alias: 'selected'; required: false };
        removable: { alias: 'removable'; required: false };
        appearance: { alias: 'appearance'; required: false };
        status: { alias: 'status'; required: false };
        size: { alias: 'size'; required: false };
        role: { alias: 'role'; required: false };
    },
    { remove: 'remove'; selectedChange: 'selectedChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTagComponent, never>;

property primary

readonly primary: boolean;

property removable

removable: boolean;

Controls whether the user can remove a tag or not.

property remove

readonly remove: EventEmitter<NbTagComponent>;

Emits when the user removes the tag (whether by clicking on the remove button or by pressing delete or backspace key).

property renderer

protected renderer: Renderer2;

property role

role: string;

property selected

selected: boolean;

property selectedChange

readonly selectedChange: EventEmitter<NbTagSelectionChange>;

property size

size: NbComponentSize;

Tag size: tiny, small, medium, large, giant.

property small

readonly small: boolean;

property status

status: string;

Tag status: basic, primary, info, success, warning, danger, control.

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property text

text: string;

Tag text.

property tiny

readonly tiny: boolean;

property warning

readonly warning: boolean;

property zone

protected zone: NgZone;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method setActiveStyles

setActiveStyles: () => void;

method setInactiveStyles

setInactiveStyles: () => void;

class NbTagInputDirective

class NbTagInputDirective extends NbInputDirective implements AfterViewInit {}

[nbTagInput] directive connects input with a nb-tag-list component.
@stacked-example(Tag Input, tag/tag-input.component)
@additional-example(Tag Input with Autocomplete, tag/tag-input-with-autocomplete.component)
tag-list-tiny-tag-offset: tag-list-small-tag-offset: tag-list-medium-tag-offset: tag-list-large-tag-offset: tag-list-giant-tag-offset: tag-list-with-input-tiny-padding: tag-list-with-input-small-padding: tag-list-with-input-medium-padding: tag-list-with-input-large-padding: tag-list-with-input-giant-padding:

constructor

constructor(
    _hostElement: ElementRef<HTMLInputElement>,
    focusMonitor: NbFocusMonitor,
    renderer: Renderer2,
    zone: NgZone,
    statusService: NbStatusService
);

property focusMonitor

protected focusMonitor: NbFocusMonitor;

property keyDown$

protected readonly keyDown$: Subject<KeyboardEvent>;

property nbTagInputClass

readonly nbTagInputClass: boolean;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTagInputDirective,
    'input[nbTagInput]',
    ['nbTagInput'],
    { separatorKeys: { alias: 'separatorKeys'; required: false } },
    { tagAdd: 'tagAdd' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTagInputDirective, never>;

property renderer

protected renderer: Renderer2;

property separatorKeys

separatorKeys: number[];

Controls which keys should trigger tag add event.

property statusService

protected statusService: NbStatusService;

property tagAdd

tagAdd: EventEmitter<NbTagInputAddEvent>;

Emits when a tag need to be added.

property zone

protected zone: NgZone;

method isSeparatorKey

protected isSeparatorKey: (keyCode: number) => boolean;

method ngAfterViewInit

ngAfterViewInit: () => void;

class NbTagListComponent

class NbTagListComponent
    implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {}

nb-tag-list component displays a list of nb-tag components.
@stacked-example(Tag List Showcase, tag/tag-showcase.component)
tag-list-tiny-tag-offset: tag-list-small-tag-offset: tag-list-medium-tag-offset: tag-list-large-tag-offset: tag-list-giant-tag-offset: tag-list-with-input-tiny-padding: tag-list-with-input-small-padding: tag-list-with-input-medium-padding: tag-list-with-input-large-padding: tag-list-with-input-giant-padding: tag-list-with-input-rectangle-border-radius: tag-list-with-input-semi-round-border-radius: tag-list-with-input-round-border-radius:

constructor

constructor(
    hostElement: ElementRef<HTMLElement>,
    cd: ChangeDetectorRef,
    renderer: Renderer2,
    zone: NgZone,
    focusMonitor: NbFocusMonitor,
    activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService<NbTagComponent>,
    directionService: NbLayoutDirectionService,
    statusService: NbStatusService
);

property activeDescendantKeyManagerFactory

protected activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService<NbTagComponent>;

property activeTagId

activeTagId: string;

property autocompleteDirective

autocompleteDirective: NbAutocompleteDirective<any>;

property cd

protected cd: ChangeDetectorRef;

property destroy$

protected readonly destroy$: Subject<void>;

property directionService

protected directionService: NbLayoutDirectionService;

property focused

protected focused: boolean;

property focusMonitor

protected focusMonitor: NbFocusMonitor;

property hostElement

protected hostElement: ElementRef<HTMLElement>;

property keyDown$

protected readonly keyDown$: Subject<KeyboardEvent>;

property keyManager

protected keyManager: NbActiveDescendantKeyManager<NbTagComponent>;

property multiple

multiple: boolean;

property ngAcceptInputType_multiple

static ngAcceptInputType_multiple: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTagListComponent,
    'nb-tag-list',
    ['nbTagList'],
    {
        size: { alias: 'size'; required: false };
        tabIndex: { alias: 'tabIndex'; required: false };
        role: { alias: 'role'; required: false };
        multiple: { alias: 'multiple'; required: false };
    },
    { tagRemove: 'tagRemove' },
    ['tagInput', 'autocompleteDirective', 'tags'],
    ['nb-tag, input[nbTagInput]'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTagListComponent, never>;

property renderer

protected renderer: Renderer2;

property role

role: string;

property size

size: NbComponentSize;

Controls tags offset.

property statusService

protected statusService: NbStatusService;

property tabIndex

tabIndex: number;

property tagClick$

protected readonly tagClick$: Subject<NbTagComponent>;

property tagInput

tagInput: NbTagInputDirective;

property tagRemove

readonly tagRemove: EventEmitter<NbTagComponent>;

Emits when tag need to be removed (whether because of click on the remove button or when delete or backspace key pressed).

property tags

tags: QueryList<NbTagComponent>;

property zone

protected zone: NgZone;

method focusInput

protected focusInput: () => void;

method focusInputIfActive

protected focusInputIfActive: () => void;

method initKeyManager

protected initKeyManager: () => void;

method isBackspaceOrDelete

protected isBackspaceOrDelete: (keyCode: number) => boolean;

method listenActiveTagChange

protected listenActiveTagChange: () => void;

method listenInputKeyDown

protected listenInputKeyDown: () => void;

method listenListKeyDown

protected listenListKeyDown: () => void;

method listenNoTags

protected listenNoTags: () => void;

method listenTagClick

protected listenTagClick: () => void;

method listenTagDestroy

protected listenTagDestroy: () => void;

method listenTagRemove

protected listenTagRemove: () => void;

method listenToLayoutDirectionChange

protected listenToLayoutDirectionChange: () => void;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onFocusChange

protected onFocusChange: (isFocused: boolean) => void;

method setAutocompleteCustomHost

protected setAutocompleteCustomHost: () => void;

method toggleTag

protected toggleTag: (tagToToggle: NbTagComponent) => void;

class NbTagModule

class NbTagModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTagModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbTagModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbTagModule,
    [
        typeof i1.NbTagComponent,
        typeof i2.NbTagListComponent,
        typeof i3.NbTagInputDirective
    ],
    [any, typeof i5.NbIconModule],
    [
        typeof i1.NbTagComponent,
        typeof i2.NbTagListComponent,
        typeof i3.NbTagInputDirective
    ]
>;

class NbTemplatePortal

class NbTemplatePortal<T = any> extends TemplatePortal<T> {}

constructor

constructor(
    template: TemplateRef<T>,
    viewContainerRef?: ViewContainerRef,
    context?: {}
);

class NbThemeModule

class NbThemeModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbThemeModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbThemeModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<NbThemeModule, never, [any], never>;

method forRoot

static forRoot: (
    nbThemeOptions?: NbThemeOptions,
    nbJSThemes?: NbJSThemeOptions[],
    nbMediaBreakpoints?: NbMediaBreakpoint[],
    layoutDirection?: NbLayoutDirection
) => ModuleWithProviders<NbThemeModule>;

Main Theme Module
Parameter nbThemeOptions
Main theme options
Parameter nbJSThemes
List of JS Themes, will be merged with default themes
Parameter nbMediaBreakpoints
Available media breakpoints
Parameter layoutDirection
Layout direction
Returns
{ModuleWithProviders}

class NbThemeService

class NbThemeService {}

Main Nebular service. Includes various helper methods.

constructor

constructor(
    options: any,
    breakpointService: NbMediaBreakpointsService,
    jsThemesRegistry: NbJSThemesRegistry
);

property currentTheme

currentTheme: string;

property options

protected options: any;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbThemeService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbThemeService>;

method appendLayoutClass

appendLayoutClass: (className: string) => void;

Append a class to nb-layout
Parameter className

method changeTheme

changeTheme: (name: string) => void;

Change current application theme
Parameter name

method changeWindowWidth

changeWindowWidth: (width: number) => void;

method getJsTheme

getJsTheme: () => Observable<NbJSThemeOptions>;

Returns a theme object with variables (color/paddings/etc) on a theme change. Once subscribed - returns current theme.
Returns
{Observable}

method onAppendLayoutClass

onAppendLayoutClass: () => Observable<any>;

Triggered when a new class is added to nb-layout through appendLayoutClass method
Returns
{Observable}

method onMediaQueryChange

onMediaQueryChange: () => Observable<NbMediaBreakpoint[]>;

Triggers media query breakpoint change Returns a pair where the first item is previous media breakpoint and the second item is current breakpoit.
[{ name: 'xs', width: 0 }, { name: 'md', width: 768 }] // change from `xs` to `md`
Returns
{Observable<[NbMediaBreakpoint, NbMediaBreakpoint]>}

method onRemoveLayoutClass

onRemoveLayoutClass: () => Observable<any>;

Triggered when a class is removed from nb-layout through removeLayoutClass method
Returns
{Observable}

method onThemeChange

onThemeChange: () => Observable<any>;

Triggered when current theme is changed
Returns
{Observable}

method removeLayoutClass

removeLayoutClass: (className: string) => void;

Removes a class from nb-layout
Parameter className

class NbTimePickerCellComponent

class NbTimePickerCellComponent implements AfterViewInit, OnDestroy {}

constructor

constructor(ngZone: NgZone, platformService: NbPlatform);

property destroy$

protected destroy$: Subject<void>;

property ngZone

protected ngZone: NgZone;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTimePickerCellComponent,
    'nb-timepicker-cell',
    never,
    {
        selected: { alias: 'selected'; required: false };
        value: { alias: 'value'; required: false };
    },
    { select: 'select' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTimePickerCellComponent, never>;

property platformService

protected platformService: NbPlatform;

property select

select: EventEmitter<NbSelectedTimeModel>;

property selected

selected: boolean;

property selectedChange$

protected selectedChange$: Subject<boolean>;

property unselected$

protected unselected$: any;

property value

value: string;

property valueContainerElement

valueContainerElement: ElementRef;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onClick

onClick: () => void;

method scrollToElement

protected scrollToElement: () => void;

class NbTimePickerComponent

class NbTimePickerComponent<D> implements OnChanges {}

The TimePicker components itself. Provides a proxy to TimePicker options as well as custom picker options.

constructor

constructor(
    config: NbTimePickerConfig,
    platformService: NbPlatform,
    locale: string,
    cd: ChangeDetectorRef,
    calendarTimeModelService: NbCalendarTimeModelService<D>,
    dateService: NbDateService<D>
);

property ampmText

ampmText: string;

property applyButtonText

applyButtonText: string;

property blur

readonly blur: Observable<void>;

Emits when timepicker looses focus.

property blur$

protected blur$: Subject<void>;

property calendarTimeModelService

protected calendarTimeModelService: NbCalendarTimeModelService<D>;

property cd

cd: ChangeDetectorRef;

property computedTimeFormat

computedTimeFormat: string;

property config

protected config: NbTimePickerConfig;

property currentTimeButtonText

currentTimeButtonText: string;

property date

date: {};

property dateService

protected dateService: NbDateService<D>;

property dayPeriodColumnOptions

readonly dayPeriodColumnOptions: NbDayPeriod[];

property fullTimeOptions

fullTimeOptions: D[];

property hostRef

hostRef: ElementRef;

property hoursColumnOptions

hoursColumnOptions: NbTimePartOption[];

property hoursText

hoursText: string;

property isAM

isAM: boolean;

property minutesColumnOptions

minutesColumnOptions: NbTimePartOption[];

property minutesText

minutesText: string;

property ngAcceptInputType_showAmPmLabel

static ngAcceptInputType_showAmPmLabel: NbBooleanInput;

property ngAcceptInputType_singleColumn

static ngAcceptInputType_singleColumn: NbBooleanInput;

property ngAcceptInputType_twelveHoursFormat

static ngAcceptInputType_twelveHoursFormat: NbBooleanInput;

property ngAcceptInputType_withSeconds

static ngAcceptInputType_withSeconds: NbBooleanInput;

property onSelectTime

onSelectTime: EventEmitter<NbSelectedTimePayload<D>>;

Emits date when selected.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTimePickerComponent<any>,
    'nb-timepicker',
    ['nbTimepicker'],
    {
        timeFormat: { alias: 'timeFormat'; required: false };
        twelveHoursFormat: { alias: 'twelveHoursFormat'; required: false };
        showAmPmLabel: { alias: 'showAmPmLabel'; required: false };
        withSeconds: { alias: 'withSeconds'; required: false };
        singleColumn: { alias: 'singleColumn'; required: false };
        step: { alias: 'step'; required: false };
        date: { alias: 'date'; required: false };
        showFooter: { alias: 'showFooter'; required: false };
        applyButtonText: { alias: 'applyButtonText'; required: false };
        hoursText: { alias: 'hoursText'; required: false };
        minutesText: { alias: 'minutesText'; required: false };
        secondsText: { alias: 'secondsText'; required: false };
        ampmText: { alias: 'ampmText'; required: false };
        currentTimeButtonText: {
            alias: 'currentTimeButtonText';
            required: false;
        };
    },
    { onSelectTime: 'onSelectTime' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTimePickerComponent<any>, never>;

property platformService

protected platformService: NbPlatform;

property portal

portal: NbPortalDirective;

property secondsColumnOptions

secondsColumnOptions: NbTimePartOption[];

property secondsText

secondsText: string;

property showAmPmLabel

showAmPmLabel: boolean;

Defines should show am/pm label if twelveHoursFormat enabled.

property showFooter

showFooter: boolean;

In timepicker value should be always true In calendar-with-time.component should set to false @docs-private

property singleColumn

singleColumn: boolean;

Show timepicker values in one column with 60 minutes step by default.

property step

step: number;

property timeFormat

timeFormat: string;

Defines time format string.

property timepickerFormatChange$

timepickerFormatChange$: Subject<void>;

property twelveHoursFormat

twelveHoursFormat: boolean;

Defines 12 hours format .

property withSeconds

withSeconds: boolean;

Show seconds in timepicker. Ignored when singleColumn is true

method attach

attach: (hostRef: ElementRef) => void;

method buildColumnOptions

protected buildColumnOptions: () => void;

method buildTimeFormat

buildTimeFormat: () => string;

@docs-private

method changeDayPeriod

changeDayPeriod: (dayPeriodToSet: NbDayPeriod) => void;

method generateHours

protected generateHours: () => NbTimePartOption[];

method generateMinutesOrSeconds

protected generateMinutesOrSeconds: () => NbTimePartOption[];

method getFullTimeString

getFullTimeString: (item: D) => string;

method initFromConfig

protected initFromConfig: (config: NbTimePickerConfig) => void;

method isFirefox

isFirefox: () => boolean;

@docs-private

method isSelectedDayPeriod

isSelectedDayPeriod: (dayPeriod: NbDayPeriod) => boolean;

method isSelectedFullTimeValue

isSelectedFullTimeValue: (value: D) => boolean;

method isSelectedHour

isSelectedHour: (val: number) => boolean;

method isSelectedMinute

isSelectedMinute: (val: number) => boolean;

method isSelectedSecond

isSelectedSecond: (val: number) => boolean;

method ngOnChanges

ngOnChanges: ({
    step,
    twelveHoursFormat,
    withSeconds,
    singleColumn,
}: SimpleChanges) => void;

method saveValue

saveValue: () => void;

method selectFullTime

selectFullTime: (value: D) => void;

method setCurrentTime

setCurrentTime: () => void;

method setHost

setHost: (hostRef: ElementRef) => void;

method setHour

setHour: (value: number) => void;

method setMinute

setMinute: (value: number) => void;

method setSecond

setSecond: (value: number) => void;

method setupTimeFormat

protected setupTimeFormat: () => string;

method showSeconds

showSeconds: () => boolean;

method trackByDayPeriod

trackByDayPeriod: (index: any, item: NbDayPeriod) => string;

method trackBySingleColumnValue

trackBySingleColumnValue: (index: any, item: D) => number;

method trackByTimeValues

trackByTimeValues: (index: any, item: NbTimePartOption) => number;

method updateValue

updateValue: (date: D) => void;

class NbTimePickerDirective

class NbTimePickerDirective<D> implements AfterViewInit, ControlValueAccessor {}

The NbTimePickerDirective is form control that gives you ability to select a time. The timepicker is shown when input receives a focus event.
<input [nbTimepicker]="timepicker"> <nb-timepicker #timepicker></nb-timepicker>
@stacked-example(Showcase, timepicker/timepicker-showcase.component)
### Installation
Import NbTimepickerModule.forRoot() to your root module.
@NgModule({ imports: [ // ... NbTimepickerModule.forRoot(), ], }) export class AppModule { }
And NbTimepickerModule to your feature module.
@NgModule({ imports: [ // ... NbTimepickerModule, ], }) export class PageModule { }
Note Timepicker uses native Date object by default, which doesn't support parsing by custom format. According to the ECMAScript specification, the only supported format is a format described by ISO 8061 standard. This standard requires date part to be included in the date string, meaning you have to type a date+time in the input. We highly recommend you to use NbDateFnsDateModule or NbMomentDateModule to be able to support time only strings in the timepicker inputs. These modules use date-fns and moment date libraries, which provide capabilities to parse time only strings. See "Formatting Issue" at Date picker docs for installation instructions.
### Usage
To show seconds column along with hours and minutes use withSeconds input
<input [nbTimepicker]="timepicker"> <nb-timepicker #timepicker withSeconds></nb-timepicker>
@stacked-example(Time picker with seconds, timepicker/timepicker-with-seconds.component)
To force timepicker work in 12 hours format, use twelveHoursFormat input. By default, timepicker choose 12 or 24 formats based on application locale standards
<input [nbTimepicker]="timepicker" twelveHoursFormat> <nb-timepicker #timepicker></nb-timepicker>
@stacked-example(Twelve hours format showcase, timepicker/timepicker-twelve-hours-format.component)
A single column picker with options value as time and minute, so users won’t be able to pick hours and minutes individually. You can control options minutes offset via step input, e.g.: 11:00, 11:20, 11:40...'
@stacked-example(Single column, timepicker/timepicker-single-column.component)
Timepicker support forms and reactive forms API so you can provide value using formControl and ngModel directives @stacked-example(Form control, timepicker/timepicker-form-control.component)
<input [nbTimepicker]="timepicker" twelveHoursFormat> <nb-timepicker #timepicke [formControl]="formControl">
@stacked-example(NgModel, timepicker/timepicker-ng-model.component)
<input [nbTimepicker]="timepicker" twelveHoursFormat> <nb-timepicker #timepicke [ngModel]="date">
You can provide localized versions of the timepicker text via the localization property of the config object passed to the forRoot or forChild methods of the NbTimepickerModule:
@NgModule({ imports: [ // ... NbTimepickerModule.forRoot({ localization: { hoursText: 'Hr', minutesText: 'Min', secondsText: 'Sec', ampmText: 'Am/Pm', } }), ], }) export class AppModule { }
timepicker-cell-text-color: timepicker-cell-hover-background-color: timepicker-cell-hover-text-color: timepicker-cell-focus-background-color: timepicker-cell-focus-text-color: timepicker-cell-active-background-color: timepicker-cell-active-text-color: timepicker-cell-text-font-size: timepicker-cell-text-font-family: timepicker-cell-text-line-height: timepicker-cell-text-font-weight: timepicker-cell-height: timepicker-header-cell-text-color: timepicker-header-cell-text-font-size: timepicker-header-cell-text-font-family: timepicker-header-cell-height: timepicker-header-cell-text-line-height: timepicker-header-cell-text-font-weight: timepicker-border-color: timepicker-border-style: timepicker-border-width: timepicker-scrollbar-color: timepicker-scrollbar-background-color: timepicker-scrollbar-width: timepicker-single-column-width: timepicker-multiple-column-width: timepicker-title-height: timepicker-title-padding: timepicker-container-width: timepicker-container-height:

constructor

constructor(
    document: any,
    positionBuilder: NbPositionBuilderService,
    hostRef: ElementRef,
    triggerStrategyBuilder: NbTriggerStrategyBuilderService,
    overlay: NbOverlayService,
    cd: ChangeDetectorRef,
    calendarTimeModelService: NbCalendarTimeModelService<D>,
    dateService: NbDateService<D>,
    renderer: Renderer2,
    placeholder: string
);

property calendarTimeModelService

protected calendarTimeModelService: NbCalendarTimeModelService<D>;

property cd

protected cd: ChangeDetectorRef;

property dateService

protected dateService: NbDateService<D>;

property destroy$

protected destroy$: Subject<void>;

property document

protected document: any;

property hostRef

protected hostRef: ElementRef;

property input

readonly input: HTMLInputElement;

Returns html input element. @docs-private

property inputValue

inputValue: string;

Returns host input value. @docs-private

property isClosed

readonly isClosed: boolean;

Determines is timepicker overlay closed. @docs-private

property isOpen

readonly isOpen: boolean;

Determines is timepicker overlay opened. @docs-private

property lastInputValue

protected lastInputValue: string;

String representation of latest selected date. Updated when value is updated programmatically (writeValue), via timepicker (subscribeOnApplyClick) or via input field (handleInputChange) @docs-private

property onChange

protected onChange: (value: D) => void;

property onTouched

protected onTouched: () => void;

property overlay

protected overlay: NbOverlayService;

property overlayOffset

overlayOffset: number;

Time picker overlay offset.

property overlayRef

protected overlayRef: OverlayRef;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTimePickerDirective<any>,
    'input[nbTimepicker]',
    never,
    {
        timepicker: { alias: 'nbTimepicker'; required: false };
        overlayOffset: { alias: 'overlayOffset'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbTimePickerDirective<any>,
    [
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        { attribute: 'placeholder' }
    ]
>;

property pickerInputsChangedSubscription

protected pickerInputsChangedSubscription: any;

property placeholder

protected placeholder: string;

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

property positionStrategy

protected positionStrategy: NbAdjustableConnectedPositionStrategy;

Positioning strategy used by overlay. @docs-private

property renderer

protected renderer: Renderer2;

property timepicker

timepicker: NbTimePickerComponent<D>;

Provides timepicker component.

property triggerStrategy

protected triggerStrategy: NbTriggerStrategy;

Trigger strategy used by overlay. @docs-private

property triggerStrategyBuilder

protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;

method attachToOverlay

protected attachToOverlay: () => void;

Attaches picker to the timepicker portal. @docs-private

method createOverlay

protected createOverlay: () => void;

method createPositionStrategy

protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;

method createScrollStrategy

protected createScrollStrategy: () => ScrollStrategy;

method createTriggerStrategy

protected createTriggerStrategy: () => NbTriggerStrategy;

method getContainer

protected getContainer: () => ComponentRef<any>;

method handleInputChange

protected handleInputChange: (value: string) => void;

Parses input value and write if it isn't null. @docs-private

method hide

hide: () => void;

method initOverlay

protected initOverlay: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method parseNativeDateString

protected parseNativeDateString: (value: string) => string;

method registerOnChange

registerOnChange: (fn: (value: any) => {}) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method setupTimepicker

setupTimepicker: () => void;

method show

show: () => void;

method subscribeOnApplyClick

protected subscribeOnApplyClick: () => void;

method subscribeOnInputChange

protected subscribeOnInputChange: () => void;

method subscribeOnTriggers

protected subscribeOnTriggers: () => void;

method subscribeToBlur

protected subscribeToBlur: () => void;

method updateValue

protected updateValue: (value: D) => void;

method writeValue

writeValue: (value: D) => void;

class NbTimepickerModule

class NbTimepickerModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTimepickerModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbTimepickerModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbTimepickerModule,
    [
        typeof i1.NbTimePickerComponent,
        typeof i2.NbTimePickerCellComponent,
        typeof i3.NbTimePickerDirective
    ],
    [
        any,
        typeof i5.NbOverlayModule,
        typeof i6.NbListModule,
        typeof i7.NbCardModule,
        typeof i8.NbCalendarKitModule
    ],
    [
        typeof i1.NbTimePickerComponent,
        typeof i2.NbTimePickerCellComponent,
        typeof i3.NbTimePickerDirective
    ]
>;

method forChild

static forChild: (
    config?: NbTimePickerConfig
) => ModuleWithProviders<NbTimepickerModule>;

method forRoot

static forRoot: (
    config?: NbTimePickerConfig
) => ModuleWithProviders<NbTimepickerModule>;

class NbToast

class NbToast {}

property config

config: NbToastrConfig;

property message

message: string;

property title

title: string;

class NbToastComponent

class NbToastComponent implements OnInit, OnDestroy {}

The NbToastComponent is responsible for rendering each toast with appropriate styles.
toastr-border-style: toastr-border-width: toastr-border-radius: toastr-padding: toastr-shadow: toastr-text-font-family: toastr-text-font-size: toastr-text-font-weight: toastr-text-line-height: toastr-title-text-font-family: toastr-title-text-font-size: toastr-title-text-font-weight: toastr-title-text-line-height: toastr-basic-background-color: toastr-basic-border-color: toastr-basic-text-color: toastr-icon-basic-background-color: toastr-icon-basic-color: toastr-destroyable-basic-hover-background-color: toastr-destroyable-basic-hover-border-color: toastr-primary-background-color: toastr-primary-border-color: toastr-primary-text-color: toastr-icon-primary-background-color: toastr-icon-primary-color: toastr-destroyable-primary-hover-background-color: toastr-destroyable-primary-hover-border-color: toastr-success-background-color: toastr-success-border-color: toastr-success-text-color: toastr-icon-success-background-color: toastr-icon-success-color: toastr-destroyable-success-hover-background-color: toastr-destroyable-success-hover-border-color: toastr-info-background-color: toastr-info-border-color: toastr-info-text-color: toastr-icon-info-background-color: toastr-icon-info-color: toastr-destroyable-info-hover-background-color: toastr-destroyable-info-hover-border-color: toastr-warning-background-color: toastr-warning-border-color: toastr-warning-text-color: toastr-icon-warning-background-color: toastr-icon-warning-color: toastr-destroyable-warning-hover-background-color: toastr-destroyable-warning-hover-border-color: toastr-danger-background-color: toastr-danger-border-color: toastr-danger-text-color: toastr-icon-danger-background-color: toastr-icon-danger-color: toastr-destroyable-danger-hover-background-color: toastr-destroyable-danger-hover-border-color: toastr-control-background-color: toastr-control-border-color: toastr-control-text-color: toastr-icon-control-background-color: toastr-icon-control-color: toastr-destroyable-control-hover-background-color: toastr-destroyable-control-hover-border-color:

constructor

constructor(
    renderer: Renderer2,
    elementRef: ElementRef,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property control

readonly control: boolean;

property customIcon

readonly customIcon: boolean;

property danger

readonly danger: boolean;

property destroy

destroy: EventEmitter<void>;

property destroyByClick

readonly destroyByClick: boolean;

property elementRef

protected elementRef: ElementRef;

property hasIcon

readonly hasIcon: boolean;

property icon

readonly icon: string | NbIconConfig;

property info

readonly info: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbToastComponent,
    'nb-toast',
    never,
    { toast: { alias: 'toast'; required: false } },
    { destroy: 'destroy'; toastClick: 'toastClick' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToastComponent, never>;

property primary

readonly primary: boolean;

property renderer

protected renderer: Renderer2;

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property toast

toast: NbToast;

property toastClick

toastClick: EventEmitter<void>;

property warning

readonly warning: boolean;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onClick

onClick: () => void;

class NbToastContainer

class NbToastContainer {}

constructor

constructor(
    position: NbGlobalPosition,
    containerRef: ComponentRef<NbToastrContainerComponent>,
    positionHelper: NbPositionHelper
);

property containerRef

protected containerRef: ComponentRef<NbToastrContainerComponent>;

property nativeElement

readonly nativeElement: any;

property position

protected position: NbGlobalPosition;

property positionHelper

protected positionHelper: NbPositionHelper;

property prevToast

protected prevToast: NbToast;

property toastDuplicateCompareFunc

protected toastDuplicateCompareFunc: (t1: NbToast, t2: NbToast) => boolean;

property toasts

protected toasts: NbToast[];

method attach

attach: (toast: NbToast) => NbToastRef;

method attachToast

protected attachToast: (toast: NbToast) => NbToastComponent;

method attachToBottom

protected attachToBottom: (toast: NbToast) => NbToastComponent;

method attachToTop

protected attachToTop: (toast: NbToast) => NbToastComponent;

method destroy

destroy: (toast: NbToast) => void;

method isDuplicate

protected isDuplicate: (toast: NbToast) => boolean;

method isDuplicateAmongAll

protected isDuplicateAmongAll: (toast: NbToast) => boolean;

method isDuplicatePrevious

protected isDuplicatePrevious: (toast: NbToast) => boolean;

method removeToastIfLimitReached

protected removeToastIfLimitReached: (toast: NbToast) => void;

method setDestroyTimeout

protected setDestroyTimeout: (toast: NbToast) => void;

method subscribeOnClick

protected subscribeOnClick: (
    toastComponent: NbToastComponent,
    toast: NbToast
) => void;

method updateContainer

protected updateContainer: () => void;

class NbToastrConfig

class NbToastrConfig {}

The NbToastrConfig class describes configuration of the NbToastrService.show and global toastr configuration.

constructor

constructor(config: Partial<NbToastrConfig>);

property destroyByClick

destroyByClick: boolean;

Destroy by click means you can hide the toast by clicking it.

property duplicatesBehaviour

duplicatesBehaviour: NbDuplicateToastBehaviour;

Determines the how to treat duplicates.

property duration

duration: number;

Duration is timeout between toast appears and disappears.

property hasIcon

hasIcon: boolean;

Determines render icon or not.

property icon

icon: string | NbIconConfig;

Icon name or icon config object that can be provided to render custom icon.

property icons

protected icons: IconToClassMap;

Toast status icon-class mapping.

property limit

limit?: number;

property position

position: NbGlobalPosition;

Determines where on the screen toast have to be rendered.

property preventDuplicates

preventDuplicates: boolean;

If preventDuplicates is true then the toast with the same title, message and status will not be rendered. Find duplicates behaviour determined by preventDuplicates. The default previous duplicate behaviour is used.

property status

status: string;

Status chooses color scheme for the toast.

property toastClass

toastClass: string;

Class to be applied to the toast.

method patchIcon

protected patchIcon: (config: Partial<NbToastrConfig>) => void;

class NbToastrContainerComponent

class NbToastrContainerComponent implements OnInit, OnDestroy {}

constructor

constructor(
    layoutDirection: NbLayoutDirectionService,
    positionHelper: NbPositionHelper
);

property content

content: NbToast[];

property context

context: Object;

property destroy$

protected destroy$: Subject<void>;

property fadeIn

fadeIn: any;

property layoutDirection

protected layoutDirection: NbLayoutDirectionService;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbToastrContainerComponent,
    'nb-toastr-container',
    never,
    {
        content: { alias: 'content'; required: false };
        context: { alias: 'context'; required: false };
        position: { alias: 'position'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToastrContainerComponent, never>;

property position

position: NbGlobalPosition;

property positionHelper

protected positionHelper: NbPositionHelper;

property toasts

toasts: QueryList<NbToastComponent>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onDirectionChange

protected onDirectionChange: () => void;

class NbToastrContainerRegistry

class NbToastrContainerRegistry {}

constructor

constructor(
    overlay: NbOverlayService,
    positionBuilder: NbPositionBuilderService,
    positionHelper: NbPositionHelper,
    cfr: ComponentFactoryResolver,
    document: any
);

property cfr

protected cfr: ComponentFactoryResolver;

property document

protected document: any;

property overlay

protected overlay: NbOverlayService;

property overlays

protected overlays: Map<NbGlobalPosition, NbToastrOverlayWithContainer>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToastrContainerRegistry, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbToastrContainerRegistry>;

property positionBuilder

protected positionBuilder: NbPositionBuilderService;

property positionHelper

protected positionHelper: NbPositionHelper;

method addClassToOverlayHost

protected addClassToOverlayHost: (overlayRef: OverlayRef) => void;

method createContainer

protected createContainer: (
    position: NbGlobalLogicalPosition
) => NbToastrOverlayWithContainer;

method existsInDom

protected existsInDom: (toastContainer: NbToastContainer) => boolean;

method get

get: (position: NbGlobalPosition) => NbToastContainer;

method instantiateContainer

protected instantiateContainer: (position: NbGlobalLogicalPosition) => void;

class NbToastRef

class NbToastRef {}

constructor

constructor(toastContainer: NbToastContainer, toast: NbToast);

property toastInstance

toastInstance: NbToastComponent;

method close

close: () => void;

method onClick

onClick: () => Observable<void>;

method onClose

onClose: () => Observable<void>;

class NbToastrModule

class NbToastrModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToastrModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbToastrModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbToastrModule,
    [typeof i1.NbToastrContainerComponent, typeof i2.NbToastComponent],
    [
        typeof i3.NbSharedModule,
        typeof i4.NbOverlayModule,
        typeof i5.NbIconModule
    ],
    never
>;

method forRoot

static forRoot: (
    toastrConfig?: Partial<NbToastrConfig>
) => ModuleWithProviders<NbToastrModule>;

class NbToastrService

class NbToastrService {}

The NbToastrService provides a capability to build toast notifications.
@stacked-example(Showcase, toastr/toastr-showcase.component)
NbToastrService.show(message, title, config) accepts three params, title and config are optional.
### Installation
Import NbToastrModule.forRoot() to your app module.
@NgModule({ imports: [ // ... NbToastrModule.forRoot(config), ], }) export class AppModule { }
### Usage
Calling NbToastrService.show(...) will render new toast and return NbToastrRef with help of which you may close newly created toast by calling close method.
const toastRef: NbToastRef = this.toastrService.show(...); toastRef.close();
Config accepts following options:
position - determines where on the screen toast will be rendered. Default is top-end.
@stacked-example(Position, toastr/toastr-positions.component)
status - coloring and icon of the toast. Default is basic.
@stacked-example(Status, toastr/toastr-statuses.component)
duration - the time after which the toast will be destroyed. 0 means endless toast, that may be destroyed by click only. Default is 3000 ms.
@stacked-example(Duration, toastr/toastr-duration.component)
destroyByClick - provides a capability to destroy toast by click. Default is true.
@stacked-example(Destroy by click, toastr/toastr-destroy-by-click.component)
preventDuplicates - don't create new toast if it has the same title, message and status. Default is false.
@stacked-example(Prevent duplicates, toastr/toastr-prevent-duplicates.component)
duplicatesBehaviour - determines how to treat the toasts duplication. Compare with the previous message previous or with all visible messages all.
@stacked-example(Prevent duplicates behaviour , toastr/toastr-prevent-duplicates-behaviour.component)
limit - the number of visible toasts in the toast container. The number of toasts is unlimited by default.
@stacked-example(Prevent duplicates behaviour , toastr/toastr-limit.component)
hasIcon - if true then render toast icon. icon - you can pass icon class that will be applied into the toast.
@stacked-example(Has icon, toastr/toastr-icon.component)

constructor

constructor(
    globalConfig: NbToastrConfig,
    containerRegistry: NbToastrContainerRegistry
);

property containerRegistry

protected containerRegistry: NbToastrContainerRegistry;

property globalConfig

protected globalConfig: NbToastrConfig;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToastrService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbToastrService>;

method control

control: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows control toast with message, title and user config.

method danger

danger: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows danger toast with message, title and user config.

method default

default: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows default toast with message, title and user config.

method info

info: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows info toast with message, title and user config.

method primary

primary: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows primary toast with message, title and user config.

method show

show: (
    message: any,
    title?: any,
    userConfig?: Partial<NbToastrConfig>
) => NbToastRef;

Shows toast with message, title and user config.

method success

success: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows success toast with message, title and user config.

method warning

warning: (
    message: any,
    title?: any,
    config?: Partial<NbToastrConfig>
) => NbToastRef;

Shows warning toast with message, title and user config.

class NbToggleComponent

class NbToggleComponent
    implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {}

Toggle is a control representing on and off states.
@stacked-example(Showcase, toggle/toggle-showcase.component)
### Installation
Import NbToggleComponent to your feature module.
@NgModule({ imports: [ // ... NbToggleModule, ], }) export class PageModule { }
### Usage
Toggle may have one of the following statuses: basic, primary, success, warning, danger, info, control
@stacked-example(Toggle status, toggle/toggle-status.component)
Toggle can be disabled via disabled input.
@stacked-example(Disabled Toggles, toggle/toggle-disabled.component)
Toggle may have a label with following positions: left, right, start, end (default)
@stacked-example(Toggles With Labels, toggle/toggle-label-position.component.ts)
You can set control state via checked binding:
<nb-toggle [(checked)]="checked"></nb-toggle>
Or it could be set via reactive forms or ngModel bindings:
@stacked-example(Toggle form binding, toggle/toggle-form.component)
toggle-height: toggle-width: toggle-border-width: toggle-border-radius: toggle-outline-width: toggle-outline-color: toggle-switcher-size: toggle-switcher-icon-size: toggle-text-font-family: toggle-text-font-size: toggle-text-font-weight: toggle-text-line-height: toggle-cursor: toggle-disabled-cursor: toggle-basic-text-color: toggle-basic-background-color: toggle-basic-border-color: toggle-basic-checked-background-color: toggle-basic-checked-border-color: toggle-basic-checked-switcher-background-color: toggle-basic-checked-switcher-checkmark-color: toggle-basic-focus-background-color: toggle-basic-focus-border-color: toggle-basic-focus-checked-background-color: toggle-basic-focus-checked-border-color: toggle-basic-hover-background-color: toggle-basic-hover-border-color: toggle-basic-hover-checked-background-color: toggle-basic-hover-checked-border-color: toggle-basic-active-background-color: toggle-basic-active-border-color: toggle-basic-active-checked-background-color: toggle-basic-active-checked-border-color: toggle-basic-disabled-background-color: toggle-basic-disabled-border-color: toggle-basic-disabled-switcher-background-color: toggle-basic-disabled-checked-switcher-checkmark-color: toggle-basic-disabled-text-color: toggle-primary-text-color: toggle-primary-background-color: toggle-primary-border-color: toggle-primary-checked-background-color: toggle-primary-checked-border-color: toggle-primary-checked-switcher-background-color: toggle-primary-checked-switcher-checkmark-color: toggle-primary-focus-background-color: toggle-primary-focus-border-color: toggle-primary-focus-checked-background-color: toggle-primary-focus-checked-border-color: toggle-primary-hover-background-color: toggle-primary-hover-border-color: toggle-primary-hover-checked-background-color: toggle-primary-hover-checked-border-color: toggle-primary-active-background-color: toggle-primary-active-border-color: toggle-primary-active-checked-background-color: toggle-primary-active-checked-border-color: toggle-primary-disabled-background-color: toggle-primary-disabled-border-color: toggle-primary-disabled-switcher-background-color: toggle-primary-disabled-checked-switcher-checkmark-color: toggle-primary-disabled-text-color: toggle-success-text-color: toggle-success-background-color: toggle-success-border-color: toggle-success-checked-background-color: toggle-success-checked-border-color: toggle-success-checked-switcher-background-color: toggle-success-checked-switcher-checkmark-color: toggle-success-focus-background-color: toggle-success-focus-border-color: toggle-success-focus-checked-background-color: toggle-success-focus-checked-border-color: toggle-success-hover-background-color: toggle-success-hover-border-color: toggle-success-hover-checked-background-color: toggle-success-hover-checked-border-color: toggle-success-active-background-color: toggle-success-active-border-color: toggle-success-active-checked-background-color: toggle-success-active-checked-border-color: toggle-success-disabled-background-color: toggle-success-disabled-border-color: toggle-success-disabled-switcher-background-color: toggle-success-disabled-checked-switcher-checkmark-color: toggle-success-disabled-text-color: toggle-info-text-color: toggle-info-background-color: toggle-info-border-color: toggle-info-checked-background-color: toggle-info-checked-border-color: toggle-info-checked-switcher-background-color: toggle-info-checked-switcher-checkmark-color: toggle-info-focus-background-color: toggle-info-focus-border-color: toggle-info-focus-checked-background-color: toggle-info-focus-checked-border-color: toggle-info-hover-background-color: toggle-info-hover-border-color: toggle-info-hover-checked-background-color: toggle-info-hover-checked-border-color: toggle-info-active-background-color: toggle-info-active-border-color: toggle-info-active-checked-background-color: toggle-info-active-checked-border-color: toggle-info-disabled-background-color: toggle-info-disabled-border-color: toggle-info-disabled-switcher-background-color: toggle-info-disabled-checked-switcher-checkmark-color: toggle-info-disabled-text-color: toggle-warning-text-color: toggle-warning-background-color: toggle-warning-border-color: toggle-warning-checked-background-color: toggle-warning-checked-border-color: toggle-warning-checked-switcher-background-color: toggle-warning-checked-switcher-checkmark-color: toggle-warning-focus-background-color: toggle-warning-focus-border-color: toggle-warning-focus-checked-background-color: toggle-warning-focus-checked-border-color: toggle-warning-hover-background-color: toggle-warning-hover-border-color: toggle-warning-hover-checked-background-color: toggle-warning-hover-checked-border-color: toggle-warning-active-background-color: toggle-warning-active-border-color: toggle-warning-active-checked-background-color: toggle-warning-active-checked-border-color: toggle-warning-disabled-background-color: toggle-warning-disabled-border-color: toggle-warning-disabled-switcher-background-color: toggle-warning-disabled-checked-switcher-checkmark-color: toggle-warning-disabled-text-color: toggle-danger-text-color: toggle-danger-background-color: toggle-danger-border-color: toggle-danger-checked-background-color: toggle-danger-checked-border-color: toggle-danger-checked-switcher-background-color: toggle-danger-checked-switcher-checkmark-color: toggle-danger-focus-background-color: toggle-danger-focus-border-color: toggle-danger-focus-checked-background-color: toggle-danger-focus-checked-border-color: toggle-danger-hover-background-color: toggle-danger-hover-border-color: toggle-danger-hover-checked-background-color: toggle-danger-hover-checked-border-color: toggle-danger-active-background-color: toggle-danger-active-border-color: toggle-danger-active-checked-background-color: toggle-danger-active-checked-border-color: toggle-danger-disabled-background-color: toggle-danger-disabled-border-color: toggle-danger-disabled-switcher-background-color: toggle-danger-disabled-checked-switcher-checkmark-color: toggle-danger-disabled-text-color: toggle-control-text-color: toggle-control-background-color: toggle-control-border-color: toggle-control-checked-background-color: toggle-control-checked-border-color: toggle-control-checked-switcher-background-color: toggle-control-checked-switcher-checkmark-color: toggle-control-focus-background-color: toggle-control-focus-border-color: toggle-control-focus-checked-background-color: toggle-control-focus-checked-border-color: toggle-control-hover-background-color: toggle-control-hover-border-color: toggle-control-hover-checked-background-color: toggle-control-hover-checked-border-color: toggle-control-active-background-color: toggle-control-active-border-color: toggle-control-active-checked-background-color: toggle-control-active-checked-border-color: toggle-control-disabled-background-color: toggle-control-disabled-border-color: toggle-control-disabled-switcher-background-color: toggle-control-disabled-checked-switcher-checkmark-color: toggle-control-disabled-text-color:

constructor

constructor(
    changeDetector: ChangeDetectorRef,
    layoutDirection: NbLayoutDirectionService,
    renderer: Renderer2,
    hostElement: ElementRef<HTMLElement>,
    zone: NgZone,
    statusService: NbStatusService
);

property additionalClasses

readonly additionalClasses: string[];

property basic

readonly basic: boolean;

property checked

checked: boolean;

Toggle checked {boolean}

property checkedChange

checkedChange: EventEmitter<boolean>;

Output when checked state is changed by a user EventEmitter

property control

readonly control: boolean;

property danger

readonly danger: boolean;

property disabled

disabled: boolean;

Controls input disabled state

property info

readonly info: boolean;

property labelEnd

readonly labelEnd: boolean;

property labelLeft

readonly labelLeft: boolean;

property labelPosition

labelPosition: 'left' | 'right' | 'start' | 'end';

Toggle label position. Possible values are: left, right, start, end (default)

property labelRight

readonly labelRight: boolean;

property labelStart

readonly labelStart: boolean;

property ngAcceptInputType_checked

static ngAcceptInputType_checked: NbBooleanInput;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: NbBooleanInput;

property onChange

onChange: any;

property onTouched

onTouched: any;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbToggleComponent,
    'nb-toggle',
    never,
    {
        checked: { alias: 'checked'; required: false };
        disabled: { alias: 'disabled'; required: false };
        status: { alias: 'status'; required: false };
        labelPosition: { alias: 'labelPosition'; required: false };
    },
    { checkedChange: 'checkedChange' },
    never,
    ['*'],
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToggleComponent, never>;

property primary

readonly primary: boolean;

property status

status: string;

Toggle status. Possible values are: basic, primary, success, warning, danger, info, control.

property statusService

protected statusService: NbStatusService;

property success

readonly success: boolean;

property warning

readonly warning: boolean;

method checkState

checkState: () => string;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onInputClick

onInputClick: (event: Event) => void;

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method setDisabledState

setDisabledState: (val: boolean) => void;

method updateValue

updateValue: (event: Event) => void;

method writeValue

writeValue: (val: any) => void;

class NbToggleModule

class NbToggleModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbToggleModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbToggleModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbToggleModule,
    [typeof i1.NbToggleComponent],
    [any, typeof i3.NbIconModule],
    [typeof i1.NbToggleComponent]
>;

class NbTooltipComponent

class NbTooltipComponent implements NbRenderableContainer {}

Tooltip container. Renders provided tooltip inside.
tooltip-background-color: tooltip-border-color: tooltip-border-style: tooltip-border-width: tooltip-border-radius: tooltip-padding: tooltip-text-color: tooltip-text-font-family: tooltip-text-font-size: tooltip-text-font-weight: tooltip-text-line-height: tooltip-icon-height: tooltip-icon-width: tooltip-max-width: tooltip-basic-background-color: tooltip-basic-border-color: tooltip-basic-text-color: tooltip-primary-background-color: tooltip-primary-border-color: tooltip-primary-text-color: tooltip-info-background-color: tooltip-info-border-color: tooltip-info-text-color: tooltip-success-background-color: tooltip-success-border-color: tooltip-success-text-color: tooltip-warning-background-color: tooltip-warning-border-color: tooltip-warning-text-color: tooltip-danger-background-color: tooltip-danger-border-color: tooltip-danger-text-color: tooltip-control-background-color: tooltip-control-border-color: tooltip-control-text-color: tooltip-shadow:

constructor

constructor(statusService: NbStatusService);

property binding

readonly binding: string;

property content

content: string;

property context

context: { icon?: string | NbIconConfig; status?: NbComponentOrCustomStatus };

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTooltipComponent,
    'nb-tooltip',
    never,
    {
        content: { alias: 'content'; required: false };
        position: { alias: 'position'; required: false };
        context: { alias: 'context'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTooltipComponent, never>;

property position

position: NbPosition;

Popover position relatively host element.

property show

readonly show: boolean;

property statusClass

readonly statusClass: string;

property statusService

protected statusService: NbStatusService;

method renderContent

renderContent: () => void;

The method is empty since we don't need to do anything additionally render is handled by change detection

class NbTooltipDirective

class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {}

Tooltip directive for small text/icon hints.
### Installation
Import NbTooltipModule to your feature module.
@NgModule({ imports: [ // ... NbTooltipModule, ], }) export class PageModule { }
### Usage
@stacked-example(Showcase, tooltip/tooltip-showcase.component)
Tooltip can accept a hint text and/or an icon: @stacked-example(With Icon, tooltip/tooltip-with-icon.component)
Same way as Popover, tooltip can accept placement position with nbTooltipPlacement property: @stacked-example(Placements, tooltip/tooltip-placements.component)
It is also possible to specify tooltip color using nbTooltipStatus property: @stacked-example(Colored Tooltips, tooltip/tooltip-colors.component)
Tooltip has a number of triggers which provides an ability to show and hide the component in different ways:
- Click mode shows the component when a user clicks on the host element and hides when the user clicks somewhere on the document outside the component. - Hint provides capability to show the component when the user hovers over the host element and hide when the user hovers out of the host. - Hover works like hint mode with one exception - when the user moves mouse from host element to the container element the component remains open, so that it is possible to interact with it content. - Focus mode is applied when user focuses the element. - Noop mode - the component won't react to the user interaction.

constructor

constructor(hostRef: ElementRef, dynamicOverlayHandler: NbDynamicOverlayHandler);

property adjustment

adjustment: NbAdjustment;

Container position will change automatically based on this strategy if container can't fit view port. Set this property to noop value if you want to disable automatic adjustment. Available values: clockwise (default), counterclockwise, vertical, horizontal, noop.

property content

content: string;

Tooltip message

property context

context: Object;

property destroy$

protected destroy$: Subject<void>;

property disabled

disabled: boolean;

Disables the display of the tooltip.

property dynamicOverlay

protected dynamicOverlay: NbDynamicOverlay;

property dynamicOverlayHandler

protected dynamicOverlayHandler: NbDynamicOverlayHandler;

property hostRef

protected hostRef: ElementRef;

property isShown

readonly isShown: boolean;

property nbTooltipShowStateChange

nbTooltipShowStateChange: EventEmitter<{ isShown: boolean }>;

property ngAcceptInputType_adjustment

static ngAcceptInputType_adjustment: NbAdjustmentValues;

property ngAcceptInputType_position

static ngAcceptInputType_position: NbPositionValues;

property offset

offset: number;

Determines tooltip overlay offset (in pixels).

property overlayConfig

protected overlayConfig: OverlayConfig;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTooltipDirective,
    '[nbTooltip]',
    ['nbTooltip'],
    {
        content: { alias: 'nbTooltip'; required: false };
        position: { alias: 'nbTooltipPlacement'; required: false };
        adjustment: { alias: 'nbTooltipAdjustment'; required: false };
        tooltipClass: { alias: 'nbTooltipClass'; required: false };
        icon: { alias: 'nbTooltipIcon'; required: false };
        status: { alias: 'nbTooltipStatus'; required: false };
        trigger: { alias: 'nbTooltipTrigger'; required: false };
        offset: { alias: 'nbTooltipOffset'; required: false };
        disabled: { alias: 'nbTooltipDisabled'; required: false };
    },
    { nbTooltipShowStateChange: 'nbTooltipShowStateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTooltipDirective, never>;

property position

position: NbPosition;

Position will be calculated relatively host element based on the position. Can be top, right, bottom, left, start or end.

property tooltipClass

tooltipClass: string;

property tooltipComponent

protected tooltipComponent: typeof NbTooltipComponent;

property trigger

trigger: NbTrigger;

Describes when the container will be shown. Available options: click, hover, hint, focus and noop

method configureDynamicOverlay

protected configureDynamicOverlay: () => NbDynamicOverlayHandler;

method hide

hide: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method rebuild

rebuild: () => void;

method show

show: () => void;

method toggle

toggle: () => void;

class NbTooltipModule

class NbTooltipModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTooltipModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbTooltipModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbTooltipModule,
    [typeof i1.NbTooltipComponent, typeof i2.NbTooltipDirective],
    [
        typeof i3.NbSharedModule,
        typeof i4.NbOverlayModule,
        typeof i5.NbIconModule
    ],
    [typeof i2.NbTooltipDirective]
>;

class NbTreeGridCellDefDirective

class NbTreeGridCellDefDirective extends NbCellDefDirective {}

Cell definition for a nb-table. Captures the template of a column's data row cell as well as cell-specific properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridCellDefDirective,
    '[nbTreeGridCellDef]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridCellDefDirective, never>;

class NbTreeGridCellDirective

class NbTreeGridCellDirective extends NbCellDirective implements OnInit, OnDestroy {}

constructor

constructor(
    columnDef: NbTreeGridColumnDefDirective,
    elementRef: ElementRef<HTMLElement>,
    tree: any,
    platformId: any,
    window: any,
    sanitizer: DomSanitizer,
    directionService: NbLayoutDirectionService,
    columnService: NbColumnsService,
    cd: ChangeDetectorRef
);

property columnWidth

readonly columnWidth: string;

property elementRef

elementRef: ElementRef<HTMLElement>;

property leftPadding

readonly leftPadding: any;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridCellDirective,
    'td[nbTreeGridCell]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridCellDirective, never>;

property rightPadding

readonly rightPadding: any;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method toggleRow

toggleRow: () => void;

class NbTreeGridColumnDefDirective

class NbTreeGridColumnDefDirective
    extends NbColumnDefDirective
    implements OnChanges {}

Column definition for the tree-grid. Defines a set of cells available for a table column.

property hideOn

hideOn: number;

Amount of pixels of viewport at which column should be hidden. type number

property name

name: string;

Column name

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridColumnDefDirective,
    '[nbTreeGridColumnDef]',
    never,
    {
        name: { alias: 'nbTreeGridColumnDef'; required: false };
        hideOn: { alias: 'hideOn'; required: false };
        showOn: { alias: 'showOn'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridColumnDefDirective, never>;

property showOn

showOn: number;

Amount of pixels of viewport at which column should be shown. type number

method ngOnChanges

ngOnChanges: () => void;

method shouldHide

shouldHide: (width: number) => boolean;

method shouldShow

shouldShow: (width: number) => boolean;

class NbTreeGridComponent

class NbTreeGridComponent<T>
    extends NbTable<NbTreeGridPresentationNode<T>>
    implements AfterViewInit, OnDestroy {}

Tree grid component that can be used to display nested rows of data. Supports filtering and sorting. @stacked-example(Showcase, tree-grid/tree-grid-showcase.component)
### Installation
Import NbTreeGridModule to your feature module.
@NgModule({ imports: [ // ... NbTreeGridModule, ], }) export class PageModule { }
### Usage
As the most basic usage you need to define [nbTreeGridRowDef](docs/components/treegrid/api#nbtreegridrowdefdirective) where you should pass columns to display in rows and [nbTreeGridColumnDef](docs/components/treegrid/api#nbtreegridcolumndefdirective) - component containing cell definitions for each column passed to row definition. @stacked-example(Basic, tree-grid/tree-grid-basic.component)
NbTreeGridComponent's source input and NbTreeGridDataSourceBuilder.create expecting data to be an array of objects with data, children and expanded properties. If your data doesn't match this interface, you can pass getter functions for each property as arguments to NbTreeGridDataSourceBuilder.create method. @stacked-example(Custom node structure, tree-grid/tree-grid-custom-node-structure.component)
To use sorting you can add nbSort directive to table and subscribe to sort method. When user click on header, sort event will be emitted. Event object contain clicked column name and desired sort direction. @stacked-example(Sortable, tree-grid/tree-grid-sortable.component)
You can use Data Source Builder to create NbTreeGridDataSource which would have toggle, sort and filter methods. Then you can call this methods to change sort or toggle rows programmatically. Also nbSort and nbFilterInput directives both support NbTreeGridDataSource, so you can pass it directly as an input and directives will trigger sort, toggle themselves. @stacked-example(Data Source Builder, tree-grid/tree-grid-showcase.component)
You can create responsive grid by setting hideOn and showOn inputs of [nbTreeGridColumnDef](docs/components/tree-grid/api#nbtreegridcolumndefdirective) directive. When viewport reaches specified width grid hides or shows columns. @stacked-example(Responsive columns, tree-grid/tree-grid-responsive.component)
To customize sort or row toggle icons you can use nbSortHeaderIcon and nbTreeGridRowToggle directives respectively. nbSortHeaderIcon is a structural directive and it's implicit context set to current direction. Also context has three properties: isAscending, isDescending and isNone. @stacked-example(Custom icons, tree-grid/tree-grid-custom-icons.component)
By default, row to toggle happens when user clicks anywhere in the row. Also double click expands row deeply. To disable this you can set [clickToToggle]="false" input of nbTreeGridRow. @stacked-example(Disable click toggle, tree-grid/tree-grid-disable-click-toggle.component)
tree-grid-cell-border-width: tree-grid-cell-border-style: tree-grid-cell-border-color: tree-grid-row-min-height: tree-grid-cell-padding: tree-grid-header-background-color: tree-grid-header-text-color: tree-grid-header-text-font-family: tree-grid-header-text-font-size: tree-grid-header-text-font-weight: tree-grid-header-text-line-height: tree-grid-footer-background-color: tree-grid-footer-text-color: tree-grid-footer-text-font-family: tree-grid-footer-text-font-size: tree-grid-footer-text-font-weight: tree-grid-footer-text-line-height: tree-grid-row-background-color: tree-grid-row-even-background-color: tree-grid-row-hover-background-color: tree-grid-row-text-color: tree-grid-row-text-font-family: tree-grid-row-text-font-size: tree-grid-row-text-font-weight: tree-grid-row-text-line-height: tree-grid-sort-header-button-background-color: tree-grid-sort-header-button-border: tree-grid-sort-header-button-padding:

constructor

constructor(
    dataSourceBuilder: NbTreeGridDataSourceBuilder<T>,
    differs: IterableDiffers,
    changeDetectorRef: ChangeDetectorRef,
    elementRef: ElementRef,
    role: string,
    dir: NbDirectionality,
    document: any,
    platform: NbPlatform,
    window: any,
    _viewRepeater: any,
    _coalescedStyleScheduler: any,
    _viewportRuler: NbViewportRulerAdapter,
    _stickyPositioningListener: any
);

property equalColumnsWidth

equalColumnsWidth: boolean;

property levelPadding

levelPadding: string;

property ngAcceptInputType_equalColumnsWidth

static ngAcceptInputType_equalColumnsWidth: NbBooleanInput;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTreeGridComponent<any>,
    'table[nbTreeGrid]',
    never,
    {
        source: { alias: 'nbTreeGrid'; required: false };
        levelPadding: { alias: 'levelPadding'; required: false };
        equalColumnsWidth: { alias: 'equalColumnsWidth'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NbTreeGridComponent<any>,
    [
        null,
        null,
        null,
        null,
        { attribute: 'role' },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        { optional: true; skipSelf: true }
    ]
>;

property treeClass

readonly treeClass: boolean;

method getCellLevel

getCellLevel: (cell: NbTreeGridCellDirective, columnName: string) => number;

method getColumnWidth

getColumnWidth: () => string;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method toggleCellRow

toggleCellRow: (cell: NbTreeGridCellDirective) => void;

method toggleRow

toggleRow: (row: NbTreeGridRowComponent, options?: NbToggleOptions) => void;

class NbTreeGridDataService

class NbTreeGridDataService<T> {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridDataService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbTreeGridDataService<any>>;

method copy

copy: (
    nodes: NbTreeGridPresentationNode<T>[]
) => NbTreeGridPresentationNode<T>[];

method flattenExpanded

flattenExpanded: (
    nodes: NbTreeGridPresentationNode<T>[]
) => NbTreeGridPresentationNode<T>[];

method toPresentationNodes

toPresentationNodes: <N>(
    nodes: N[],
    customGetters?: NbGetters<N, T>,
    level?: number
) => NbTreeGridPresentationNode<T>[];

class NbTreeGridDataSource

class NbTreeGridDataSource<T>
    extends NbDataSource<NbTreeGridPresentationNode<T>>
    implements NbSortable, NbFilterable {}

constructor

constructor(
    sortService: NbTreeGridSortService<T>,
    filterService: NbTreeGridFilterService<T>,
    treeGridService: NbTreeGridService<T>,
    treeGridDataService: NbTreeGridDataService<T>
);

method collapse

collapse: (row: T) => void;

method connect

connect: (
    collectionViewer: NbCollectionViewer
) => Observable<
    NbTreeGridPresentationNode<T>[] | readonly NbTreeGridPresentationNode<T>[]
>;

method disconnect

disconnect: (collectionViewer: NbCollectionViewer) => void;

method expand

expand: (row: T) => void;

method filter

filter: (searchQuery: string) => void;

method getLevel

getLevel: (rowIndex: number) => number;

method setData

setData: <N>(data: N[], customGetters?: NbGetters<N, T>) => void;

method sort

sort: (sortRequest: NbSortRequest) => void;

method toggle

toggle: (row: T, options?: NbToggleOptions) => void;

method toggleByIndex

toggleByIndex: (dataIndex: number, options?: NbToggleOptions) => void;

method updateChangeSubscription

protected updateChangeSubscription: () => void;

class NbTreeGridDataSourceBuilder

class NbTreeGridDataSourceBuilder<T> {}

constructor

constructor(
    filterService: NbTreeGridFilterService<T>,
    sortService: NbTreeGridSortService<T>,
    treeGridService: NbTreeGridService<T>,
    treeGridDataService: NbTreeGridDataService<T>
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridDataSourceBuilder<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbTreeGridDataSourceBuilder<any>>;

method create

create: <N>(
    data: N[],
    customGetters?: NbGetters<N, T>
) => NbTreeGridDataSource<T>;

class NbTreeGridFilterService

class NbTreeGridFilterService<T> {}

Service used to filter tree grid data. Searched searchString in all object values. If you need custom filter, you can extend this service and override filterPredicate or whole filter method.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridFilterService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbTreeGridFilterService<any>>;

method filter

filter: (
    query: string,
    data: NbTreeGridPresentationNode<T>[]
) => NbTreeGridPresentationNode<T>[];

method filterPredicate

protected filterPredicate: (data: T, searchQuery: string) => boolean;

class NbTreeGridFooterCellDefDirective

class NbTreeGridFooterCellDefDirective extends NbFooterCellDefDirective {}

Footer cell definition for the nb-table. Captures the template of a column's footer cell and as well as cell-specific properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridFooterCellDefDirective,
    '[nbTreeGridFooterCellDef]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridFooterCellDefDirective, never>;

class NbTreeGridFooterCellDirective

class NbTreeGridFooterCellDirective
    extends NbFooterCellDirective
    implements OnInit, OnDestroy {}

constructor

constructor(
    columnDef: NbTreeGridColumnDefDirective,
    elementRef: ElementRef,
    tree: any,
    columnService: NbColumnsService,
    cd: ChangeDetectorRef
);

property columnWidth

readonly columnWidth: string;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridFooterCellDirective,
    'td[nbTreeGridFooterCell]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridFooterCellDirective, never>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbTreeGridFooterRowComponent

class NbTreeGridFooterRowComponent extends NbFooterRowComponent {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTreeGridFooterRowComponent,
    'tr[nbTreeGridFooterRow]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridFooterRowComponent, never>;

class NbTreeGridFooterRowDefDirective

class NbTreeGridFooterRowDefDirective
    extends NbFooterRowDefDirective
    implements OnChanges, NbTreeGridResponsiveRowDef {}

constructor

constructor(
    template: TemplateRef<any>,
    differs: IterableDiffers,
    columnsService: NbColumnsService
);

property columns

columns: Iterable<string>;

Columns to be displayed on this row

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridFooterRowDefDirective,
    '[nbTreeGridFooterRowDef]',
    never,
    { columns: { alias: 'nbTreeGridFooterRowDef'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridFooterRowDefDirective, never>;

method getVisibleColumns

getVisibleColumns: () => Iterable<string>;

method hideColumn

hideColumn: (column: string) => void;

@docs-private

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method showColumn

showColumn: (column: string) => void;

@docs-private

method updateColumns

updateColumns: (columns: Iterable<string>) => void;

class NbTreeGridHeaderCellDefDirective

class NbTreeGridHeaderCellDefDirective extends NbHeaderCellDefDirective {}

Header cell definition for the nb-table. Captures the template of a column's header cell and as well as cell-specific properties.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridHeaderCellDefDirective,
    '[nbTreeGridHeaderCellDef]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridHeaderCellDefDirective, never>;

class NbTreeGridHeaderCellDirective

class NbTreeGridHeaderCellDirective
    extends NbHeaderCellDirective
    implements OnInit, OnDestroy {}

constructor

constructor(
    columnDef: NbTreeGridColumnDefDirective,
    elementRef: ElementRef<HTMLElement>,
    tree: any,
    columnService: NbColumnsService,
    cd: ChangeDetectorRef
);

property columnWidth

readonly columnWidth: string;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridHeaderCellDirective,
    'th[nbTreeGridHeaderCell]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridHeaderCellDirective, never>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbTreeGridHeaderRowComponent

class NbTreeGridHeaderRowComponent extends NbHeaderRowComponent {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTreeGridHeaderRowComponent,
    'tr[nbTreeGridHeaderRow]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridHeaderRowComponent, never>;

class NbTreeGridHeaderRowDefDirective

class NbTreeGridHeaderRowDefDirective
    extends NbHeaderRowDefDirective
    implements OnChanges, NbTreeGridResponsiveRowDef {}

constructor

constructor(
    template: TemplateRef<any>,
    differs: IterableDiffers,
    columnsService: NbColumnsService
);

property columns

columns: Iterable<string>;

Columns to be displayed on this row

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridHeaderRowDefDirective,
    '[nbTreeGridHeaderRowDef]',
    never,
    { columns: { alias: 'nbTreeGridHeaderRowDef'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridHeaderRowDefDirective, never>;

method getVisibleColumns

getVisibleColumns: () => Iterable<string>;

method hideColumn

hideColumn: (column: string) => void;

@docs-private

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method showColumn

showColumn: (column: string) => void;

@docs-private

method updateColumns

updateColumns: (columns: Iterable<string>) => void;

class NbTreeGridModule

class NbTreeGridModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbTreeGridModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbTreeGridModule,
    [
        typeof i1.NbTreeGridComponent,
        typeof i2.NbTreeGridRowDefDirective,
        typeof i3.NbTreeGridRowComponent,
        typeof i2.NbTreeGridCellDefDirective,
        typeof i4.NbTreeGridCellDirective,
        typeof i2.NbTreeGridHeaderRowDefDirective,
        typeof i3.NbTreeGridHeaderRowComponent,
        typeof i2.NbTreeGridHeaderCellDefDirective,
        typeof i4.NbTreeGridHeaderCellDirective,
        typeof i2.NbTreeGridFooterRowDefDirective,
        typeof i3.NbTreeGridFooterRowComponent,
        typeof i2.NbTreeGridFooterCellDefDirective,
        typeof i4.NbTreeGridFooterCellDirective,
        typeof i5.NbTreeGridColumnDefDirective,
        typeof i6.NbSortDirective,
        typeof i6.NbSortHeaderComponent,
        typeof i6.NbSortIconComponent,
        typeof i7.NbFilterDirective,
        typeof i7.NbFilterInputDirective,
        typeof i8.NbTreeGridRowToggleDirective,
        typeof i9.NbTreeGridRowToggleComponent,
        typeof i6.NbSortHeaderIconDirective
    ],
    [any, typeof i11.NbTableModule, typeof i12.NbIconModule],
    [
        typeof i11.NbTableModule,
        typeof i1.NbTreeGridComponent,
        typeof i2.NbTreeGridRowDefDirective,
        typeof i3.NbTreeGridRowComponent,
        typeof i2.NbTreeGridCellDefDirective,
        typeof i4.NbTreeGridCellDirective,
        typeof i2.NbTreeGridHeaderRowDefDirective,
        typeof i3.NbTreeGridHeaderRowComponent,
        typeof i2.NbTreeGridHeaderCellDefDirective,
        typeof i4.NbTreeGridHeaderCellDirective,
        typeof i2.NbTreeGridFooterRowDefDirective,
        typeof i3.NbTreeGridFooterRowComponent,
        typeof i2.NbTreeGridFooterCellDefDirective,
        typeof i4.NbTreeGridFooterCellDirective,
        typeof i5.NbTreeGridColumnDefDirective,
        typeof i6.NbSortDirective,
        typeof i6.NbSortHeaderComponent,
        typeof i6.NbSortIconComponent,
        typeof i7.NbFilterDirective,
        typeof i7.NbFilterInputDirective,
        typeof i8.NbTreeGridRowToggleDirective,
        typeof i9.NbTreeGridRowToggleComponent,
        typeof i6.NbSortHeaderIconDirective
    ]
>;

class NbTreeGridPresentationNode

class NbTreeGridPresentationNode<T> {}

Implicit context of cells and rows

constructor

constructor(
    data: {},
    children: NbTreeGridPresentationNode<T>[],
    expanded: boolean,
    level: number
);

property children

children: NbTreeGridPresentationNode<T>[];

property data

readonly data: {};

Data object associated with row

property expanded

expanded: boolean;

Row expand state

property level

readonly level: number;

method hasChildren

hasChildren: () => boolean;

True if row has child rows

class NbTreeGridRowComponent

class NbTreeGridRowComponent extends NbRowComponent implements OnDestroy {}

Cells container. Adds the right class and role.

constructor

constructor(tree: any, elementRef: ElementRef<HTMLElement>);

property clickToToggle

clickToToggle: boolean;

Toggle row on click. Enabled by default.

property doubleClickDelay

doubleClickDelay: number;

Time to wait for second click to expand row deeply. 200ms by default.

property elementRef

elementRef: ElementRef<HTMLElement>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTreeGridRowComponent,
    'tr[nbTreeGridRow]',
    never,
    {
        doubleClickDelay: { alias: 'doubleClickDelay'; required: false };
        clickToToggle: { alias: 'clickToToggle'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridRowComponent, never>;

method ngOnDestroy

ngOnDestroy: () => void;

method toggleIfEnabledNode

toggleIfEnabledNode: () => void;

method toggleIfEnabledNodeDeep

toggleIfEnabledNodeDeep: () => void;

class NbTreeGridRowDefDirective

class NbTreeGridRowDefDirective<T>
    extends NbRowDefDirective<T>
    implements OnChanges, NbTreeGridResponsiveRowDef {}

Data row definition for the tree-grid. Captures the header row's template and columns to display.

constructor

constructor(
    template: TemplateRef<any>,
    differs: IterableDiffers,
    columnsService: NbColumnsService
);

property columns

columns: Iterable<string>;

Columns to be displayed on this row

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridRowDefDirective<any>,
    '[nbTreeGridRowDef]',
    never,
    { columns: { alias: 'nbTreeGridRowDefColumns'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridRowDefDirective<any>, never>;

method getVisibleColumns

getVisibleColumns: () => Iterable<string>;

method hideColumn

hideColumn: (column: string) => void;

@docs-private

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method showColumn

showColumn: (column: string) => void;

@docs-private

method updateColumns

updateColumns: (columns: Iterable<string>) => void;

class NbTreeGridRowToggleComponent

class NbTreeGridRowToggleComponent {}

NbTreeGridRowToggleComponent

constructor

constructor(cell: NbTreeGridCellDirective);

property expanded

expanded: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbTreeGridRowToggleComponent,
    'nb-tree-grid-row-toggle',
    never,
    { expanded: { alias: 'expanded'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridRowToggleComponent, never>;

method toggleRow

toggleRow: ($event: any) => void;

class NbTreeGridRowToggleDirective

class NbTreeGridRowToggleDirective {}

When using custom row toggle, apply this directive on your toggle to toggle row on element click.

constructor

constructor(cell: NbTreeGridCellDirective);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NbTreeGridRowToggleDirective,
    '[nbTreeGridRowToggle]',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridRowToggleDirective, never>;

method toggleRow

toggleRow: ($event: any) => void;

class NbTreeGridService

class NbTreeGridService<T> {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbTreeGridService<any>>;

method collapse

collapse: (
    data: NbTreeGridPresentationNode<T>[],
    row: T,
    options?: NbToggleOptions
) => void;

method expand

expand: (
    data: NbTreeGridPresentationNode<T>[],
    row: T,
    options?: NbToggleOptions
) => void;

method toggle

toggle: (
    data: NbTreeGridPresentationNode<T>[],
    row: T,
    options?: NbToggleOptions
) => void;

class NbTreeGridSortService

class NbTreeGridSortService<T> {}

Service used to sort tree grid data. Uses Array.prototype.sort method. If you need custom sorting, you can extend this service and override comparator or whole sort method.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridSortService<any>, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbTreeGridSortService<any>>;

method comparator

protected comparator: (
    request: NbSortRequest,
    na: NbTreeGridPresentationNode<T>,
    nb: NbTreeGridPresentationNode<T>
) => number;

method sort

sort: (
    request: NbSortRequest,
    data: NbTreeGridPresentationNode<T>[]
) => NbTreeGridPresentationNode<T>[];

class NbTriggerStrategyBase

abstract class NbTriggerStrategyBase implements NbTriggerStrategy {}

TODO maybe we have to use renderer.listen instead of observableFromEvent? Renderer provides capability use it in service worker, ssr and so on.

constructor

constructor(
    document: Document,
    host: HTMLElement,
    container: () => ComponentRef<any>
);

property container

protected container: () => ComponentRef<any>;

property destroyed$

protected destroyed$: Subject<void>;

property document

protected document: Document;

property hide$

abstract hide$: Observable<Event>;

property host

protected host: HTMLElement;

property show$

abstract show$: Observable<Event>;

method destroy

destroy: () => void;

method isNotOnHostOrContainer

protected isNotOnHostOrContainer: (element: Element) => boolean;

method isOnContainer

protected isOnContainer: (element: Element) => boolean;

method isOnHost

protected isOnHost: (element: Element) => boolean;

method isOnHostOrContainer

protected isOnHostOrContainer: (element: Element) => boolean;

class NbTriggerStrategyBuilderService

class NbTriggerStrategyBuilderService {}

constructor

constructor(_document: any);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbTriggerStrategyBuilderService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbTriggerStrategyBuilderService>;

method build

build: () => NbTriggerStrategy;

method container

container: (container: () => ComponentRef<any>) => this;

method host

host: (host: HTMLElement) => this;

method trigger

trigger: (trigger: NbTrigger) => this;

class NbUserComponent

class NbUserComponent {}

Represents a component showing a user avatar (picture) with a user name on the right. @stacked-example(Showcase, user/user-showcase.component)
<nb-user name="John Doe" title="Engineer"></nb-user>
### Installation
Import NbUserModule to your feature module.
@NgModule({ imports: [ // ... NbUserModule, ], }) export class PageModule { }
### Usage
Available in multiple sizes: @stacked-example(Multiple Sizes, user/user-sizes.component)
You can hide unnecessary captions (name, title or both): @stacked-example(Hide captions in user component, user/user-hide-captions.component)
You can set custom avatar background-color, user image (as link or BASE64 string) and disable user initials: @stacked-example(Avatar image settings, user/user-avatar-settings.component)
Component shape could be controlled with shape input. @stacked-example(Shapes, user/user-shape.component)
user-picture-box-background-color: user-picture-box-border-color: user-picture-box-border-width: user-initials-text-color: user-initials-text-font-family: user-initials-text-font-weight: user-name-text-color: user-name-text-font-family: user-name-text-font-weight: user-title-text-color: user-title-text-font-family: user-title-text-font-weight: user-rectangle-border-radius: user-semi-round-border-radius: user-round-border-radius: user-tiny-height: user-tiny-width: user-tiny-initials-text-font-size: user-tiny-initials-text-line-height: user-tiny-name-text-font-size: user-tiny-name-text-line-height: user-tiny-title-text-font-size: user-tiny-title-text-line-height: user-small-height: user-small-width: user-small-initials-text-font-size: user-small-initials-text-line-height: user-small-name-text-font-size: user-small-name-text-line-height: user-small-title-text-font-size: user-small-title-text-line-height: user-medium-height: user-medium-width: user-medium-initials-text-font-size: user-medium-initials-text-line-height: user-medium-name-text-font-size: user-medium-name-text-line-height: user-medium-title-text-font-size: user-medium-title-text-line-height: user-large-height: user-large-width: user-large-initials-text-font-size: user-large-initials-text-line-height: user-large-name-text-font-size: user-large-name-text-line-height: user-large-title-text-font-size: user-large-title-text-line-height: user-giant-height: user-giant-width: user-giant-initials-text-font-size: user-giant-initials-text-line-height: user-giant-name-text-font-size: user-giant-name-text-line-height: user-giant-title-text-font-size: user-giant-title-text-line-height:

constructor

constructor(domSanitizer: DomSanitizer);

property badgePosition

badgePosition: NbBadgePosition;

Badge position. Can be set to any class or to one of predefined positions: 'top left', 'top right', 'bottom left', 'bottom right', 'top start', 'top end', 'bottom start', 'bottom end' string

property badgeStatus

badgeStatus: string;

Badge status (adds specific styles): primary, info, success, warning, danger
Parameter val

property badgeText

badgeText: string;

Badge text to display string

property color

color: string;

Color of the area shown when no picture specified string

property giant

readonly giant: boolean;

property imageBackgroundStyle

imageBackgroundStyle: SafeStyle;

property large

readonly large: boolean;

property medium

readonly medium: boolean;

property name

name: string;

Specifies a name to be shown on the right of a user picture string

property ngAcceptInputType_onlyPicture

static ngAcceptInputType_onlyPicture: NbBooleanInput;

property ngAcceptInputType_showInitials

static ngAcceptInputType_showInitials: NbBooleanInput;

property ngAcceptInputType_showName

static ngAcceptInputType_showName: NbBooleanInput;

property ngAcceptInputType_showTitle

static ngAcceptInputType_showTitle: NbBooleanInput;

property onlyPicture

onlyPicture: boolean;

Whether to show only a picture or also show the name and title boolean

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbUserComponent,
    'nb-user',
    never,
    {
        name: { alias: 'name'; required: false };
        title: { alias: 'title'; required: false };
        picture: { alias: 'picture'; required: false };
        color: { alias: 'color'; required: false };
        size: { alias: 'size'; required: false };
        shape: { alias: 'shape'; required: false };
        showName: { alias: 'showName'; required: false };
        showTitle: { alias: 'showTitle'; required: false };
        showInitials: { alias: 'showInitials'; required: false };
        onlyPicture: { alias: 'onlyPicture'; required: false };
        badgeText: { alias: 'badgeText'; required: false };
        badgeStatus: { alias: 'badgeStatus'; required: false };
        badgePosition: { alias: 'badgePosition'; required: false };
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbUserComponent, never>;

property rectangle

readonly rectangle: boolean;

property round

readonly round: boolean;

property semiRound

readonly semiRound: boolean;

property shape

shape: NbComponentShape;

Shape of the picture box. Possible values: rectangle, semi-round, round.

property showInitials

showInitials: boolean;

Whether to show a user initials (if no picture specified) or not boolean

property showName

showName: boolean;

Whether to show a user name or not

property showTitle

showTitle: boolean;

Whether to show a user title or not boolean

property size

size: NbComponentSize;

Size of the component. Possible values: tiny, small, medium (default), large, 'giant'.

property small

readonly small: boolean;

property tiny

readonly tiny: boolean;

property title

title: string;

Specifies a title to be shown under the **name** string

method getInitials

getInitials: () => string;

class NbUserModule

class NbUserModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbUserModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbUserModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbUserModule,
    [typeof i1.NbUserComponent],
    [typeof i2.NbSharedModule, typeof i3.NbBadgeModule],
    [typeof i1.NbUserComponent]
>;

class NbViewportRulerAdapter

class NbViewportRulerAdapter extends ViewportRuler {}

constructor

constructor(
    platform: NbPlatform,
    ngZone: NgZone,
    ruler: NbLayoutRulerService,
    scroll: NbLayoutScrollService,
    document: any
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbViewportRulerAdapter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbViewportRulerAdapter>;

property ruler

protected ruler: NbLayoutRulerService;

property scroll

protected scroll: NbLayoutScrollService;

method getViewportScrollPosition

getViewportScrollPosition: () => { left: number; top: number };

method getViewportSize

getViewportSize: () => Readonly<{ width: number; height: number }>;

class NbWindowComponent

class NbWindowComponent implements OnInit, AfterViewChecked, OnDestroy {}

constructor

constructor(
    content: any,
    context: Object,
    windowRef: NbWindowRef<any, any>,
    config: NbWindowConfig,
    focusTrapFactory: NbFocusTrapFactoryService,
    elementRef: ElementRef,
    renderer: Renderer2
);

property cfr

cfr: ComponentFactoryResolver;

property config

config: NbWindowConfig;

property content

content: any;

property context

context: Object;

property elementRef

protected elementRef: ElementRef;

property focusTrap

protected focusTrap: NbFocusTrap;

property focusTrapFactory

protected focusTrapFactory: NbFocusTrapFactoryService;

property isFullScreen

readonly isFullScreen: boolean;

property maximized

readonly maximized: boolean;

property minimized

readonly minimized: boolean;

property overlayContainer

overlayContainer: NbOverlayContainerComponent;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbWindowComponent,
    'nb-window',
    never,
    { cfr: { alias: 'cfr'; required: false } },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbWindowComponent, never>;

property renderer

protected renderer: Renderer2;

property showClose

readonly showClose: boolean;

property showFullScreen

readonly showFullScreen: boolean;

property showMaximize

readonly showMaximize: boolean;

property showMinimize

readonly showMinimize: boolean;

property windowRef

windowRef: NbWindowRef<any, any>;

method attachComponent

protected attachComponent: () => void;

method attachTemplate

protected attachTemplate: () => void;

method close

close: () => void;

method fullScreen

fullScreen: () => void;

method maximize

maximize: () => void;

method maximizeOrFullScreen

maximizeOrFullScreen: () => void;

method minimize

minimize: () => void;

method ngAfterViewChecked

ngAfterViewChecked: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NbWindowConfig

class NbWindowConfig {}

Window configuration options.

constructor

constructor(...configs: Partial<NbWindowConfig>[]);

property buttons

buttons: Partial<NbWindowControlButtonsConfig>;

Windows control buttons can be hidden by setting according property to false.

property closeOnBackdropClick

closeOnBackdropClick: boolean;

If set to true mouse clicks on backdrop will close a window. Default is true.

property closeOnEsc

closeOnEsc: boolean;

If true then escape press will close a window. Default is true.

property context

context?: Object;

Both, template and component may receive data through config.context property. For components, this data will be set as component properties. For templates, you can access it inside template as $implicit.

property hasBackdrop

hasBackdrop: boolean;

If true than backdrop will be rendered behind window. By default set to true.

property initialState

initialState: NbWindowState;

Initial window state. Full screen by default.

property title

title: string;

Window title.

property titleTemplate

titleTemplate?: TemplateRef<any>;

Window title as template. Use it instead of title property.

property titleTemplateContext

titleTemplateContext?: Object;

Title as template may receive data through config.titleTemplateContext property. Window title as Template. You can access context inside template as $implicit.

property viewContainerRef

viewContainerRef: ViewContainerRef;

Where the attached component should live in Angular's *logical* component tree. This affects what is available for injection and the change detection order for the component instantiated inside of the window. This does not affect where the window content will be rendered.

property windowClass

windowClass: string;

Class to be applied to the window.

method applyDefaultButtonConfig

protected applyDefaultButtonConfig: () => void;

class NbWindowModule

class NbWindowModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbWindowModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NbWindowModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbWindowModule,
    [typeof i1.NbWindowsContainerComponent, typeof i2.NbWindowComponent],
    [
        any,
        typeof i4.NbOverlayModule,
        typeof i5.NbCardModule,
        typeof i6.NbIconModule,
        typeof i7.NbButtonModule
    ],
    never
>;

method forChild

static forChild: (
    defaultConfig?: Partial<NbWindowConfig>
) => ModuleWithProviders<NbWindowModule>;

method forRoot

static forRoot: (
    defaultConfig?: Partial<NbWindowConfig>
) => ModuleWithProviders<NbWindowModule>;

class NbWindowRef

class NbWindowRef<T = any, R = any> {}

The NbWindowRef helps to manipulate window after it was created. The window can be dismissed by using close method of the windowRef. You can access rendered component as componentRef property of the windowRef. Property contentInstance contains the instance of the component opened in the window.

constructor

constructor(config: NbWindowConfig);

property closed$

protected closed$: Subject<R>;

property componentInstance

componentInstance: {};

property componentRef

componentRef: ComponentRef<NbWindowComponent>;

property config

config: NbWindowConfig;

property onClose

readonly onClose: Observable<R>;

Emits when window was closed.

property prevStateValue

protected prevStateValue: NbWindowState;

property state

state: NbWindowState;

Current window state.

property stateChange

readonly stateChange: Observable<NbWindowStateChange>;

Emits when window state change.

property stateChange$

protected stateChange$: ReplaySubject<NbWindowStateChange>;

property stateValue

protected stateValue: NbWindowState;

method close

close: (res?: R) => void;

Closes window.

method fullScreen

fullScreen: () => void;

Set window on top.

method maximize

maximize: () => void;

Maximize window.

method minimize

minimize: () => void;

Minimize window.

method toPreviousState

toPreviousState: () => void;

class NbWindowsContainerComponent

class NbWindowsContainerComponent {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NbWindowsContainerComponent,
    'nb-windows-container',
    never,
    {},
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbWindowsContainerComponent, never>;

property viewContainerRef

viewContainerRef: ViewContainerRef;

class NbWindowService

class NbWindowService {}

The NbWindowService can be used to open windows.
@stacked-example(Showcase, window/window-showcase.component)
### Installation
Import NbWindowModule to your app module.
@NgModule({ imports: [ // ... NbWindowModule.forRoot(config), ], }) export class AppModule { }
If you are using it in a lazy loaded module than you have to install NbWindowModule.forChild:
@NgModule({ imports: [ // ... NbWindowModule.forChild(config), ], }) export class LazyLoadedModule { }
### Usage
A new window can be opened by calling the open method with a component or template to be loaded and an optional configuration. open method will return NbWindowRef that can be used for the further manipulations.
const windowRef = this.windowService.open(MyComponent, { ... });
NbWindowRef gives you ability manipulate opened window. Also, you can inject NbWindowRef inside provided component which rendered in window.
this.windowService.open(MyWindowComponent, { ... }); // my.component.ts constructor(protected windowRef: NbWindowRef) { } minimize() { this.windowRef.minimize(); } close() { this.windowRef.close(); }
Instead of component you can create window from TemplateRef. As usual you can access context provided via config via let- variables. Also you can get reference to the NbWindowRef in context's windowRef property.
@stacked-example(Window content from TemplateRef, window/template-window.component)
You could pass the optional window return value to the NbWindowRef.close method. The passed value would be emitted to the NbWindowRef.onClose listeners.
@stacked-example(Result, window/window-result.component)
### Configuration
As mentioned above, open method of the NbWindowService may receive optional configuration options. Also, you can modify default windows configuration through NbWindowModule.forRoot({ ... }). You can read about all available options on [API tab](docs/components/window/api#nbwindowconfig).
@stacked-example(Configuration, window/windows-backdrop.component)
You can configure which buttons are available in a window via the buttons property of the window config. @stacked-example(Control buttons, window/window-controls.component)

constructor

constructor(
    componentFactoryResolver: ComponentFactoryResolver,
    overlayService: NbOverlayService,
    overlayPositionBuilder: NbOverlayPositionBuilder,
    blockScrollStrategy: NbBlockScrollStrategyAdapter,
    defaultWindowsConfig: NbWindowConfig,
    cfr: ComponentFactoryResolver,
    document: any
);

property blockScrollStrategy

protected blockScrollStrategy: NbBlockScrollStrategyAdapter;

property cfr

protected cfr: ComponentFactoryResolver;

property componentFactoryResolver

protected componentFactoryResolver: ComponentFactoryResolver;

property defaultWindowsConfig

protected readonly defaultWindowsConfig: NbWindowConfig;

property document

protected document: Document;

property openWindows

protected openWindows: NbWindowRef<any, any>[];

property overlayPositionBuilder

protected overlayPositionBuilder: NbOverlayPositionBuilder;

property overlayRef

protected overlayRef: OverlayRef;

property overlayService

protected overlayService: NbOverlayService;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NbWindowService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NbWindowService>;

property windowsContainerViewRef

protected windowsContainerViewRef: ViewContainerRef;

method appendWindow

protected appendWindow: (
    content: TemplateRef<any> | NbComponentType,
    config: NbWindowConfig,
    windowRef: NbWindowRef
) => ComponentRef<NbWindowComponent>;

method checkAndUpdateOverlay

protected checkAndUpdateOverlay: () => void;

method createWindowsContainer

protected createWindowsContainer: () => void;

method open

open: (
    windowContent: TemplateRef<any> | NbComponentType,
    windowConfig?: Partial<NbWindowConfig>
) => NbWindowRef;

Opens new window.
Parameter windowContent
Parameter windowConfig

method shouldCreateWindowsContainer

protected shouldCreateWindowsContainer: () => boolean;

method subscribeToEvents

protected subscribeToEvents: (windowRef: NbWindowRef) => void;

Interfaces

interface NbBadge

interface NbBadge {}

property dotMode

dotMode?: boolean;

property position

position?: NbBadgePosition;

property status

status?: NbComponentOrCustomStatus;

property text

text?: string;

interface NbButtonToggleChange

interface NbButtonToggleChange {}

property pressed

pressed: boolean;

property source

source: NbButtonToggleDirective;

interface NbCalendarCell

interface NbCalendarCell<D, T> {}

property date

date: D;

property filter

filter?: (D: any) => boolean;

property max

max?: D;

property min

min?: D;

property select

select: EventEmitter<D>;

property selectedValue

selectedValue?: T;

property size

size?: NbCalendarSize;

property visibleDate

visibleDate?: D;

interface NbCalendarDay

interface NbCalendarDay {}

property isHoliday

isHoliday: boolean;

property name

name: string;

interface NbCalendarRange

interface NbCalendarRange<D> {}

property end

end?: D;

property start

start: D;

interface NbChatMessageFileIconPreview

interface NbChatMessageFileIconPreview {}

property icon

icon: string;

property url

url: string;

interface NbChatMessageFileImagePreview

interface NbChatMessageFileImagePreview {}

property type

type: string;

property url

url: string;

interface NbContextMenuContext

interface NbContextMenuContext {}

property items

items: NbMenuItem[];

property position

position: NbPosition;

property tag

tag: string;

interface NbDynamicOverlayController

interface NbDynamicOverlayController {}

method hide

hide: () => any;

method rebuild

rebuild: () => any;

method show

show: () => any;

method toggle

toggle: () => any;

interface NbFilterable

interface NbFilterable {}

method filter

filter: (filterRequest: string) => any;

interface NbFontIconPackParams

interface NbFontIconPackParams extends NbIconPackParams {}

property iconClassPrefix

iconClassPrefix?: string;

interface NbFormControlState

interface NbFormControlState {}

property disabled

disabled: boolean;

property focused

focused: boolean;

property fullWidth

fullWidth: boolean;

property size

size: NbComponentSize;

property status

status: NbComponentOrCustomStatus;

interface NbGetters

interface NbGetters<N, T> {}

property childrenGetter

childrenGetter?: NbChildrenGetter<N, T>;

property dataGetter

dataGetter?: NbDataGetter<N, T>;

property expandedGetter

expandedGetter?: NbExpandedGetter<N>;

interface NbIcon

interface NbIcon {}

method getClasses

getClasses: (options?: NbIconOptions) => string[];

method getContent

getContent: (options?: NbIconOptions) => string;

interface NbIconConfig

interface NbIconConfig {}

property icon

icon: string;

property options

options?: {
    [name: string]: any;
};

property pack

pack?: string;

property status

status?: NbComponentOrCustomStatus;

interface NbIconOptions

interface NbIconOptions {}

index signature

[name: string]: any;

interface NbIconPack

interface NbIconPack {}

property icons

icons: Map<string, NbIcon | string>;

property name

name: string;

property params

params: NbIconPackParams;

property type

type: NbIconPackType;

interface NbIconPackParams

interface NbIconPackParams {}

property packClass

packClass?: string;

index signature

[name: string]: any;

interface NbIcons

interface NbIcons {}

index signature

[key: string]: NbIcon | string;

interface NbJSThemeOptions

interface NbJSThemeOptions {}

property base

base?: string;

property name

name: string;

property variables

variables?: NbJSThemeVariable;

interface NbJSThemeVariable

interface NbJSThemeVariable {}

index signature

[key: string]: string | string[] | NbJSThemeVariable;

interface NbLayoutDimensions

interface NbLayoutDimensions {}

Layout dimensions type

property clientHeight

clientHeight: number;

clientHeight {number}

property clientWidth

clientWidth: number;

clientWidth {number}

property scrollHeight

scrollHeight: number;

scrollHeight {number}

property scrollWidth

scrollWidth: number;

scrollWidth {number}

interface NbMediaBreakpoint

interface NbMediaBreakpoint {}

Media breakpoint type
Where name - breakpoint name alias (e.g. xs, sm, md, etc), and width - min breakpoint width

property name

name: string;

property width

width: number;

interface NbMenuBag

interface NbMenuBag {}

property item

item: NbMenuItem;

property tag

tag: string;

interface NbPickerValidatorConfig

interface NbPickerValidatorConfig<D> {}

Validators config that will be used by form control to perform proper validation.

property filter

filter: (D: any) => boolean;

Predicate that determines is value available for picking.

property max

max: D;

Maximum date available in picker.

property min

min: D;

Minimum date available in picker.

interface NbRenderableContainer

interface NbRenderableContainer {}

method renderContent

renderContent: () => any;

A renderContent method renders content with provided context. Naturally, this job has to be done by ngOnChanges lifecycle hook, but ngOnChanges hook will be triggered only if we update content or context properties through template property binding syntax. But in our case we're updating these properties programmatically.

interface NbRouteTab

interface NbRouteTab {}

property activeLinkOptions

activeLinkOptions?: RouterLinkActive['routerLinkActiveOptions'] | undefined;

property disabled

disabled?: boolean | undefined;

property fragment

fragment?: RouterLink['fragment'] | undefined;

property icon

icon?: string | NbIconConfig | undefined;

property preserveFragment

preserveFragment?: RouterLink['preserveFragment'] | undefined;

property queryParams

queryParams?: RouterLink['queryParams'] | undefined;

property queryParamsHandling

queryParamsHandling?: RouterLink['queryParamsHandling'] | undefined;

property replaceUrl

replaceUrl?: RouterLink['replaceUrl'] | undefined;

property responsive

responsive?: boolean | undefined;

property route

route?: RouterLink['routerLink'] | undefined;

property skipLocationChange

skipLocationChange?: RouterLink['skipLocationChange'] | undefined;

property state

state?: RouterLink['state'] | undefined;

property title

title?: string | undefined;

interface NbScrollPosition

interface NbScrollPosition {}

Scroll position type

property x

x: number;

x - left {number}

property y

y: number;

y - top {number}

interface NbSelectedTimeModel

interface NbSelectedTimeModel {}

property value

value: string;

interface NbSelectedTimePayload

interface NbSelectedTimePayload<D> {}

property save

save?: boolean;

property time

time: D;

interface NbSortable

interface NbSortable {}

method sort

sort: (sortRequest: NbSortRequest) => any;

interface NbSortHeaderIconDirectiveContext

interface NbSortHeaderIconDirectiveContext {}

property $implicit

$implicit: NbSortDirection;

property isAscending

isAscending: boolean;

property isDescending

isDescending: boolean;

property isNone

isNone: boolean;

interface NbSortRequest

interface NbSortRequest {}

property column

column: string;

property direction

direction: NbSortDirection;

interface NbStepChangeEvent

interface NbStepChangeEvent {}

property index

index: number;

property previouslySelectedIndex

previouslySelectedIndex: number;

property previouslySelectedStep

previouslySelectedStep: NbStepComponent;

property step

step: NbStepComponent;

interface NbTagInputAddEvent

interface NbTagInputAddEvent {}

property input

input: ElementRef<HTMLInputElement>;

property value

value: string;

interface NbTagSelectionChange

interface NbTagSelectionChange {}

property selected

selected: boolean;

property tag

tag: NbTagComponent;

interface NbThemeOptions

interface NbThemeOptions {}

property name

name: string;

interface NbTimePickerConfig

interface NbTimePickerConfig {}

property format

format?: string;

property localization

localization?: NbTimepickerLocalizationConfig;

property twelveHoursFormat

twelveHoursFormat?: boolean;

interface NbTimepickerLocalizationConfig

interface NbTimepickerLocalizationConfig {}

property ampmText

ampmText: string;

property hoursText

hoursText: string;

property minutesText

minutesText: string;

property secondsText

secondsText: string;

interface NbToggleOptions

interface NbToggleOptions {}

property deep

deep?: boolean;

interface NbTreeGridResponsiveRowDef

interface NbTreeGridResponsiveRowDef {}

method hideColumn

hideColumn: (column: string) => any;

method showColumn

showColumn: (column: string) => any;

interface NbTriggerStrategy

interface NbTriggerStrategy {}

Provides entity with two event stream: show and hide. Each stream provides different events depends on implementation. We have three main trigger strategies: click, hint and hover.

property hide$

hide$: Observable<never | Event>;

property show$

show$: Observable<never | Event>;

method destroy

destroy: () => any;

interface NbWindowControlButtonsConfig

interface NbWindowControlButtonsConfig {}

property close

close: boolean;

property fullScreen

fullScreen: boolean;

property maximize

maximize: boolean;

property minimize

minimize: boolean;

interface NbWindowStateChange

interface NbWindowStateChange {}

property newState

newState: NbWindowState;

property oldState

oldState: NbWindowState;

Enums

enum NbAdjustment

enum NbAdjustment {
    NOOP = 'noop',
    CLOCKWISE = 'clockwise',
    COUNTERCLOCKWISE = 'counterclockwise',
    VERTICAL = 'vertical',
    HORIZONTAL = 'horizontal',
}

member CLOCKWISE

CLOCKWISE = 'clockwise'

member COUNTERCLOCKWISE

COUNTERCLOCKWISE = 'counterclockwise'

member HORIZONTAL

HORIZONTAL = 'horizontal'

member NOOP

NOOP = 'noop'

member VERTICAL

VERTICAL = 'vertical'

enum NbCalendarSize

enum NbCalendarSize {
    MEDIUM = 'medium',
    LARGE = 'large',
}

member LARGE

LARGE = 'large'

member MEDIUM

MEDIUM = 'medium'

enum NbCalendarViewMode

enum NbCalendarViewMode {
    YEAR = 'year',
    MONTH = 'month',
    DATE = 'date',
}

member DATE

DATE = 'date'

member MONTH

MONTH = 'month'

member YEAR

YEAR = 'year'

enum NbDayPeriod

const enum NbDayPeriod {
    AM = 'AM',
    PM = 'PM',
}

member AM

AM = 'AM'

member PM

PM = 'PM'

enum NbGlobalLogicalPosition

enum NbGlobalLogicalPosition {
    TOP_START = 'top-start',
    TOP_END = 'top-end',
    BOTTOM_START = 'bottom-start',
    BOTTOM_END = 'bottom-end',
}

member BOTTOM_END

BOTTOM_END = 'bottom-end'

member BOTTOM_START

BOTTOM_START = 'bottom-start'

member TOP_END

TOP_END = 'top-end'

member TOP_START

TOP_START = 'top-start'

enum NbGlobalPhysicalPosition

enum NbGlobalPhysicalPosition {
    TOP_RIGHT = 'top-right',
    TOP_LEFT = 'top-left',
    BOTTOM_RIGHT = 'bottom-right',
    BOTTOM_LEFT = 'bottom-left',
}

member BOTTOM_LEFT

BOTTOM_LEFT = 'bottom-left'

member BOTTOM_RIGHT

BOTTOM_RIGHT = 'bottom-right'

member TOP_LEFT

TOP_LEFT = 'top-left'

member TOP_RIGHT

TOP_RIGHT = 'top-right'

enum NbIconPackType

enum NbIconPackType {
    SVG = 'svg',
    FONT = 'font',
}

member FONT

FONT = 'font'

member SVG

SVG = 'svg'

enum NbLayoutDirection

enum NbLayoutDirection {
    LTR = 'ltr',
    RTL = 'rtl',
}

Layout direction.

member LTR

LTR = 'ltr'

member RTL

RTL = 'rtl'

enum NbPosition

enum NbPosition {
    TOP = 'top',
    BOTTOM = 'bottom',
    LEFT = 'left',
    RIGHT = 'right',
    START = 'start',
    END = 'end',
    TOP_END = 'top-end',
    TOP_START = 'top-start',
    BOTTOM_END = 'bottom-end',
    BOTTOM_START = 'bottom-start',
    END_TOP = 'end-top',
    END_BOTTOM = 'end-bottom',
    START_TOP = 'start-top',
    START_BOTTOM = 'start-bottom',
}

member BOTTOM

BOTTOM = 'bottom'

member BOTTOM_END

BOTTOM_END = 'bottom-end'

member BOTTOM_START

BOTTOM_START = 'bottom-start'

member END

END = 'end'

member END_BOTTOM

END_BOTTOM = 'end-bottom'

member END_TOP

END_TOP = 'end-top'

member LEFT

LEFT = 'left'

member RIGHT

RIGHT = 'right'

member START

START = 'start'

member START_BOTTOM

START_BOTTOM = 'start-bottom'

member START_TOP

START_TOP = 'start-top'

member TOP

TOP = 'top'

member TOP_END

TOP_END = 'top-end'

member TOP_START

TOP_START = 'top-start'

enum NbSortDirection

enum NbSortDirection {
    ASCENDING = 'asc',
    DESCENDING = 'desc',
    NONE = '',
}

member ASCENDING

ASCENDING = 'asc'

member DESCENDING

DESCENDING = 'desc'

member NONE

NONE = ''

enum NbToggleStates

enum NbToggleStates {
    Expanded = 'expanded',
    Collapsed = 'collapsed',
}

member Collapsed

Collapsed = 'collapsed'

member Expanded

Expanded = 'expanded'

enum NbTrigger

enum NbTrigger {
    NOOP = 'noop',
    CLICK = 'click',
    HOVER = 'hover',
    HINT = 'hint',
    FOCUS = 'focus',
}

member CLICK

CLICK = 'click'

member FOCUS

FOCUS = 'focus'

member HINT

HINT = 'hint'

member HOVER

HOVER = 'hover'

member NOOP

NOOP = 'noop'

enum NbWindowState

enum NbWindowState {
    MINIMIZED = 'minimized',
    MAXIMIZED = 'maximized',
    FULL_SCREEN = 'full-screen',
}

member FULL_SCREEN

FULL_SCREEN = 'full-screen'

member MAXIMIZED

MAXIMIZED = 'maximized'

member MINIMIZED

MINIMIZED = 'minimized'

Type Aliases

type NbAdjustmentValues

type NbAdjustmentValues =
    | 'noop'
    | 'clockwise'
    | 'counterclockwise'
    | 'vertical'
    | 'horizontal';

type NbBadgeLogicalPosition

type NbBadgeLogicalPosition =
    | 'top start'
    | 'top end'
    | 'bottom start'
    | 'bottom end'
    | 'center start'
    | 'center end';

type NbBadgePhysicalPosition

type NbBadgePhysicalPosition =
    | 'top left'
    | 'top right'
    | 'bottom left'
    | 'bottom right'
    | 'center right'
    | 'center left';

type NbBadgePosition

type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition;

type NbButtonAppearance

type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';

type NbButtonProperties

type NbButtonProperties = Pick<
    NbButton,
    'appearance' | 'size' | 'shape' | 'status' | 'disabled'
> &
    Object;

type NbButtonToggleAppearance

type NbButtonToggleAppearance = Exclude<NbButtonAppearance, 'hero'>;

type NbCalendarSizeValues

type NbCalendarSizeValues = 'medium' | 'large';

type NbCalendarViewModeValues

type NbCalendarViewModeValues = 'year' | 'month' | 'date';

type NbChatMessageFile

type NbChatMessageFile =
    | NbChatMessageFileIconPreview
    | NbChatMessageFileImagePreview;

type NbChildrenGetter

type NbChildrenGetter<N, T> = (N: any) => T[] | undefined;

type NbComponentOrCustomStatus

type NbComponentOrCustomStatus = NbComponentStatus | string;

type NbComponentShape

type NbComponentShape = 'rectangle' | 'semi-round' | 'round';

type NbComponentSize

type NbComponentSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant';

type NbComponentStatus

type NbComponentStatus =
    | 'basic'
    | 'primary'
    | 'success'
    | 'warning'
    | 'danger'
    | 'info'
    | 'control';

type NbComponentType

type NbComponentType<T = any> = ComponentType<T>;

type NbConnectedOverlayPositionChange

type NbConnectedOverlayPositionChange = ConnectedOverlayPositionChange;

type NbConnectedPosition

type NbConnectedPosition = ConnectedPosition;

type NbConnectionPositionPair

type NbConnectionPositionPair = ConnectionPositionPair;

type NbDataGetter

type NbDataGetter<N, T> = (N: any) => T;

type NbDuplicateToastBehaviour

type NbDuplicateToastBehaviour = 'previous' | 'all';

type NbExpandedGetter

type NbExpandedGetter<N> = (N: any) => boolean;

type NbFocusableOption

type NbFocusableOption = FocusableOption;

type NbFormControlAddon

type NbFormControlAddon = 'prefix' | 'suffix';

type NbGlobalPosition

type NbGlobalPosition = NbGlobalPhysicalPosition | NbGlobalLogicalPosition;

type NbOverlayConfig

type NbOverlayConfig = OverlayConfig;

type NbOverlayContent

type NbOverlayContent = Type<any> | TemplateRef<any> | string;

type NbOverlayRef

type NbOverlayRef = OverlayRef;

type NbPortal

type NbPortal<T = any> = Portal<T>;

type NbPositionStrategy

type NbPositionStrategy = PositionStrategy;

type NbPositionValues

type NbPositionValues =
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'start'
    | 'end'
    | 'top-end'
    | 'top-start'
    | 'bottom-end'
    | 'bottom-start'
    | 'end-top'
    | 'end-bottom'
    | 'start-top'
    | 'start-bottom';

type NbScrollStrategies

type NbScrollStrategies = keyof Pick<
    NbScrollStrategyOptions,
    'noop' | 'close' | 'block' | 'reposition'
>;

type NbScrollStrategy

type NbScrollStrategy = ScrollStrategy;

type NbSearchType

type NbSearchType =
    | 'modal-zoomin'
    | 'rotate-layout'
    | 'modal-move'
    | 'curtain'
    | 'column-curtain'
    | 'modal-drop'
    | 'modal-half';

type NbSelectAppearance

type NbSelectAppearance = 'outline' | 'filled' | 'hero';

type NbSelectCompareFunction

type NbSelectCompareFunction<T = any> = (v1: any, v2: any) => boolean;

type NbSidebarResponsiveState

type NbSidebarResponsiveState = 'mobile' | 'tablet' | 'pc';

type NbSidebarState

type NbSidebarState = 'expanded' | 'collapsed' | 'compacted';

type NbSortDirectionValues

type NbSortDirectionValues = 'asc' | 'desc' | '';

type NbStepperOrientation

type NbStepperOrientation = 'vertical' | 'horizontal';

type NbTagAppearance

type NbTagAppearance = 'filled' | 'outline';

type NbTriggerValues

type NbTriggerValues = 'noop' | 'click' | 'hover' | 'hint' | 'focus';

Package Files (236)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (6)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@nebular/theme.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@nebular/theme)

HTML

<a href="https://www.jsdocs.io/package/@nebular/theme"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 months ago.
Package analyzed in 29142 ms.
Missing or incorrect documentation? Open an issue for this package.