@nebular/theme

@nebular/theme

Version 16.0.0
Published 1 month ago
6.65 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;

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

variable NB_BUILT_IN_JS_THEMES

const NB_BUILT_IN_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;

variable NB_BUTTON_GROUP

const NB_BUTTON_GROUP: InjectionToken<NbButtonGroupComponent>;

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

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>>;

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

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>;

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

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: i0.InjectionToken<
    _ViewRepeater<
        unknown,
        unknown,
        _angular_cdk_collections._ViewRepeaterItemContext<unknown>
    >
>;

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
) => ComponentRef<T>;

function nbSelectFormFieldControlConfigFactory

nbSelectFormFieldControlConfigFactory: () => NbFormFieldControlConfig;

function patch

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

function windowFactory

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

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

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 NbAccordionComponent,
        typeof NbAccordionItemComponent,
        typeof NbAccordionItemHeaderComponent,
        typeof NbAccordionItemBodyComponent
    ],
    [any, typeof NbIconModule],
    [
        typeof NbAccordionComponent,
        typeof NbAccordionItemComponent,
        typeof NbAccordionItemHeaderComponent,
        typeof 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 NbActionComponent, typeof NbActionsComponent],
    [typeof NbSharedModule, typeof NbBadgeModule, typeof NbIconModule],
    [typeof NbActionComponent, typeof 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 NbAlertComponent],
    [typeof NbSharedModule],
    [typeof 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 NbAutocompleteComponent, typeof NbAutocompleteDirective],
    [
        any,
        any,
        typeof NbOverlayModule,
        typeof NbCardModule,
        typeof NbOptionModule
    ],
    [
        typeof NbAutocompleteComponent,
        typeof NbAutocompleteDirective,
        typeof 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 NbBadgeComponent],
    never,
    [typeof 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 NbBaseCalendarComponent],
    [typeof NbCalendarKitModule, typeof NbSharedModule, typeof NbCardModule],
    [typeof NbBaseCalendarComponent]
>;

class NbBaseCalendarRangeCell

abstract class NbBaseCalendarRangeCell<D> {}

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

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,
    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 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,
    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, { 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 NbButtonGroupComponent, typeof NbButtonToggleDirective],
    never,
    [typeof NbButtonGroupComponent, typeof 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 NbButtonComponent],
    [typeof NbSharedModule],
    [typeof 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> {}

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

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 {}

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

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 NbCalendarViewModeComponent,
        typeof NbCalendarPageableNavigationComponent,
        typeof NbCalendarDaysNamesComponent,
        typeof NbCalendarYearPickerComponent,
        typeof NbCalendarMonthPickerComponent,
        typeof NbCalendarDayPickerComponent,
        typeof NbCalendarDayCellComponent,
        typeof NbCalendarActionsComponent,
        typeof NbCalendarMonthCellComponent,
        typeof NbCalendarYearCellComponent,
        typeof NbCalendarPickerRowComponent,
        typeof NbCalendarPickerComponent,
        typeof NbCalendarWeekNumberComponent
    ],
    [typeof NbSharedModule, typeof NbButtonModule, typeof NbIconModule],
    [
        typeof NbCalendarViewModeComponent,
        typeof NbCalendarPageableNavigationComponent,
        typeof NbCalendarDaysNamesComponent,
        typeof NbCalendarYearPickerComponent,
        typeof NbCalendarMonthPickerComponent,
        typeof NbCalendarDayPickerComponent,
        typeof NbCalendarDayCellComponent,
        typeof NbCalendarActionsComponent,
        typeof NbCalendarMonthCellComponent,
        typeof NbCalendarYearCellComponent,
        typeof NbCalendarPickerRowComponent,
        typeof NbCalendarPickerComponent,
        typeof 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 NbCalendarComponent],
    [typeof NbBaseCalendarModule],
    [typeof NbCalendarComponent]
>;

class NbCalendarMonthCellComponent

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

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

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> {}

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

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> {}

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

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 {}

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

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>> {}

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

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 NbCalendarRangeComponent,
        typeof NbCalendarRangeDayCellComponent,
        typeof NbCalendarRangeYearCellComponent,
        typeof NbCalendarRangeMonthCellComponent
    ],
    [typeof NbBaseCalendarModule],
    [typeof NbCalendarRangeComponent]
>;

class NbCalendarRangeMonthCellComponent

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

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

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>> {}

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

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> {}

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

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 {}

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

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 NbCardComponent,
        typeof NbCardBodyComponent,
        typeof NbCardFooterComponent,
        typeof NbCardHeaderComponent,
        typeof NbRevealCardComponent,
        typeof NbFlipCardComponent,
        typeof NbCardFrontComponent,
        typeof NbCardBackComponent
    ],
    [typeof NbSharedModule, typeof NbIconModule],
    [
        typeof NbCardComponent,
        typeof NbCardBodyComponent,
        typeof NbCardFooterComponent,
        typeof NbCardHeaderComponent,
        typeof NbRevealCardComponent,
        typeof NbFlipCardComponent,
        typeof NbCardFrontComponent,
        typeof 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 {}

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

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbChatModule,
    [
        typeof NbChatComponent,
        typeof NbChatMessageComponent,
        typeof NbChatFormComponent,
        typeof NbChatMessageTextComponent,
        typeof NbChatMessageFileComponent,
        typeof NbChatMessageQuoteComponent,
        typeof NbChatMessageMapComponent,
        typeof NbChatAvatarComponent,
        typeof NbChatCustomMessageDirective,
        typeof NbChatTitleDirective
    ],
    [
        typeof NbSharedModule,
        typeof NbIconModule,
        typeof NbInputModule,
        typeof NbButtonModule
    ],
    [
        typeof NbChatComponent,
        typeof NbChatMessageComponent,
        typeof NbChatFormComponent,
        typeof NbChatMessageTextComponent,
        typeof NbChatMessageFileComponent,
        typeof NbChatMessageQuoteComponent,
        typeof NbChatMessageMapComponent,
        typeof NbChatAvatarComponent,
        typeof NbChatCustomMessageDirective,
        typeof 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 NbCheckboxComponent],
    [typeof NbSharedModule, typeof NbIconModule],
    [typeof 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 NbContextMenuDirective, typeof NbContextMenuComponent],
    [any, typeof NbOverlayModule, typeof NbMenuModule],
    [typeof 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 NbDatepickerDirective,
        typeof NbDatepickerContainerComponent,
        typeof NbCalendarWithTimeComponent,
        typeof NbDateTimePickerComponent,
        typeof NbDatepickerComponent,
        typeof NbRangepickerComponent,
        typeof NbBasePickerComponent
    ],
    [
        typeof NbOverlayModule,
        typeof NbCalendarModule,
        typeof NbCalendarRangeModule,
        typeof NbCardModule,
        typeof NbBaseCalendarModule,
        typeof NbTimepickerModule,
        typeof NbCalendarKitModule
    ],
    [
        typeof NbDatepickerDirective,
        typeof NbDatepickerComponent,
        typeof NbRangepickerComponent,
        typeof NbDateTimePickerComponent,
        typeof 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,
    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, { 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 {}

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

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NbDialogModule,
    [typeof NbDialogContainerComponent],
    [typeof NbSharedModule, typeof 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
);

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,
    zone: NgZone,
    overlayContainer: NbOverlayContainer
);

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<i1.OverlayRef>;

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 NbFormFieldComponent,
        typeof NbPrefixDirective,
        typeof NbSuffixDirective
    ],
    [any],
    [
        typeof NbFormFieldComponent,
        typeof NbPrefixDirective,
        typeof 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 }
) => _nebular_theme.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 NbIconComponent],
    [any],
    [typeof 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 NbInputDirective],
    [typeof NbSharedModule],
    [typeof 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 NbLayoutComponent,
        typeof NbLayoutColumnComponent,
        typeof NbLayoutFooterComponent,
        typeof NbLayoutHeaderComponent,
        typeof NbLtrDirective,
        typeof NbRtlDirective
    ],
    [typeof NbSharedModule],
    [
        typeof NbLayoutComponent,
        typeof NbLayoutColumnComponent,
        typeof NbLayoutFooterComponent,
        typeof NbLayoutHeaderComponent,
        typeof NbLtrDirective,
        typeof 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 NbListComponent,
        typeof NbListItemComponent,
        typeof NbListPageTrackerDirective,
        typeof NbInfiniteListDirective
    ],
    never,
    [
        typeof NbListComponent,
        typeof NbListItemComponent,
        typeof NbListPageTrackerDirective,
        typeof 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?: 'prefix' | 'full';

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 NbMenuComponent, typeof NbMenuItemComponent],
    [typeof NbSharedModule, typeof NbIconModule, typeof NbBadgeModule],
    [typeof NbMenuComponent, typeof 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 NbOptionListComponent,
        typeof NbOptionComponent,
        typeof NbOptionGroupComponent
    ],
    [any, typeof NbCheckboxModule],
    [
        typeof NbOptionListComponent,
        typeof NbOptionComponent,
        typeof 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: () => DestroyableInjector;

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 NbPositionedContainerComponent, typeof NbOverlayContainerComponent],
    [typeof NbCdkMappingModule, typeof NbSharedModule],
    [
        typeof NbCdkMappingModule,
        typeof NbCdkAdapterModule,
        typeof 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 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 };
    },
    {},
    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 NbPopoverDirective, typeof NbPopoverComponent],
    [typeof NbOverlayModule],
    [typeof 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 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 NbProgressBarComponent],
    [typeof NbSharedModule],
    [typeof 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 NbRadioComponent, typeof NbRadioGroupComponent],
    never,
    [typeof NbRadioComponent, typeof 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

@nebular/theme

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Variables

variable BUILT_IN_THEMES

variable CORPORATE_THEME

variable COSMIC_THEME

variable DARK_THEME

variable DEFAULT_MEDIA_BREAKPOINTS

variable DEFAULT_THEME

variable MONTHS_IN_COLUMN

variable MONTHS_IN_VIEW

variable NB_BUILT_IN_JS_THEMES

variable NB_BUTTON_GROUP

variable NB_DATE_ADAPTER

variable NB_DATE_SERVICE_OPTIONS

variable NB_DEFAULT_ROW_LEVEL

variable NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG

variable NB_DIALOG_CONFIG

variable NB_DOCUMENT

variable NB_JS_THEMES

variable NB_LAYOUT_DIRECTION

variable NB_MEDIA_BREAKPOINTS

variable NB_ROW_DOUBLE_CLICK_DELAY

variable NB_SELECT_INJECTION_TOKEN

variable NB_SORT_HEADER_COLUMN_DEF

variable NB_STEPPER

variable NB_TABLE_PROVIDERS

variable NB_TABLE_TEMPLATE

variable NB_THEME_OPTIONS

variable NB_TIME_PICKER_CONFIG

variable NB_TOASTR_CONFIG

variable NB_TREE_GRID

variable NB_VIEW_REPEATER_STRATEGY

variable NB_WINDOW

variable NB_WINDOW_CONFIG

variable NB_WINDOW_CONTENT

variable NB_WINDOW_CONTEXT

variable NB_WINDOW_DEFAULT_BUTTONS_CONFIG

Functions

function createContainer

function nbSelectFormFieldControlConfigFactory

function patch

function windowFactory

Classes

class NbA11yModule

property ɵfac

property ɵinj

property ɵmod

method forRoot

class NbAccordionComponent

property multi

property ngAcceptInputType_multi

property openCloseItems

property ɵcmp

property ɵfac

method closeAll

method openAll

class NbAccordionItemBodyComponent

constructor

property ɵcmp

property ɵfac

property state

method ngOnDestroy

method ngOnInit

class NbAccordionItemComponent

constructor

property accordionItemInvalidate

property collapsed

property collapsedChange

property disabled

property expanded

property ngAcceptInputType_collapsed