@nebular/theme
- Version 15.0.0
- Published
- 6.72 MB
- 1 dependency
- MIT license
Install
npm i @nebular/theme
yarn add @nebular/theme
pnpm add @nebular/theme
Overview
@nebular/theme
Index
Variables
- BUILT_IN_THEMES
- CORPORATE_THEME
- COSMIC_THEME
- DARK_THEME
- DEFAULT_MEDIA_BREAKPOINTS
- DEFAULT_THEME
- MONTHS_IN_COLUMN
- MONTHS_IN_VIEW
- NB_BUILT_IN_JS_THEMES
- NB_BUTTON_GROUP
- NB_COALESCED_STYLE_SCHEDULER
- NB_DATE_ADAPTER
- NB_DATE_SERVICE_OPTIONS
- NB_DEFAULT_ROW_LEVEL
- NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG
- NB_DIALOG_CONFIG
- NB_DOCUMENT
- NB_JS_THEMES
- NB_LAYOUT_DIRECTION
- NB_MEDIA_BREAKPOINTS
- NB_ROW_DOUBLE_CLICK_DELAY
- NB_SELECT_INJECTION_TOKEN
- NB_SORT_HEADER_COLUMN_DEF
- NB_STEPPER
- NB_TABLE_PROVIDERS
- NB_TABLE_TEMPLATE
- NB_THEME_OPTIONS
- NB_TIME_PICKER_CONFIG
- NB_TOASTR_CONFIG
- NB_TREE_GRID
- NB_VIEW_REPEATER_STRATEGY
- NB_WINDOW
- NB_WINDOW_CONFIG
- NB_WINDOW_CONTENT
- NB_WINDOW_CONTEXT
- NB_WINDOW_DEFAULT_BUTTONS_CONFIG
Functions
Classes
NbAlertComponent
- accent
- additionalClasses
- basic
- basicAccent
- basicOutline
- closable
- close
- control
- controlAccent
- controlOutline
- danger
- dangerAccent
- dangerOutline
- giant
- info
- infoAccent
- infoOutline
- large
- medium
- ngAcceptInputType_closable
- onClose()
- outline
- ɵcmp
- ɵfac
- primary
- primaryAccent
- primaryOutline
- size
- small
- status
- statusService
- success
- successAccent
- successOutline
- tiny
- warning
- warningAccent
- warningOutline
NbAutocompleteDirective
- activeDescendantKeyManagerFactory
- ariaActiveDescendant
- ariaAutocomplete
- ariaExpanded
- ariaOwns
- attachToOverlay()
- autocomplete
- bottom
- cd
- checkOverlayVisibility()
- createKeyManager()
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- customOverlayHost
- destroy$
- getActiveItem()
- getContainer()
- getDisplayValue()
- handleBlur()
- handleInput()
- handleInputValueUpdate()
- handleKeydown()
- hasPopup
- hide()
- hostRef
- initOverlay()
- isClosed
- isOpen
- keyManager
- ngAfterViewInit()
- ngOnDestroy()
- overlay
- overlayOffset
- overlayRef
- ɵdir
- ɵfac
- positionBuilder
- positionStrategy
- registerOnChange()
- registerOnTouched()
- renderer
- role
- scrollStrategy
- setActiveItem()
- setDisabledState()
- setHostInputValue()
- setupAutocomplete()
- shouldShow()
- show()
- subscribeOnOptionClick()
- subscribeOnOverlayKeys()
- subscribeOnPositionChange()
- subscribeOnTriggers()
- top
- triggerStrategy
- triggerStrategyBuilder
- writeValue()
NbBaseCalendarComponent
- activeViewMode
- boundingMonth
- date
- dateChange
- dateService
- dayCellComponent
- filter
- firstDayOfWeek
- large
- max
- min
- monthCellComponent
- navigateNext()
- navigatePrev()
- nextMonth()
- nextYear()
- nextYears()
- ngAcceptInputType_activeViewMode
- ngAcceptInputType_showWeekNumber
- ngAcceptInputType_size
- ngOnInit()
- onChangeViewMode()
- ɵcmp
- ɵfac
- prevMonth()
- prevYear()
- prevYears()
- setViewMode()
- setVisibleDate()
- showNavigation
- showWeekNumber
- size
- ViewMode
- visibleDate
- weekNumberSymbol
- yearCellComponent
- yearModelService
NbBasePicker
- adjustment
- attach()
- blur
- blur$
- boundingMonth
- cfr
- checkFormat()
- container
- createOverlay()
- createPositionStrategy()
- createTriggerStrategy()
- dateService
- dateServiceOptions
- dayCellComponent
- destroy$
- filter
- firstDayOfWeek
- format
- formatChanged$
- getValidatorConfig()
- hide()
- hideOnSelect
- hostRef
- init
- init$
- instantiatePicker()
- isShown
- max
- min
- monthCellComponent
- onChange$
- openDatepicker()
- overlay
- overlayOffset
- patchWithInputs()
- picker
- pickerClass
- pickerRef
- pickerValueChange
- positionBuilder
- positionStrategy
- queue
- ref
- shouldHide()
- show()
- showNavigation
- showWeekNumber
- size
- startView
- subscribeOnPositionChange()
- subscribeOnTriggers()
- subscribeOnValueChange()
- triggerStrategy
- triggerStrategyBuilder
- valueChange
- visibleDate
- weekNumberSymbol
- writeQueue()
- yearCellComponent
NbBasePickerComponent
- adjustment
- boundingMonth
- dayCellComponent
- filter
- firstDayOfWeek
- format
- hideOnSelect
- max
- min
- monthCellComponent
- ngAcceptInputType_adjustment
- ngAcceptInputType_showWeekNumber
- ngAcceptInputType_size
- ngAcceptInputType_startView
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- overlayOffset
- ɵcmp
- ɵfac
- pickerClass
- pickerValueChange
- showNavigation
- showWeekNumber
- size
- startView
- value
- visibleDate
- weekNumberSymbol
- writeQueue()
- yearCellComponent
NbButton
- additionalClasses
- appearance
- cd
- disabled
- filled
- fullWidth
- ghost
- giant
- hostElement
- iconElement
- iconLeft
- iconRight
- icons
- isIconExist()
- large
- medium
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_fullWidth
- ngAcceptInputType_ghost
- ngAcceptInputType_outline
- ngAfterContentChecked()
- ngAfterViewInit()
- nodes
- outline
- ɵdir
- ɵfac
- rectangle
- renderer
- round
- semiRound
- shape
- size
- small
- status
- statusService
- tabbable
- tabIndex
- tiny
- updateProperties()
- zone
NbButtonGroupComponent
- additionalClasses
- appearance
- buttons
- buttonsChange$
- cd
- destroy$
- disabled
- emitCurrentValue()
- filled
- ghost
- lastEmittedValue
- listenButtonPressedState()
- multiple
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_ghost
- ngAcceptInputType_multiple
- ngAcceptInputType_outline
- ngAfterContentInit()
- ngOnChanges()
- outline
- ɵcmp
- ɵfac
- role
- shape
- size
- status
- statusService
- syncButtonsProperties()
- valueChange
NbCalendarWithTimeComponent
- applyButtonText
- calendarTimeModelService
- cd
- currentTimeButtonText
- dateService
- isLarge()
- ngAfterViewInit()
- ngOnInit()
- onDateValueChange()
- onTimeChange()
- ɵcmp
- ɵfac
- portalOutlet
- saveCurrentTime()
- saveValue()
- showAmPmLabel
- showCurrentTimeButton
- showSeconds()
- singleColumn
- step
- timeFormat
- timepicker
- title
- twelveHoursFormat
- visibleDate
- withSeconds
NbChatComponent
- additionalClasses
- basic
- chatForm
- control
- danger
- giant
- info
- large
- medium
- messages
- ngAcceptInputType_scrollBottom
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnChanges()
- noMessagesPlaceholder
- ɵcmp
- ɵfac
- primary
- scrollable
- scrollBottom
- scrollListBottom()
- size
- small
- status
- statusService
- success
- tiny
- title
- titleTemplate
- updateFormStatus()
- updateView()
- warning
NbChatFormComponent
- buttonIcon
- buttonTitle
- cd
- domSanitizer
- dropFilePlaceholder
- dropFiles
- droppedFiles
- fileOver
- getButtonStatus()
- getHighlightStatus()
- getInputStatus()
- imgDropTypes
- inputFocus
- inputHover
- message
- messagePlaceholder
- onDragLeave()
- onDragOver()
- onDrop()
- onInputChange
- onModelChange()
- ɵcmp
- ɵfac
- removeFile()
- send
- sendMessage()
- setStatus()
- showButton
- status
NbCheckboxComponent
- additionalClasses
- basic
- checked
- checkedChange
- control
- danger
- disabled
- indeterminate
- info
- ngAcceptInputType_checked
- ngAcceptInputType_disabled
- ngAcceptInputType_indeterminate
- ngAfterViewInit()
- onChange
- onTouched
- ɵcmp
- ɵfac
- primary
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- setTouched()
- status
- success
- updateValueAndIndeterminate()
- warning
- writeValue()
NbDatepickerDirective
- changeDetector
- chooseDatepickerAdapter()
- datepickerAdapter
- datepickerAdapters
- dateService
- destroy$
- document
- filterValidator()
- handleInputChange()
- hidePicker()
- hostRef
- input
- inputValue
- isDatepickerReady
- maxValidator()
- minValidator()
- ngOnDestroy()
- noDatepickerAdapterProvided()
- onChange
- onTouched
- ɵdir
- ɵfac
- parseInputValue()
- parseValidator()
- picker
- pickerInputsChangedSubscription
- queue
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- setupPicker()
- subscribeOnInputChange()
- validate()
- validator
- writeInput()
- writePicker()
- writeValue()
NbDateService
- addDay()
- addHours()
- addMinutes()
- addMonth()
- addYear()
- clone()
- compareDates()
- createDate()
- DAYS_IN_WEEK
- format()
- getDate()
- getDateFormat()
- getDayOfWeek()
- getDayOfWeekNames()
- getDayPeriod()
- getFirstDayOfWeek()
- getHours()
- getId()
- getLocaleTimeFormat()
- getMilliseconds()
- getMinutes()
- getMonth()
- getMonthEnd()
- getMonthName()
- getMonthNameByIndex()
- getMonthStart()
- getNumberOfDaysInMonth()
- getSeconds()
- getTwelveHoursFormat()
- getTwelveHoursFormatWithSeconds()
- getTwentyFourHoursFormat()
- getTwentyFourHoursFormatWithSeconds()
- getWeekNumber()
- getYear()
- getYearEnd()
- getYearStart()
- HOURS_IN_DAY_PERIOD
- isBetween()
- isSameDay()
- isSameDaySafe()
- isSameHour()
- isSameHourAndMinute()
- isSameMinute()
- isSameMonth()
- isSameMonthSafe()
- isSameYear()
- isSameYearSafe()
- isValidDateString()
- isValidTimeString()
- locale
- parse()
- setHours()
- setLocale()
- setMilliseconds()
- setMinutes()
- setSeconds()
- today()
- valueOf()
NbDateTimePickerComponent
- applyButtonText
- buildTimeFormat()
- calendarWithTimeModelService
- currentTimeButtonText
- dateTimeChange
- ngAcceptInputType_showAmPmLabel
- ngAcceptInputType_singleColumn
- ngAcceptInputType_twelveHoursFormat
- ngAcceptInputType_withSeconds
- ngOnInit()
- ɵcmp
- ɵfac
- patchWithInputs()
- pickerClass
- pickerValueChange
- showAmPmLabel
- showCurrentTimeButton
- singleColumn
- step
- title
- twelveHoursFormat
- value
- withSeconds
- writeQueue()
NbDynamicOverlay
- componentFactoryResolver
- componentType
- container
- content
- context
- create()
- createContainerContext()
- createOverlay()
- destroy$
- disabled
- dispose()
- disposeOverlayRef()
- getContainer()
- hasOverlayInContainer()
- hide()
- isAttached
- isShown
- isShown$
- lastAppliedPosition
- overlay
- overlayConfig
- overlayContainer
- overlayDestroy$
- ɵfac
- ɵprov
- positionStrategy
- positionStrategyChange$
- ref
- renderContainer()
- setComponent()
- setContent()
- setContentAndContext()
- setContext()
- setDisabled()
- setOverlayConfig()
- setPositionStrategy()
- show()
- toggle()
- updateContext()
- updatePosition()
- updatePositionWhenStable()
- zone
NbDynamicOverlayHandler
- adjustment()
- build()
- changes
- clearChanges()
- componentType()
- connect()
- content()
- context()
- createPositionStrategy()
- destroy()
- destroy$
- disabled()
- disconnect()
- dynamicOverlay
- host()
- isAdjustmentUpdated()
- isComponentTypeUpdated()
- isComponentTypeUpdateRequired()
- isContainerRerenderRequired()
- isContentUpdated()
- isContextUpdated()
- isDisabledUpdated()
- isHostUpdated()
- isOffsetUpdated()
- isOverlayConfigUpdated()
- isPositionStrategyUpdateRequired()
- isPositionUpdated()
- isTriggerStrategyUpdateRequired()
- isTriggerUpdated()
- offset()
- overlayConfig()
- ɵfac
- ɵprov
- position()
- positionStrategy
- rebuild()
- subscribeOnDirectionChange()
- subscribeOnTriggers()
- trigger()
- triggerStrategy
NbFormFieldComponent
- cd
- destroy$
- elementRef
- formControl
- formControlConfig
- formControlState$
- formFieldClasses
- getAddonClasses()
- getFormControlConfig()
- isStatesEqual()
- ngAfterContentChecked()
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnDestroy()
- ɵcmp
- ɵfac
- prefix
- prefixClasses$
- renderer
- shouldShowPrefix()
- shouldShowSuffix()
- subscribeToAddonChange()
- subscribeToFormControlStateChange()
- suffix
- suffixClasses$
- zone
NbInputDirective
- additionalClasses
- basic
- control
- danger
- destroy$
- disabled$
- elementRef
- fieldSize
- focused$
- focusMonitor
- fullWidth
- fullWidth$
- giant
- info
- large
- medium
- ngAcceptInputType_fullWidth
- ngAfterViewInit()
- ngDoCheck()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- ɵdir
- ɵfac
- primary
- rectangle
- renderer
- round
- semiRound
- shape
- size$
- small
- status
- status$
- statusService
- success
- tiny
- warning
- zone
NbLayoutComponent
- afterViewInit$
- blockScroll()
- centerValue
- document
- elementRef
- getDimensions()
- getScrollPosition()
- isScrollBlocked
- layoutContainerRef
- layoutDirectionService
- layoutPaddingOldValue
- ngAcceptInputType_center
- ngAcceptInputType_restoreScrollTop
- ngAcceptInputType_windowMode
- ngAcceptInputType_withScroll
- ngAfterViewInit()
- ngOnDestroy()
- onResize()
- onScroll()
- overlayContainer
- ɵcmp
- ɵfac
- platformId
- registerAsOverlayContainer()
- renderer
- restoreScrollTopValue
- rulerService
- scrollableContainerOverflowOldValue
- scrollableContainerRef
- scrollBlockClass
- scrollService
- scrollTop
- spinnerService
- themeService
- unregisterAsOverlayContainer()
- veryTopRef
- window
- windowModeValue
- withScrollValue
- withSubheader
NbNativeDateService
- addDay()
- addHours()
- addMinutes()
- addMonth()
- addYear()
- clone()
- compareDates()
- createDate()
- datePipe
- format()
- getDate()
- getDateFormat()
- getDayOfWeek()
- getDayOfWeekNames()
- getFirstDayOfWeek()
- getHours()
- getId()
- getLocaleTimeFormat()
- getMilliseconds()
- getMinutes()
- getMonth()
- getMonthEnd()
- getMonthName()
- getMonthNameByIndex()
- getMonthStart()
- getNumberOfDaysInMonth()
- getSeconds()
- getTwelveHoursFormat()
- getWeekNumber()
- getYear()
- getYearEnd()
- getYearStart()
- isSameDay()
- isSameMonth()
- isSameYear()
- isValidDateString()
- isValidTimeString()
- ɵfac
- ɵprov
- parse()
- setHours()
- setLocale()
- setMilliseconds()
- setMinutes()
- setSeconds()
- today()
- valueOf()
NbOptionComponent
- activeClass
- alive
- cd
- click
- click$
- content
- deselect()
- disabled
- disabledAttribute
- disabledByGroup
- elementRef
- focus()
- getLabel()
- hidden
- id
- multiple
- ngAcceptInputType_disabled
- ngAfterViewInit()
- ngOnDestroy()
- onClick()
- ɵcmp
- ɵfac
- parent
- renderer
- select()
- selected
- selectedClass
- selectionChange
- setActiveStyles()
- setDisabledByGroupState()
- setInactiveStyles()
- setSelection()
- tabindex
- value
- withCheckbox
- zone
NbPopoverDirective
- adjustment
- configureDynamicOverlay()
- content
- context
- destroy$
- disabled
- dynamicOverlay
- dynamicOverlayHandler
- hide()
- hostRef
- isShown
- nbPopoverShowStateChange
- ngAcceptInputType_adjustment
- ngAcceptInputType_position
- ngAcceptInputType_trigger
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- offset
- overlayConfig
- ɵdir
- ɵfac
- popoverClass
- popoverComponent
- position
- rebuild()
- show()
- toggle()
- trigger
NbRadioGroupComponent
- destroy$
- disabled
- document
- hostElement
- name
- ngAcceptInputType_disabled
- ngAfterContentInit()
- ngOnDestroy()
- onChange
- onTouched
- ɵcmp
- ɵfac
- platformId
- propagateValue()
- radios
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- status
- subscribeOnRadiosBlur()
- subscribeOnRadiosValueChange()
- updateAndMarkForCheckRadios()
- updateAndSubscribeToRadios()
- updateDisabled()
- updateNames()
- updateStatus()
- updateValueFromCheckedOption()
- updateValues()
- value
- valueChange
- writeValue()
NbSearchFieldComponent
- close
- columnCurtain
- curtain
- emitClose()
- emitSearchInput()
- focusInput()
- hint
- inputElement
- modalDrop
- modalHalf
- modalMove
- modalZoomin
- ngAfterViewInit()
- ngOnChanges()
- ɵcmp
- ɵfac
- placeholder
- rotateLayout
- search
- searchInput
- show
- showClass
- submitSearch()
- type
- TYPE_COLUMN_CURTAIN
- TYPE_CURTAIN
- TYPE_MODAL_DROP
- TYPE_MODAL_HALF
- TYPE_MODAL_MOVE
- TYPE_MODAL_ZOOMIN
- TYPE_ROTATE_LAYOUT
NbSelectComponent
- additionalClasses
- alive
- appearance
- attachToOverlay()
- basic
- button
- canSelectValue()
- cd
- compareWith
- control
- createKeyManager()
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- customLabel
- danger
- destroy$
- disabled
- disabled$
- document
- emitSelected()
- filled
- focused$
- focusKeyManagerFactoryService
- focusMonitor
- fullWidth
- fullWidth$
- getContainer()
- giant
- handleMultipleSelect()
- handleOptionClick()
- handleSingleSelect()
- hero
- hide()
- hostRef
- hostWidth
- info
- isClickedWithinComponent()
- isHidden
- isOpen
- keyManager
- large
- medium
- multiple
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_fullWidth
- ngAcceptInputType_hero
- ngAcceptInputType_multiple
- ngAcceptInputType_outline
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- onChange
- onTouched
- options
- optionsListClass
- optionsOverlayOffset
- optionsPanelClass
- optionsWidth
- outline
- overlay
- overlayPosition
- ɵcmp
- ɵfac
- placeholder
- portal
- positionBuilder
- positionStrategy
- primary
- queue
- rectangle
- ref
- registerOnChange()
- registerOnTouched()
- renderer
- reset()
- round
- scrollStrategy
- selectButtonClasses
- selected
- selectedChange
- selectionModel
- selectionView
- selectOption()
- selectValue()
- semiRound
- setActiveOption()
- setDisabledState()
- setSelection()
- shape
- shouldShow()
- show()
- size
- size$
- small
- status
- status$
- statusService
- subscribeOnButtonFocus()
- subscribeOnOptionClick()
- subscribeOnOverlayKeys()
- subscribeOnPositionChange()
- subscribeOnTriggers()
- success
- tiny
- triggerStrategy
- triggerStrategyBuilder
- trySetTouched()
- warning
- writeValue()
- zone
NbSelectWithAutocompleteComponent
- activeDescendantKeyManager
- activeDescendantKeyManagerFactoryService
- additionalClasses
- alive
- appearance
- attachToOverlay()
- basic
- button
- canSelectValue()
- cd
- compareWith
- control
- createKeyManager()
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- currentKeyManager
- customLabel
- danger
- destroy$
- disabled
- disabled$
- document
- emitSelected()
- filled
- focusButton()
- focused$
- focusKeyManager
- focusKeyManagerFactoryService
- focusMonitor
- fullWidth
- fullWidth$
- getContainer()
- giant
- handleMultipleSelect()
- handleOptionClick()
- handleSingleSelect()
- hero
- hide()
- hostRef
- hostWidth
- info
- isClickedWithinComponent()
- isHidden
- isOpen
- isOptionHidden()
- isOptionsAutocompleteAllowed
- isOptionsAutocompleteInputShown
- large
- lastShownButtonWidth
- medium
- multiple
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_fullWidth
- ngAcceptInputType_hero
- ngAcceptInputType_multiple
- ngAcceptInputType_outline
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- onAutocompleteInputChange()
- onChange
- onTouched
- options
- optionsAutocompleteInput
- optionsAutocompleteInputChange
- optionsListClass
- optionsOverlayOffset
- optionsPanelClass
- optionsWidth
- outline
- overlay
- overlayPosition
- ɵcmp
- ɵfac
- placeholder
- portal
- positionBuilder
- positionStrategy$
- primary
- queue
- rectangle
- ref
- registerOnChange()
- registerOnTouched()
- renderer
- reset()
- resetAutocompleteInput()
- round
- scrollStrategy
- selectButtonClasses
- selectClose
- selected
- selectedChange
- selectionModel
- selectionView
- selectOpen
- selectOption()
- selectValue()
- semiRound
- setActiveOption()
- setDisabledState()
- setSelection()
- shape
- shouldShow()
- show()
- size
- size$
- small
- status
- status$
- statusService
- subscribeOnButtonFocus()
- subscribeOnOptionClick()
- subscribeOnOptionsAutocompleteChange()
- subscribeOnOverlayKeys()
- subscribeOnPositionChange()
- subscribeOnTriggers()
- success
- tiny
- triggerStrategy
- triggerStrategyBuilder
- trySetTouched()
- updateCurrentKeyManager()
- updatePositionStrategy()
- warning
- withOptionsAutocomplete
- writeValue()
- zone
NbSidebarComponent
- collapse()
- collapsed
- collapsedBreakpoints
- compact()
- compacted
- compactedBreakpoints
- containerFixedValue
- destroy$
- endValue
- expand()
- expanded
- fixedValue
- getMenuLink()
- leftValue
- ngAcceptInputType_containerFixed
- ngAcceptInputType_end
- ngAcceptInputType_fixed
- ngAcceptInputType_left
- ngAcceptInputType_responsive
- ngAcceptInputType_right
- ngAcceptInputType_start
- ngOnDestroy()
- ngOnInit()
- onClick()
- ɵcmp
- ɵfac
- responsive
- responsiveState
- responsiveStateChange
- responsiveValueChange$
- rightValue
- startValue
- state
- stateChange
- subscribeToMediaQueryChange()
- tag
- toggle()
- updateState()
NbTabComponent
- active
- activeValue
- badgeDot
- badgePosition
- badgeStatus
- badgeText
- disabled
- disabledValue
- init
- ngAcceptInputType_active
- ngAcceptInputType_badgeDot
- ngAcceptInputType_disabled
- ngAcceptInputType_lazyLoad
- ngAcceptInputType_responsive
- ɵcmp
- ɵfac
- responsive
- responsiveValue
- route
- tabContentDirective
- tabIcon
- tabId
- tabTitle
- tabTitleDirective
NbTagComponent
- additionalClasses
- appearance
- basic
- cd
- control
- danger
- destroy$
- filled
- giant
- info
- large
- medium
- ngAcceptInputType_removable
- ngAcceptInputType_selected
- ngAfterViewInit()
- ngOnDestroy()
- outline
- ɵcmp
- ɵfac
- primary
- removable
- remove
- renderer
- role
- selected
- selectedChange
- setActiveStyles()
- setInactiveStyles()
- size
- small
- status
- statusService
- success
- text
- tiny
- warning
- zone
NbTagListComponent
- activeDescendantKeyManagerFactory
- activeTagId
- autocompleteDirective
- cd
- destroy$
- directionService
- focused
- focusInput()
- focusInputIfActive()
- focusMonitor
- hostElement
- initKeyManager()
- isBackspaceOrDelete()
- keyDown$
- keyManager
- listenActiveTagChange()
- listenInputKeyDown()
- listenListKeyDown()
- listenNoTags()
- listenTagClick()
- listenTagDestroy()
- listenTagRemove()
- listenToLayoutDirectionChange()
- multiple
- ngAcceptInputType_multiple
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnDestroy()
- ngOnInit()
- onFocusChange()
- ɵcmp
- ɵfac
- renderer
- role
- setAutocompleteCustomHost()
- size
- statusService
- tabIndex
- tagClick$
- tagInput
- tagRemove
- tags
- toggleTag()
- zone
NbTimePickerComponent
- ampmText
- applyButtonText
- attach()
- blur
- blur$
- buildColumnOptions()
- buildTimeFormat()
- calendarTimeModelService
- cd
- changeDayPeriod()
- computedTimeFormat
- config
- currentTimeButtonText
- date
- dateService
- dayPeriodColumnOptions
- fullTimeOptions
- generateHours()
- generateMinutesOrSeconds()
- getFullTimeString()
- hostRef
- hoursColumnOptions
- hoursText
- initFromConfig()
- isAM
- isFirefox()
- isSelectedDayPeriod()
- isSelectedFullTimeValue()
- isSelectedHour()
- isSelectedMinute()
- isSelectedSecond()
- minutesColumnOptions
- minutesText
- ngAcceptInputType_showAmPmLabel
- ngAcceptInputType_singleColumn
- ngAcceptInputType_twelveHoursFormat
- ngAcceptInputType_withSeconds
- ngOnChanges()
- onSelectTime
- ɵcmp
- ɵfac
- platformService
- portal
- saveValue()
- secondsColumnOptions
- secondsText
- selectFullTime()
- setCurrentTime()
- setHost()
- setHour()
- setMinute()
- setSecond()
- setupTimeFormat()
- showAmPmLabel
- showFooter
- showSeconds()
- singleColumn
- step
- timeFormat
- timepickerFormatChange$
- trackByDayPeriod()
- trackBySingleColumnValue()
- trackByTimeValues()
- twelveHoursFormat
- updateValue()
- withSeconds
NbTimePickerDirective
- attachToOverlay()
- calendarTimeModelService
- cd
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- dateService
- destroy$
- document
- getContainer()
- handleInputChange()
- hide()
- hostRef
- initOverlay()
- input
- inputValue
- isClosed
- isOpen
- lastInputValue
- ngAfterViewInit()
- onChange
- onTouched
- overlay
- overlayOffset
- overlayRef
- ɵdir
- ɵfac
- parseNativeDateString()
- pickerInputsChangedSubscription
- placeholder
- positionBuilder
- positionStrategy
- registerOnChange()
- registerOnTouched()
- renderer
- setDisabledState()
- setupTimepicker()
- show()
- subscribeOnApplyClick()
- subscribeOnInputChange()
- subscribeOnTriggers()
- subscribeToBlur()
- timepicker
- triggerStrategy
- triggerStrategyBuilder
- updateValue()
- writeValue()
NbToggleComponent
- additionalClasses
- basic
- checked
- checkedChange
- checkState()
- control
- danger
- disabled
- info
- labelEnd
- labelLeft
- labelPosition
- labelRight
- labelStart
- ngAcceptInputType_checked
- ngAcceptInputType_disabled
- ngAfterViewInit()
- ngOnDestroy()
- ngOnInit()
- onChange
- onInputClick()
- onTouched
- ɵcmp
- ɵfac
- primary
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- status
- statusService
- success
- updateValue()
- warning
- writeValue()
NbTooltipDirective
- adjustment
- configureDynamicOverlay()
- content
- context
- destroy$
- disabled
- dynamicOverlay
- dynamicOverlayHandler
- hide()
- hostRef
- isShown
- nbTooltipShowStateChange
- ngAcceptInputType_adjustment
- ngAcceptInputType_position
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- offset
- overlayConfig
- ɵdir
- ɵfac
- position
- rebuild()
- show()
- toggle()
- tooltipClass
- tooltipComponent
- trigger
NbWindowComponent
- attachComponent()
- attachTemplate()
- cfr
- close()
- config
- content
- context
- elementRef
- focusTrap
- focusTrapFactory
- fullScreen()
- isFullScreen
- maximize()
- maximized
- maximizeOrFullScreen()
- minimize()
- minimized
- ngAfterViewChecked()
- ngOnDestroy()
- ngOnInit()
- overlayContainer
- ɵcmp
- ɵfac
- renderer
- showClose
- showFullScreen
- showMaximize
- showMinimize
- windowRef
Interfaces
Enums
Type Aliases
- NbAdjustmentValues
- NbBadgeLogicalPosition
- NbBadgePhysicalPosition
- NbBadgePosition
- NbButtonAppearance
- NbButtonProperties
- NbButtonToggleAppearance
- NbCalendarSizeValues
- NbCalendarViewModeValues
- NbChatMessageFile
- NbChildrenGetter
- NbComponentOrCustomStatus
- NbComponentShape
- NbComponentSize
- NbComponentStatus
- NbComponentType
- NbConnectedOverlayPositionChange
- NbConnectedPosition
- NbConnectionPositionPair
- NbDataGetter
- NbDuplicateToastBehaviour
- NbExpandedGetter
- NbFocusableOption
- NbFormControlAddon
- NbGlobalPosition
- NbOverlayConfig
- NbOverlayContent
- NbOverlayRef
- NbPortal
- NbPositionStrategy
- NbPositionValues
- NbScrollStrategies
- NbScrollStrategy
- NbSearchType
- NbSelectAppearance
- NbSelectCompareFunction
- NbSidebarResponsiveState
- NbSidebarState
- NbSortDirectionValues
- NbStepperOrientation
- NbTagAppearance
- NbTriggerValues
Variables
variable BUILT_IN_THEMES
const BUILT_IN_THEMES: NbJSThemeOptions[];
variable CORPORATE_THEME
const CORPORATE_THEME: NbJSThemeOptions;
variable COSMIC_THEME
const COSMIC_THEME: NbJSThemeOptions;
variable DARK_THEME
const DARK_THEME: NbJSThemeOptions;
variable DEFAULT_MEDIA_BREAKPOINTS
const DEFAULT_MEDIA_BREAKPOINTS: { name: string; width: number }[];
variable DEFAULT_THEME
const DEFAULT_THEME: NbJSThemeOptions;
variable MONTHS_IN_COLUMN
const MONTHS_IN_COLUMN: number;
variable MONTHS_IN_VIEW
const MONTHS_IN_VIEW: number;
variable NB_BUILT_IN_JS_THEMES
const NB_BUILT_IN_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;
variable NB_BUTTON_GROUP
const NB_BUTTON_GROUP: InjectionToken<NbButtonGroupComponent>;
variable NB_COALESCED_STYLE_SCHEDULER
const NB_COALESCED_STYLE_SCHEDULER: any;
variable NB_DATE_ADAPTER
const NB_DATE_ADAPTER: InjectionToken<NbDatepickerAdapter<any>>;
variable NB_DATE_SERVICE_OPTIONS
const NB_DATE_SERVICE_OPTIONS: InjectionToken<unknown>;
variable NB_DEFAULT_ROW_LEVEL
const NB_DEFAULT_ROW_LEVEL: number;
variable NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG
const NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG: NbTimepickerLocalizationConfig;
variable NB_DIALOG_CONFIG
const NB_DIALOG_CONFIG: InjectionToken<NbDialogConfig<any>>;
variable NB_DOCUMENT
const NB_DOCUMENT: InjectionToken<Document>;
variable NB_JS_THEMES
const NB_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;
variable NB_LAYOUT_DIRECTION
const NB_LAYOUT_DIRECTION: InjectionToken<NbLayoutDirection>;
Layout direction setting injection token.
variable NB_MEDIA_BREAKPOINTS
const NB_MEDIA_BREAKPOINTS: InjectionToken<NbMediaBreakpoint[]>;
variable NB_ROW_DOUBLE_CLICK_DELAY
const NB_ROW_DOUBLE_CLICK_DELAY: number;
variable NB_SELECT_INJECTION_TOKEN
const NB_SELECT_INJECTION_TOKEN: InjectionToken<unknown>;
variable NB_SORT_HEADER_COLUMN_DEF
const NB_SORT_HEADER_COLUMN_DEF: InjectionToken<unknown>;
variable NB_STEPPER
const NB_STEPPER: InjectionToken<unknown>;
variable NB_TABLE_PROVIDERS
const NB_TABLE_PROVIDERS: Provider[];
variable NB_TABLE_TEMPLATE
const NB_TABLE_TEMPLATE: string;
variable NB_THEME_OPTIONS
const NB_THEME_OPTIONS: InjectionToken<NbThemeOptions>;
variable NB_TIME_PICKER_CONFIG
const NB_TIME_PICKER_CONFIG: InjectionToken<unknown>;
variable NB_TOASTR_CONFIG
const NB_TOASTR_CONFIG: InjectionToken<NbToastrConfig>;
variable NB_TREE_GRID
const NB_TREE_GRID: InjectionToken<unknown>;
variable NB_VIEW_REPEATER_STRATEGY
const NB_VIEW_REPEATER_STRATEGY: any;
variable NB_WINDOW
const NB_WINDOW: InjectionToken<Window>;
We're providing browser apis with tokens to improve testing capabilities.
variable NB_WINDOW_CONFIG
const NB_WINDOW_CONFIG: InjectionToken<NbWindowConfig>;
variable NB_WINDOW_CONTENT
const NB_WINDOW_CONTENT: InjectionToken<any>;
variable NB_WINDOW_CONTEXT
const NB_WINDOW_CONTEXT: InjectionToken<Object>;
variable NB_WINDOW_DEFAULT_BUTTONS_CONFIG
const NB_WINDOW_DEFAULT_BUTTONS_CONFIG: NbWindowControlButtonsConfig;
Functions
function createContainer
createContainer: <T>( ref: OverlayRef, container: ComponentType<T>, context: Object, componentFactoryResolver?: ComponentFactoryResolver) => ComponentRef<T>;
function nbSelectFormFieldControlConfigFactory
nbSelectFormFieldControlConfigFactory: () => NbFormFieldControlConfig;
function patch
patch: <T>( container: ComponentRef<T>, containerContext: Object) => ComponentRef<T>;
function windowFactory
windowFactory: (platformId: Object) => Window | undefined;
Classes
class NbA11yModule
class NbA11yModule {}
class NbAccordionComponent
class NbAccordionComponent {}
An accordion allows to toggle the display of sections of content
Basic example @stacked-example(Showcase, accordion/accordion-showcase.component)
<nb-accordion><nb-accordion-item><nb-accordion-item-header>Product Details</nb-accordion-item-header><nb-accordion-item-body>Item Content</nb-accordion-item-body></nb-accordion-item></nb-accordion>### Installation
Import
NbAccordionModule
to your feature module.@NgModule({imports: [// ...NbAccordionModule,],})export class PageModule { }### Usage
With
multi
mode accordion can have multiple items expanded: @stacked-example(Multiple expanded items, accordion/accordion-multi.component)NbAccordionItemComponent
has several methods, for example it is possible to trigger item click/toggle: @stacked-example(Expand API, accordion/accordion-toggle.component)accordion-border-radius: accordion-padding: accordion-shadow: accordion-header-text-color: accordion-header-text-font-family: accordion-header-text-font-size: accordion-header-text-font-weight: accordion-header-text-line-height: accordion-header-disabled-text-color: accordion-header-border-color: accordion-header-border-style: accordion-header-border-width: accordion-item-background-color: accordion-item-text-color: accordion-item-text-font-family: accordion-item-text-font-size: accordion-item-text-font-weight: accordion-item-text-line-height:
property multi
multi: boolean;
Allow multiple items to be expanded at the same time. {boolean}
property ngAcceptInputType_multi
static ngAcceptInputType_multi: NbBooleanInput;
property openCloseItems
openCloseItems: Subject<boolean>;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionComponent, 'nb-accordion', never, { multi: { alias: 'multi'; required: false } }, {}, never, ['nb-accordion-item'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAccordionComponent, never>;
method closeAll
closeAll: () => void;
Closes all enabled accordion items.
method openAll
openAll: () => void;
Opens all enabled accordion items.
class NbAccordionItemBodyComponent
class NbAccordionItemBodyComponent implements OnInit, OnDestroy {}
Component intended to be used within
<nb-accordion-item>
component
constructor
constructor(accordionItem: NbAccordionItemComponent, cd: ChangeDetectorRef);
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionItemBodyComponent, 'nb-accordion-item-body', never, {}, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbAccordionItemBodyComponent, [{ host: true }, null]>;
property state
readonly state: string;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
class NbAccordionItemComponent
class NbAccordionItemComponent implements OnInit, OnChanges, OnDestroy {}
Component intended to be used within
<nb-accordion>
component
constructor
constructor(accordion: NbAccordionComponent, cd: ChangeDetectorRef);
property accordionItemInvalidate
accordionItemInvalidate: Subject<boolean>;
property collapsed
collapsed: boolean;
Item is collapse (
true
by default) {boolean}
property collapsedChange
collapsedChange: EventEmitter<boolean>;
Emits whenever the expanded state of the accordion changes. Primarily used to facilitate two-way binding.
property disabled
disabled: boolean;
Item is disabled and cannot be opened. {boolean}
property expanded
expanded: boolean;
Item is expanded (
false
by default) {boolean}
property ngAcceptInputType_collapsed
static ngAcceptInputType_collapsed: NbBooleanInput;
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ngAcceptInputType_expanded
static ngAcceptInputType_expanded: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionItemComponent, 'nb-accordion-item', never, { collapsed: { alias: 'collapsed'; required: false }; expanded: { alias: 'expanded'; required: false }; disabled: { alias: 'disabled'; required: false }; }, { collapsedChange: 'collapsedChange' }, never, ['nb-accordion-item-header', 'nb-accordion-item-body'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbAccordionItemComponent, [{ host: true }, null]>;
method close
close: () => void;
Collapse the item.
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method open
open: () => void;
Open the item.
method toggle
toggle: () => void;
Open/close the item
class NbAccordionItemHeaderComponent
class NbAccordionItemHeaderComponent implements OnInit, OnDestroy {}
Component intended to be used within
<nb-accordion-item>
component
constructor
constructor(accordionItem: NbAccordionItemComponent, cd: ChangeDetectorRef);
property disabled
readonly disabled: boolean;
property expanded
readonly expanded: boolean;
property isCollapsed
readonly isCollapsed: boolean;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionItemHeaderComponent, 'nb-accordion-item-header', never, {}, {}, never, ['nb-accordion-item-title', 'nb-accordion-item-description', '*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbAccordionItemHeaderComponent, [{ host: true }, null]>;
property state
readonly state: string;
property tabbable
readonly tabbable: string;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method toggle
toggle: () => void;
class NbAccordionModule
class NbAccordionModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAccordionModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbAccordionModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbAccordionModule, [ typeof i1.NbAccordionComponent, typeof i2.NbAccordionItemComponent, typeof i3.NbAccordionItemHeaderComponent, typeof i4.NbAccordionItemBodyComponent ], [any, typeof i6.NbIconModule], [ typeof i1.NbAccordionComponent, typeof i2.NbAccordionItemComponent, typeof i3.NbAccordionItemHeaderComponent, typeof i4.NbAccordionItemBodyComponent ]>;
class NbActionComponent
class NbActionComponent {}
Action item, display a link with an icon, or any other content provided instead.
property badgeDot
badgeDot: boolean;
Use badge dot mode boolean
property badgePosition
badgePosition: NbBadgePosition;
Badge position. Can be set to any class or to one of predefined positions: 'top left', 'top right', 'bottom left', 'bottom right', 'top start', 'top end', 'bottom start', 'bottom end' string
property badgeStatus
badgeStatus: string;
Badge status (adds specific styles): 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
Parameter val
property badgeText
badgeText: string;
Badge text to display string
property disabled
disabled: boolean;
Visually disables the item boolean
property href
href: string;
Regular HREF link @type: string
property icon
icon: string | NbIconConfig;
Icon name or config object {string | NbIconConfig}
property link
link: string;
Router link to use string
property ngAcceptInputType_badgeDot
static ngAcceptInputType_badgeDot: NbBooleanInput;
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbActionComponent, 'nb-action', never, { link: { alias: 'link'; required: false }; href: { alias: 'href'; required: false }; title: { alias: 'title'; required: false }; icon: { alias: 'icon'; required: false }; disabled: { alias: 'disabled'; required: false }; badgeDot: { alias: 'badgeDot'; required: false }; badgeText: { alias: 'badgeText'; required: false }; badgeStatus: { alias: 'badgeStatus'; required: false }; badgePosition: { alias: 'badgePosition'; required: false }; }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbActionComponent, never>;
property title
title: string;
Optional title for mouseover string
class NbActionsComponent
class NbActionsComponent {}
Shows a horizontal list of actions, available in multiple sizes. Aligns items vertically.
@stacked-example(Showcase, action/action-showcase.component)
Basic actions setup:
<nb-actions size="small"><nb-action icon="nb-search"></nb-action><nb-action icon="nb-power-circled"></nb-action><nb-action icon="nb-person"></nb-action></nb-actions>### Installation
Import
NbActionsModule
to your feature module.@NgModule({imports: [// ...NbActionsModule,],})export class PageModule { }### Usage
Multiple sizes example: @stacked-example(Multiple Sizes, action/action-sizes.component)
It is also possible to specify a
badge
value:@stacked-example(Action Badge, action/action-badge.component)
and we can set it to full a width of a parent component @stacked-example(Full Width, action/action-width.component)
Action dot mode @stacked-example(Action badge in dot mode, action/action-dot-mode.component)
actions-background-color: actions-divider-color: actions-divider-style: actions-divider-width: actions-icon-color: actions-text-color: actions-text-font-family: actions-text-font-weight: actions-text-line-height: actions-disabled-icon-color: actions-disabled-text-color: actions-tiny-height: actions-tiny-icon-height: actions-tiny-padding: actions-tiny-text-font-size: actions-small-height: actions-small-icon-height: actions-small-padding: actions-small-text-font-size: actions-medium-height: actions-medium-icon-height: actions-medium-padding: actions-medium-text-font-size: actions-large-height: actions-large-icon-height: actions-large-padding: actions-large-text-font-size: actions-giant-height: actions-giant-icon-height: actions-giant-padding: actions-giant-text-font-size:
property fullWidth
fullWidth: boolean;
Component will fill full width of the container
property giant
readonly giant: boolean;
property large
readonly large: boolean;
property medium
readonly medium: boolean;
property ngAcceptInputType_fullWidth
static ngAcceptInputType_fullWidth: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbActionsComponent, 'nb-actions', never, { size: { alias: 'size'; required: false }; fullWidth: { alias: 'fullWidth'; required: false }; }, {}, never, ['nb-action'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbActionsComponent, never>;
property size
size: NbComponentSize;
Size of the component: 'tiny', 'small' (default), 'medium', 'large', 'giant'
property small
readonly small: boolean;
property tiny
readonly tiny: boolean;
class NbActionsModule
class NbActionsModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbActionsModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbActionsModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbActionsModule, [typeof i1.NbActionComponent, typeof i1.NbActionsComponent], [typeof i2.NbSharedModule, typeof i3.NbBadgeModule, typeof i4.NbIconModule], [typeof i1.NbActionComponent, typeof i1.NbActionsComponent]>;
class NbAdjustableConnectedPositionStrategy
class NbAdjustableConnectedPositionStrategy extends NbFlexibleConnectedPositionStrategy implements NbPositionStrategy {}
The main idea of the adjustable connected strategy is to provide predefined set of positions for your overlay. You have to provide adjustment and appropriate strategy will be chosen in runtime.
property appliedPositions
protected appliedPositions: { key: NbPosition; connectedPosition: ConnectedPosition;}[];
property positionChange
readonly positionChange: Observable<NbPosition>;
method adjustment
adjustment: (adjustment: NbAdjustment) => this;
method apply
apply: () => void;
method applyPositions
protected applyPositions: () => void;
method attach
attach: (overlayRef: OverlayRef) => void;
method createPositions
protected createPositions: () => NbPosition[];
method direction
direction: (direction: NbLayoutDirection) => this;
method mapToLogicalPosition
protected mapToLogicalPosition: (position: NbPosition) => NbPosition;
method offset
offset: (offset: number) => this;
method persistChosenPositions
protected persistChosenPositions: (positions: NbPosition[]) => void;
method position
position: (position: NbPosition) => this;
method reorderPreferredPositions
protected reorderPreferredPositions: (positions: NbPosition[]) => NbPosition[];
class NbAlertComponent
class NbAlertComponent {}
Alert component.
Basic alert example: @stacked-example(Showcase, alert/alert-showcase.component)
Alert configuration:
<nb-alert status="success">You have been successfully authenticated!</nb-alert>### Installation
Import
NbAlertModule
to your feature module.@NgModule({imports: [// ...NbAlertModule,],})export class PageModule { }### Usage
Alert could additionally have a
close
button whenclosable
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 withstatus
: @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 {}
class NbAutocompleteComponent
class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {}
The
NbAutocompleteComponent
overlay component. Provides anNbOptionList
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-option
s 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-option
s 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 withNbAutocompleteComponent
overlay containing options to select and fill input with.@stacked-example(Showcase, autocomplete/autocomplete-showcase.component)
### Installation
Import
NbAutocompleteModule
to your feature module.@NgModule({imports: [// ...NbAutocompleteModule,],})export class PageModule { }### Usage
You can bind control with form controls or ngModel.
@stacked-example(Autocomplete form binding, autocomplete/autocomplete-form.component)
Options in the autocomplete may be grouped using
nb-option-group
component.@stacked-example(Grouping, autocomplete/autocomplete-group.component)
Autocomplete may change selected option value via provided function.
@stacked-example(Custom display, autocomplete/autocomplete-custom-display.component)
Also, autocomplete may make first option in option list active automatically.
@stacked-example(Active first, autocomplete/autocomplete-active-first.component)
constructor
constructor( hostRef: ElementRef, overlay: NbOverlayService, cd: ChangeDetectorRef, triggerStrategyBuilder: NbTriggerStrategyBuilderService, positionBuilder: NbPositionBuilderService, activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService< NbOptionComponent<T> >, renderer: Renderer2);
property activeDescendantKeyManagerFactory
protected activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService< NbOptionComponent<T>>;
property ariaActiveDescendant
readonly ariaActiveDescendant: string;
property ariaAutocomplete
ariaAutocomplete: string;
property ariaExpanded
readonly ariaExpanded: string;
property ariaOwns
readonly ariaOwns: string;
property autocomplete
autocomplete: NbAutocompleteComponent<T>;
Provides autocomplete component.
property bottom
readonly bottom: boolean;
property cd
protected cd: ChangeDetectorRef;
property customOverlayHost
customOverlayHost: ElementRef;
property destroy$
protected destroy$: Subject<void>;
property hasPopup
hasPopup: string;
property hostRef
protected hostRef: ElementRef;
property isClosed
readonly isClosed: boolean;
Determines is autocomplete overlay closed.
property isOpen
readonly isOpen: boolean;
Determines is autocomplete overlay opened.
property keyManager
protected keyManager: NbActiveDescendantKeyManager<NbOptionComponent<T>>;
property overlay
protected overlay: NbOverlayService;
property overlayOffset
overlayOffset: number;
Determines options overlay offset (in pixels).
property overlayRef
protected overlayRef: OverlayRef;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbAutocompleteDirective<any>, 'input[nbAutocomplete]', never, { autocomplete: { alias: 'nbAutocomplete'; required: false }; overlayOffset: { alias: 'overlayOffset'; required: false }; scrollStrategy: { alias: 'scrollStrategy'; required: false }; customOverlayHost: { alias: 'customOverlayHost'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAutocompleteDirective<any>, never>;
property positionBuilder
protected positionBuilder: NbPositionBuilderService;
property positionStrategy
protected positionStrategy: NbAdjustableConnectedPositionStrategy;
property renderer
protected renderer: Renderer2;
property role
role: string;
property scrollStrategy
scrollStrategy: 'close' | 'noop' | 'block' | 'reposition';
Determines options overlay scroll strategy.
property top
readonly top: boolean;
property triggerStrategy
protected triggerStrategy: NbTriggerStrategy;
Trigger strategy used by overlay. @docs-private
property triggerStrategyBuilder
protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;
method attachToOverlay
protected attachToOverlay: () => void;
method checkOverlayVisibility
protected checkOverlayVisibility: () => void;
method createKeyManager
protected createKeyManager: () => void;
method createOverlay
protected createOverlay: () => void;
method createPositionStrategy
protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;
method createScrollStrategy
protected createScrollStrategy: () => ScrollStrategy;
method createTriggerStrategy
protected createTriggerStrategy: () => NbTriggerStrategy;
method getActiveItem
protected getActiveItem: () => NbOptionComponent<T>;
method getContainer
protected getContainer: () => ComponentRef<any>;
method getDisplayValue
protected getDisplayValue: (value: string) => string;
method handleBlur
handleBlur: () => void;
method handleInput
handleInput: () => void;
method handleInputValueUpdate
protected handleInputValueUpdate: (value: T, focusInput?: boolean) => void;
method handleKeydown
handleKeydown: () => void;
method hide
hide: () => void;
method initOverlay
protected initOverlay: () => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method registerOnChange
registerOnChange: (fn: (value: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: any) => void;
method setActiveItem
protected setActiveItem: () => void;
method setDisabledState
setDisabledState: (disabled: boolean) => void;
method setHostInputValue
protected setHostInputValue: (value: any) => void;
method setupAutocomplete
protected setupAutocomplete: () => void;
method shouldShow
protected shouldShow: () => boolean;
method show
show: () => void;
method subscribeOnOptionClick
protected subscribeOnOptionClick: () => void;
method subscribeOnOverlayKeys
protected subscribeOnOverlayKeys: () => void;
method subscribeOnPositionChange
protected subscribeOnPositionChange: () => void;
method subscribeOnTriggers
protected subscribeOnTriggers: () => void;
method writeValue
writeValue: (value: T) => void;
class NbAutocompleteModule
class NbAutocompleteModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAutocompleteModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbAutocompleteModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbAutocompleteModule, [typeof i1.NbAutocompleteComponent, typeof i2.NbAutocompleteDirective], [ any, any, typeof i5.NbOverlayModule, typeof i6.NbCardModule, typeof i7.NbOptionModule ], [ typeof i1.NbAutocompleteComponent, typeof i2.NbAutocompleteDirective, typeof i7.NbOptionModule ]>;
class NbBadgeComponent
class NbBadgeComponent implements NbBadge {}
Badge is a simple labeling component. It can be used to add additional information to any content or highlight unread items.
Element is absolute positioned, so parent should be [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position). It means parent
position
should be set to anything exceptstatic
, e.g.relative
,absolute
,fixed
, orsticky
.### 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 {}
class NbBaseCalendarComponent
class NbBaseCalendarComponent<D, T> implements OnInit {}
The basis for calendar and range calendar components. Encapsulates common behavior - store calendar state and perform navigation between pickers.
constructor
constructor( dateService: NbDateService<D>, yearModelService: NbCalendarYearModelService<D>);
property activeViewMode
activeViewMode: NbCalendarViewMode;
Defines active view for calendar.
property boundingMonth
boundingMonth: boolean;
Defines if we should render previous and next months in the current month view.
property date
date: {};
Value which will be rendered as selected.
property dateChange
dateChange: EventEmitter<T>;
Emits date when selected.
property dateService
protected dateService: NbDateService<D>;
property dayCellComponent
dayCellComponent: Type<NbCalendarCell<D, T>>;
Custom day cell component. Have to implement
NbCalendarCell
interface.
property filter
filter: (D: any) => boolean;
Predicate that decides which cells will be disabled.
property firstDayOfWeek
firstDayOfWeek: number;
Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
undefined
means that default locale setting will be used.
property large
readonly large: boolean;
property max
max: {};
Maximum available date for selection.
property min
min: {};
Minimum available date for selection.
property monthCellComponent
monthCellComponent: Type<NbCalendarCell<D, T>>;
Custom month cell component. Have to implement
NbCalendarCell
interface.
property ngAcceptInputType_activeViewMode
static ngAcceptInputType_activeViewMode: NbCalendarViewModeValues;
property ngAcceptInputType_showWeekNumber
static ngAcceptInputType_showWeekNumber: NbBooleanInput;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbBaseCalendarComponent<any, any>, 'nb-base-calendar', never, { boundingMonth: { alias: 'boundingMonth'; required: false }; activeViewMode: { alias: 'startView'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; dayCellComponent: { alias: 'dayCellComponent'; required: false }; monthCellComponent: { alias: 'monthCellComponent'; required: false }; yearCellComponent: { alias: 'yearCellComponent'; required: false }; size: { alias: 'size'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; showNavigation: { alias: 'showNavigation'; required: false }; date: { alias: 'date'; required: false }; showWeekNumber: { alias: 'showWeekNumber'; required: false }; weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false }; firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false }; }, { dateChange: 'dateChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbBaseCalendarComponent<any, any>, never>;
property showNavigation
showNavigation: boolean;
Determines whether we should show calendar navigation or not.
property showWeekNumber
showWeekNumber: boolean;
Determines should we show week numbers column. False by default.
property size
size: NbCalendarSize;
Size of the calendar and entire components. Can be 'medium' which is default or 'large'.
property ViewMode
ViewMode: typeof NbCalendarViewMode;
property visibleDate
visibleDate: {};
property weekNumberSymbol
weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property yearCellComponent
yearCellComponent: Type<NbCalendarCell<D, T>>;
Custom year cell component. Have to implement
NbCalendarCell
interface.
property yearModelService
protected yearModelService: NbCalendarYearModelService<D>;
method navigateNext
navigateNext: () => void;
method navigatePrev
navigatePrev: () => void;
method nextMonth
nextMonth: () => void;
method nextYear
nextYear: () => void;
method nextYears
nextYears: () => void;
method ngOnInit
ngOnInit: () => void;
method onChangeViewMode
onChangeViewMode: () => void;
method prevMonth
prevMonth: () => void;
method prevYear
prevYear: () => void;
method prevYears
prevYears: () => void;
method setViewMode
setViewMode: (viewMode: NbCalendarViewMode) => void;
method setVisibleDate
setVisibleDate: (visibleDate: D) => void;
class NbBaseCalendarModule
class NbBaseCalendarModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbBaseCalendarModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbBaseCalendarModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbBaseCalendarModule, [typeof i1.NbBaseCalendarComponent], [ typeof i2.NbCalendarKitModule, typeof i3.NbSharedModule, typeof i4.NbCardModule ], [typeof i1.NbBaseCalendarComponent]>;
class NbBaseCalendarRangeCell
abstract class NbBaseCalendarRangeCell<D> {}
property hasRange
readonly hasRange: boolean;
property selectedValue
abstract selectedValue: NbCalendarRange<D>;
class NbBasePicker
abstract class NbBasePicker<D, T, P> extends NbDatepicker<T, D> {}
The
NbBasePicker
component concentrates overlay manipulation logic.
constructor
protected constructor( overlay: NbOverlayService, positionBuilder: NbPositionBuilderService, triggerStrategyBuilder: NbTriggerStrategyBuilderService, cfr: ComponentFactoryResolver, dateService: NbDateService<D>, dateServiceOptions: any);
property adjustment
protected adjustment: NbAdjustment;
property blur
readonly blur: Observable<void>;
Emits when datepicker looses focus.
property blur$
protected blur$: Subject<void>;
property boundingMonth
abstract boundingMonth: boolean;
Defines if we should render previous and next months in the current month view.
property cfr
protected cfr: ComponentFactoryResolver;
property container
protected container: ComponentRef<NbDatepickerContainerComponent>;
Datepicker container that contains instantiated picker.
property dateService
protected dateService: NbDateService<D>;
property dateServiceOptions
protected dateServiceOptions: any;
property dayCellComponent
abstract dayCellComponent: Type<NbCalendarCell<D, T>>;
Custom day cell component. Have to implement
NbCalendarCell
interface.
property destroy$
protected destroy$: Subject<void>;
property filter
abstract filter: (D: any) => boolean;
Predicate that decides which cells will be disabled.
property firstDayOfWeek
abstract firstDayOfWeek: number;
Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
undefined
means that default locale setting will be used.
property format
abstract format: string;
Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date object doesn't support formatting.
property formatChanged$
readonly formatChanged$: Subject<void>;
property hideOnSelect
abstract hideOnSelect: boolean;
Hide picker when a date or a range is selected,
true
by default {boolean}
property hostRef
protected hostRef: ElementRef;
HTML input reference to which datepicker connected.
property init
readonly init: Observable<void>;
property init$
protected init$: ReplaySubject<void>;
property isShown
readonly isShown: boolean;
property max
abstract max: {};
Maximum available date for selection.
property min
abstract min: {};
Minimum available date for selection.
property monthCellComponent
abstract monthCellComponent: Type<NbCalendarCell<D, T>>;
Custom month cell component. Have to implement
NbCalendarCell
interface.
property onChange$
protected onChange$: Subject<T>;
Stream of picker changes. Required to be the subject because picker hides and shows and picker change stream becomes recreated.
property overlay
protected overlay: NbOverlayService;
property overlayOffset
protected overlayOffset: number;
property picker
readonly picker: any;
Returns picker instance.
property pickerClass
protected abstract pickerClass: Type<P>;
Calendar component class that has to be instantiated inside overlay.
property pickerRef
protected pickerRef: ComponentRef<any>;
Reference to the picker instance itself.
property pickerValueChange
readonly pickerValueChange: Observable<T>;
property positionBuilder
protected positionBuilder: NbPositionBuilderService;
property positionStrategy
protected positionStrategy: NbAdjustableConnectedPositionStrategy;
Positioning strategy used by overlay.
property queue
protected queue: {};
Queue contains the last value that was applied to the picker when it was hidden. This value will be passed to the picker as soon as it shown.
property ref
protected ref: OverlayRef;
Overlay reference object.
property showNavigation
abstract showNavigation: boolean;
Determines should we show calendar navigation or not. {boolean}
property showWeekNumber
abstract showWeekNumber: boolean;
Determines should we show week numbers column. False by default.
property size
abstract size: NbCalendarSize;
Size of the calendar and entire components. Can be 'medium' which is default or 'large'.
property startView
abstract startView: NbCalendarViewMode;
Defines starting view for calendar.
property triggerStrategy
protected triggerStrategy: NbTriggerStrategy;
Trigger strategy used by overlay
property triggerStrategyBuilder
protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;
property valueChange
readonly valueChange: Observable<T>;
Stream of picker value changes.
property visibleDate
abstract visibleDate: {};
Depending on this date a particular month is selected in the calendar
property weekNumberSymbol
abstract weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property yearCellComponent
abstract yearCellComponent: Type<NbCalendarCell<D, T>>;
Custom year cell component. Have to implement
NbCalendarCell
interface.
method attach
attach: (hostRef: ElementRef) => void;
Datepicker knows nothing about host html input element. So, attach method attaches datepicker to the host input element.
method checkFormat
protected checkFormat: () => void;
method createOverlay
protected createOverlay: () => void;
method createPositionStrategy
protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;
method createTriggerStrategy
protected createTriggerStrategy: () => NbTriggerStrategy;
method getValidatorConfig
getValidatorConfig: () => NbPickerValidatorConfig<D>;
method hide
hide: () => void;
method instantiatePicker
protected instantiatePicker: () => void;
method openDatepicker
protected openDatepicker: () => void;
method patchWithInputs
protected patchWithInputs: () => void;
method shouldHide
shouldHide: () => boolean;
method show
show: () => void;
method subscribeOnPositionChange
protected subscribeOnPositionChange: () => void;
method subscribeOnTriggers
protected subscribeOnTriggers: () => void;
method subscribeOnValueChange
protected subscribeOnValueChange: () => void;
Subscribes on picker value changes and emit data through this.onChange$ subject.
method writeQueue
protected abstract writeQueue: () => any;
class NbBasePickerComponent
class NbBasePickerComponent<D, T, P> extends NbBasePicker<D, T, P> implements OnInit, OnChanges, OnDestroy {}
constructor
constructor( document: any, positionBuilder: NbPositionBuilderService, triggerStrategyBuilder: NbTriggerStrategyBuilderService, overlay: NbOverlayService, cfr: ComponentFactoryResolver, dateService: NbDateService<D>, dateServiceOptions: any);
property adjustment
adjustment: NbAdjustment;
property boundingMonth
boundingMonth: boolean;
Defines if we should render previous and next months in the current month view.
property dayCellComponent
dayCellComponent: Type<NbCalendarCell<D, T>>;
Custom day cell component. Have to implement
NbCalendarCell
interface.
property filter
filter: (D: any) => boolean;
Predicate that decides which cells will be disabled.
property firstDayOfWeek
firstDayOfWeek: number;
property format
format: string;
Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date object doesn't support formatting.
property hideOnSelect
hideOnSelect: boolean;
Hide picker when a date or a range is selected,
true
by default {boolean}
property max
max: {};
Maximum available date for selection.
property min
min: {};
Minimum available date for selection.
property monthCellComponent
monthCellComponent: Type<NbCalendarCell<D, T>>;
Custom month cell component. Have to implement
NbCalendarCell
interface.
property ngAcceptInputType_adjustment
static ngAcceptInputType_adjustment: NbAdjustmentValues;
property ngAcceptInputType_showWeekNumber
static ngAcceptInputType_showWeekNumber: NbBooleanInput;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ngAcceptInputType_startView
static ngAcceptInputType_startView: NbCalendarViewModeValues;
property overlayOffset
overlayOffset: number;
Determines picker overlay offset (in pixels).
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbBasePickerComponent<any, any, any>, 'ng-component', never, { format: { alias: 'format'; required: false }; boundingMonth: { alias: 'boundingMonth'; required: false }; startView: { alias: 'startView'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; dayCellComponent: { alias: 'dayCellComponent'; required: false }; monthCellComponent: { alias: 'monthCellComponent'; required: false }; yearCellComponent: { alias: 'yearCellComponent'; required: false }; size: { alias: 'size'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; hideOnSelect: { alias: 'hideOnSelect'; required: false }; showNavigation: { alias: 'showNavigation'; required: false }; weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false }; showWeekNumber: { alias: 'showWeekNumber'; required: false }; firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false }; overlayOffset: { alias: 'overlayOffset'; required: false }; adjustment: { alias: 'adjustment'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbBasePickerComponent<any, any, any>, [null, null, null, null, null, null, { optional: true }]>;
property pickerClass
protected pickerClass: Type<P>;
property pickerValueChange
readonly pickerValueChange: Observable<T>;
property showNavigation
showNavigation: boolean;
Determines should we show calendars navigation or not. {boolean}
property showWeekNumber
showWeekNumber: boolean;
Determines should we show week numbers column. False by default.
property size
size: NbCalendarSize;
Size of the calendar and entire components. Can be 'medium' which is default or 'large'.
property startView
startView: NbCalendarViewMode;
Defines starting view for calendar.
property value
value: {};
property visibleDate
visibleDate: {};
Depending on this date a particular month is selected in the calendar
property weekNumberSymbol
weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property yearCellComponent
yearCellComponent: Type<NbCalendarCell<D, T>>;
Custom year cell component. Have to implement
NbCalendarCell
interface.
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method writeQueue
protected writeQueue: () => void;
class NbBidiModule
class NbBidiModule extends BidiModule {}
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 isbasic
: @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"]
anda
: @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 addmultiple
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 thenb-button-group
. Event contains an array of values of currently pressed button toggles. You can assign a value to the[nbButtonToggle]
via thevalue
input. @stacked-example(Button Group Value Change, button-group/button-group-value-change.component)To disable a group of buttons, add a
disabled
attribute to the<nb-button-group>
. @stacked-example(Button Group Disabled, button-group/button-group-disabled.component)The group component controls all visual attributes of buttons such as
appearance
,status
,size
,shape
. You can change it via the appropriate attributes.Button group appearances: @stacked-example(Button Group Appearances, button-group/button-group-appearances.component)
Button group statuses: @stacked-example(Button Group Statuses, button-group/button-group-statuses.component)
Button group sizes: @stacked-example(Button Group Sizes, button-group/button-group-sizes.component)
Buttons group shapes: @additional-example(Button Group Shapes, button-group/button-group-shapes.component)
button-group-filled-button-basic-text-color: button-group-filled-button-primary-text-color: button-group-filled-button-success-text-color: button-group-filled-button-info-text-color: button-group-filled-button-warning-text-color: button-group-filled-button-danger-text-color: button-group-filled-button-control-text-color: button-group-filled-basic-divider-color: button-group-filled-primary-divider-color: button-group-filled-success-divider-color: button-group-filled-info-divider-color: button-group-filled-warning-divider-color: button-group-filled-danger-divider-color: button-group-filled-control-divider-color: button-group-ghost-divider-color:
constructor
constructor(cd: ChangeDetectorRef, statusService: NbStatusService);
property additionalClasses
readonly additionalClasses: string[];
property appearance
appearance: NbButtonToggleAppearance;
Button group appearance:
filled
,outline
,ghost
property buttons
readonly buttons: QueryList<NbButton>;
property buttonsChange$
protected readonly buttonsChange$: Subject<NbButton[]>;
property cd
protected cd: ChangeDetectorRef;
property destroy$
protected readonly destroy$: Subject<void>;
property disabled
disabled: boolean;
property filled
filled: boolean;
Sets
filled
appearance
property ghost
ghost: boolean;
Sets
ghost
appearance
property lastEmittedValue
protected lastEmittedValue: any[];
property multiple
multiple: boolean;
Allows to keep multiple button toggles pressed. Off by default.
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ngAcceptInputType_filled
static ngAcceptInputType_filled: NbBooleanInput;
property ngAcceptInputType_ghost
static ngAcceptInputType_ghost: NbBooleanInput;
property ngAcceptInputType_multiple
static ngAcceptInputType_multiple: NbBooleanInput;
property ngAcceptInputType_outline
static ngAcceptInputType_outline: NbBooleanInput;
property outline
outline: boolean;
Sets
outline
appearance
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbButtonGroupComponent, 'nb-button-group', never, { size: { alias: 'size'; required: false }; status: { alias: 'status'; required: false }; shape: { alias: 'shape'; required: false }; appearance: { alias: 'appearance'; required: false }; disabled: { alias: 'disabled'; required: false }; multiple: { alias: 'multiple'; required: false }; filled: { alias: 'filled'; required: false }; outline: { alias: 'outline'; required: false }; ghost: { alias: 'ghost'; required: false }; }, { valueChange: 'valueChange' }, ['buttons'], ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonGroupComponent, never>;
property role
role: string;
property shape
shape: NbComponentShape;
Button group shapes:
rectangle
,round
,semi-round
property size
size: NbComponentSize;
Button group size, available sizes:
tiny
,small
,medium
,large
,giant
property status
status: string;
Button group status (adds specific styles):
basic
,primary
,info
,success
,warning
,danger
,control
property statusService
protected statusService: NbStatusService;
property valueChange
valueChange: EventEmitter<any[]>;
Emits when
nbButtonToggle
pressed state change.$event
contains an array of the currently pressed button toggles.
method emitCurrentValue
protected emitCurrentValue: (toggleButtons: NbButtonToggleDirective[]) => void;
method listenButtonPressedState
protected listenButtonPressedState: (buttons: NbButton[]) => void;
method ngAfterContentInit
ngAfterContentInit: () => void;
method ngOnChanges
ngOnChanges: ({ size, status, shape, multiple, filled, outline, ghost, disabled,}: SimpleChanges) => void;
method syncButtonsProperties
protected syncButtonsProperties: (buttons: NbButton[]) => void;
class NbButtonGroupModule
class NbButtonGroupModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonGroupModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbButtonGroupModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbButtonGroupModule, [typeof i1.NbButtonGroupComponent, typeof i2.NbButtonToggleDirective], never, [typeof i1.NbButtonGroupComponent, typeof i2.NbButtonToggleDirective]>;
class NbButtonModule
class NbButtonModule {}
class NbButtonToggleDirective
class NbButtonToggleDirective extends NbButton {}
[nbButtonToggle]
is a directive to add apressed
state to a button.
constructor
constructor( renderer: Renderer2, hostElement: ElementRef<HTMLElement>, cd: ChangeDetectorRef, zone: NgZone, statusService: NbStatusService, buttonGroup?: any);
property additionalClasses
readonly additionalClasses: string[];
property appearance
appearance: NbButtonToggleAppearance;
property basic
readonly basic: boolean;
property buttonGroup
protected buttonGroup?: any;
property cd
protected cd: ChangeDetectorRef;
property control
readonly control: boolean;
property danger
readonly danger: boolean;
property hostElement
protected hostElement: ElementRef<HTMLElement>;
property info
readonly info: boolean;
property ngAcceptInputType_pressed
static ngAcceptInputType_pressed: NbBooleanInput;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbButtonToggleDirective, 'button[nbButtonToggle]', ['nbButtonToggle'], { appearance: { alias: 'appearance'; required: false }; value: { alias: 'value'; required: false }; pressed: { alias: 'pressed'; required: false }; }, { pressedChange: 'pressedChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbButtonToggleDirective, [null, null, null, null, null, { optional: true }]>;
property pressed
pressed: boolean;
Controls button pressed state
property pressedChange
readonly pressedChange: EventEmitter<boolean>;
Emits whenever button pressed state change
property pressedChange$
readonly pressedChange$: Observable<NbButtonToggleChange>;
property primary
readonly primary: boolean;
property renderer
protected renderer: Renderer2;
property statusService
protected statusService: NbStatusService;
property success
readonly success: boolean;
property value
value: any;
A value associated with the button.
property warning
readonly warning: boolean;
property zone
protected zone: NgZone;
method onClick
onClick: () => void;
class NbCalendarActionsComponent
class NbCalendarActionsComponent {}
property applyText
readonly applyText: string;
property currentTimeText
readonly currentTimeText: string;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarActionsComponent, 'nb-calendar-actions', never, { applyButtonText: { alias: 'applyButtonText'; required: false }; currentTimeButtonText: { alias: 'currentTimeButtonText'; required: false; }; showCurrentTimeButton: { alias: 'showCurrentTimeButton'; required: false; }; }, { setCurrentTime: 'setCurrentTime'; saveValue: 'saveValue' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarActionsComponent, never>;
property saveValue
saveValue: EventEmitter<void>;
property setCurrentTime
setCurrentTime: EventEmitter<void>;
property showCurrentTimeButton
showCurrentTimeButton: boolean;
class NbCalendarComponent
class NbCalendarComponent<D> {}
Calendar component provides a capability to choose a date.
<nb-calendar [(date)]="date"></nb-calendar><nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>Basic usage example @stacked-example(Showcase, calendar/calendar-showcase.component)
### Installation
Import
NbCalendarModule
to your feature module.@NgModule({imports: [// ...NbCalendarModule,],})export class PageModule { }### Usage
If you want to select ranges you can use
NbCalendarRangeComponent
.<nb-calendar-range [(range)]="range"></nb-calendar-range><nb-calendar-range [range]="range" (rangeChange)="handleRangeChange($event)"></nb-calendar-range>In order to use it, you have to import
NbCalendarRangeModule
. @stacked-example(Range, calendar/calendar-range-showcase.component)The calendar component is supplied with a calendar navigation that contains navigate buttons. If you do not want to use it you can hide calendar navigation using
showNavigation
property. @stacked-example(Without navigation, calendar/calendar-without-navigation.component)As you can see in the basic usage example calendar contains previous and next month days which can be disabled using
boundingMonth
property. @stacked-example(Bounding months, calendar/calendar-bounding-month.component)You can define starting view of the calendar by setting
startView
property. Available values: year, month and date. @stacked-example(Start view, calendar/calendar-start-view.component)You can use a larger version of the calendar by defining size property. Available values: medium(which is default) and large. @stacked-example(Size, calendar/calendar-size.component)
Calendar supports min and max dates which disables values out of min-max range. @stacked-example(Borders, calendar/calendar-min-max.component)
Also, you can define custom filter property that should be predicate which receives date and returns false if this date has to be disabled. In this example, we provide the filter which disables weekdays. @stacked-example(Filter, calendar/calendar-filter.component)
Week numbers column could be enabled via
showWeekNumber
binding: @stacked-example(Week number, calendar/calendar-week-number.component)If you need create custom cells you can easily provide custom components for calendar. For examples if you want to show any average price under each date you can just provide custom
dayCellComponent
. Custom cells for month and year can be provided the same way, check API reference. @stacked-example(Custom day cell, calendar/calendar-custom-day-cell-showcase.component)calendar-width: calendar-background-color: calendar-border-color: calendar-border-style: calendar-border-width: calendar-border-radius: calendar-text-color: calendar-text-font-family: calendar-text-font-size: calendar-text-font-weight: calendar-text-line-height: calendar-picker-padding-top: calendar-picker-padding-bottom: calendar-picker-padding-start: calendar-picker-padding-end: calendar-navigation-text-color: calendar-navigation-text-font-family: calendar-navigation-title-text-font-size: calendar-navigation-title-text-font-weight: calendar-navigation-title-text-line-height: calendar-navigation-padding: calendar-cell-inactive-text-color: calendar-cell-disabled-text-color: calendar-cell-hover-background-color: calendar-cell-hover-border-color: calendar-cell-hover-text-color: calendar-cell-hover-text-font-size: calendar-cell-hover-text-font-weight: calendar-cell-hover-text-line-height: calendar-cell-active-background-color: calendar-cell-active-border-color: calendar-cell-active-text-color: calendar-cell-active-text-font-size: calendar-cell-active-text-font-weight: calendar-cell-active-text-line-height: calendar-cell-today-background-color: calendar-cell-today-border-color: calendar-cell-today-text-color: calendar-cell-today-text-font-size: calendar-cell-today-text-font-weight: calendar-cell-today-text-line-height: calendar-cell-today-hover-background-color: calendar-cell-today-hover-border-color: calendar-cell-today-active-background-color: calendar-cell-today-active-border-color: calendar-cell-today-disabled-border-color: calendar-cell-today-selected-background-color: calendar-cell-today-selected-border-color: calendar-cell-today-selected-text-color: calendar-cell-today-selected-hover-background-color: calendar-cell-today-selected-hover-border-color: calendar-cell-today-selected-active-background-color: calendar-cell-today-selected-active-border-color: calendar-cell-today-in-range-background-color: calendar-cell-today-in-range-border-color: calendar-cell-today-in-range-text-color: calendar-cell-today-in-range-hover-background-color: calendar-cell-today-in-range-hover-border-color: calendar-cell-today-in-range-active-background-color: calendar-cell-today-in-range-active-border-color: calendar-cell-selected-background-color: calendar-cell-selected-border-color: calendar-cell-selected-text-color: calendar-cell-selected-text-font-size: calendar-cell-selected-text-font-weight: calendar-cell-selected-text-line-height: calendar-cell-selected-hover-background-color: calendar-cell-selected-hover-border-color: calendar-cell-selected-active-background-color: calendar-cell-selected-active-border-color: calendar-day-cell-width: calendar-day-cell-height: calendar-month-cell-width: calendar-month-cell-height: calendar-year-cell-width: calendar-year-cell-height: calendar-weekday-background: calendar-weekday-divider-color: calendar-weekday-divider-width: calendar-weekday-text-color: calendar-weekday-text-font-size: calendar-weekday-text-font-weight: calendar-weekday-text-line-height: calendar-weekday-holiday-text-color: calendar-weekday-height: calendar-weekday-width: calendar-weeknumber-background: calendar-weeknumber-divider-color: calendar-weeknumber-divider-width: calendar-weeknumber-text-color: calendar-weeknumber-text-font-size: calendar-weeknumber-text-font-weight: calendar-weeknumber-text-line-height: calendar-weeknumber-height: calendar-weeknumber-width: calendar-large-width: calendar-day-cell-large-width: calendar-day-cell-large-height: calendar-weekday-large-height: calendar-weekday-large-width: calendar-weeknumber-large-height: calendar-weeknumber-large-width: calendar-month-cell-large-width: calendar-month-cell-large-height: calendar-year-cell-large-width: calendar-year-cell-large-height:
property boundingMonth
boundingMonth: boolean;
Defines if we should render previous and next months in the current month view.
property date
date: {};
Date which will be rendered as selected.
property dateChange
dateChange: EventEmitter<D>;
Emits date when selected.
property dayCellComponent
dayCellComponent: Type<NbCalendarCell<D, D>>;
Custom day cell component. Have to implement
NbCalendarCell
interface.
property filter
filter: (D: any) => boolean;
Predicate that decides which cells will be disabled.
property firstDayOfWeek
firstDayOfWeek: number;
Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
undefined
means that default locale setting will be used.
property max
max: {};
Maximum available date for selection.
property min
min: {};
Minimum available date for selection.
property monthCellComponent
monthCellComponent: Type<NbCalendarCell<D, D>>;
Custom month cell component. Have to implement
NbCalendarCell
interface.
property ngAcceptInputType_showWeekNumber
static ngAcceptInputType_showWeekNumber: NbBooleanInput;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ngAcceptInputType_startView
static ngAcceptInputType_startView: NbCalendarViewModeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarComponent<any>, 'nb-calendar', never, { boundingMonth: { alias: 'boundingMonth'; required: false }; startView: { alias: 'startView'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; dayCellComponent: { alias: 'dayCellComponent'; required: false }; monthCellComponent: { alias: 'monthCellComponent'; required: false }; yearCellComponent: { alias: 'yearCellComponent'; required: false }; size: { alias: 'size'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; showNavigation: { alias: 'showNavigation'; required: false }; date: { alias: 'date'; required: false }; showWeekNumber: { alias: 'showWeekNumber'; required: false }; weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false }; firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false }; }, { dateChange: 'dateChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarComponent<any>, never>;
property showNavigation
showNavigation: boolean;
Determines should we show calendars navigation or not.
property showWeekNumber
showWeekNumber: boolean;
Determines should we show week numbers column. False by default.
property size
size: NbCalendarSize;
Size of the calendar and entire components. Can be 'medium' which is default or 'large'.
property startView
startView: NbCalendarViewMode;
Defines starting view for calendar.
property visibleDate
visibleDate: {};
property weekNumberSymbol
weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property yearCellComponent
yearCellComponent: Type<NbCalendarCell<D, D>>;
Custom year cell component. Have to implement
NbCalendarCell
interface.
class NbCalendarDayCellComponent
class NbCalendarDayCellComponent<D> implements NbCalendarCell<D, D> {}
constructor
constructor(dateService: NbDateService<D>);
property boundingMonth
readonly boundingMonth: boolean;
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property day
readonly day: number;
property dayCellClass
dayCellClass: boolean;
property disabled
readonly disabled: boolean;
property empty
readonly empty: boolean;
property filter
filter: (D: any) => boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarDayCellComponent<any>, 'nb-calendar-day-cell', never, { date: { alias: 'date'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarDayCellComponent<any>, never>;
property select
select: EventEmitter<D>;
property selected
readonly selected: boolean;
property selectedValue
selectedValue: {};
property size
size: NbCalendarSize;
property today
readonly today: boolean;
property visibleDate
visibleDate: {};
method onClick
onClick: () => void;
class NbCalendarDayPickerComponent
class NbCalendarDayPickerComponent<D, T> implements OnChanges {}
Provides capability pick days.
constructor
constructor(monthModel: NbCalendarMonthModelService<D>);
property boundingMonths
boundingMonths: boolean;
Defines if we should render previous and next months in the current month view.
property cellComponent
cellComponent: Type<NbCalendarCell<any, any>>;
property date
date: {};
Already selected date.
property dateChange
dateChange: EventEmitter<D>;
Fires newly selected date.
property filter
filter: (D: any) => boolean;
Predicate that decides which cells will be disabled.
property firstDayOfWeek
firstDayOfWeek: number;
Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
undefined
means that default locale setting will be used.
property large
readonly large: boolean;
property max
max: {};
Maximum available date for selection.
property min
min: {};
Minimum available date for selection.
property ngAcceptInputType_showWeekNumber
static ngAcceptInputType_showWeekNumber: NbBooleanInput;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarDayPickerComponent<any, any>, 'nb-calendar-day-picker', never, { visibleDate: { alias: 'visibleDate'; required: false }; boundingMonths: { alias: 'boundingMonths'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; setCellComponent: { alias: 'cellComponent'; required: false }; size: { alias: 'size'; required: false }; date: { alias: 'date'; required: false }; showWeekNumber: { alias: 'showWeekNumber'; required: false }; weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false }; firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false }; }, { dateChange: 'dateChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarDayPickerComponent<any, any>, never>;
property showWeekNumber
showWeekNumber: boolean;
Determines should we show week numbers column. False by default.
property size
size: NbCalendarSize;
Size of the component. Can be 'medium' which is default or 'large'.
property visibleDate
visibleDate: {};
Describes which month picker have to render.
property weekNumberSymbol
weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property weeks
weeks: D[][];
Day picker model. Provides all days in current month and if boundingMonth is true some days from previous and next one.
method ngOnChanges
ngOnChanges: ({ visibleDate, boundingMonths, firstDayOfWeek,}: SimpleChanges) => void;
method onSelect
onSelect: (day: D) => void;
class NbCalendarDaysNamesComponent
class NbCalendarDaysNamesComponent<D> implements OnInit, OnChanges {}
constructor
constructor(dateService: NbDateService<D>);
property days
days: NbCalendarDay[];
property firstDayOfWeek
firstDayOfWeek: number;
Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
undefined
means that default locale setting will be used.
property isLarge
readonly isLarge: boolean;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarDaysNamesComponent<any>, 'nb-calendar-days-names', never, { size: { alias: 'size'; required: false }; firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarDaysNamesComponent<any>, never>;
property size
size: NbCalendarSize;
method ngOnChanges
ngOnChanges: ({ firstDayOfWeek }: SimpleChanges) => void;
method ngOnInit
ngOnInit: () => void;
class NbCalendarKitModule
class NbCalendarKitModule {}
NbCalendarKitModule
is a module that contains multiple useful components for building custom calendars. So if you think our calendars is not enough powerful for you just use calendar-kit and build your own calendar!Available components: -
NbCalendarDayPicker
-NbCalendarDayCell
-NbCalendarMonthPicker
-NbCalendarMonthCell
-NbCalendarYearPicker
-NbCalendarYearCell
-NbCalendarViewModeComponent
-NbCalendarPageableNavigation
For example you can easily build full calendar: @stacked-example(Full calendar, calendar-kit/calendar-kit-full-calendar.component)
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarKitModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCalendarKitModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbCalendarKitModule, [ typeof i1.NbCalendarViewModeComponent, typeof i2.NbCalendarPageableNavigationComponent, typeof i3.NbCalendarDaysNamesComponent, typeof i4.NbCalendarYearPickerComponent, typeof i5.NbCalendarMonthPickerComponent, typeof i6.NbCalendarDayPickerComponent, typeof i7.NbCalendarDayCellComponent, typeof i8.NbCalendarActionsComponent, typeof i9.NbCalendarMonthCellComponent, typeof i10.NbCalendarYearCellComponent, typeof i11.NbCalendarPickerRowComponent, typeof i12.NbCalendarPickerComponent, typeof i13.NbCalendarWeekNumberComponent ], [ typeof i14.NbSharedModule, typeof i15.NbButtonModule, typeof i16.NbIconModule ], [ typeof i1.NbCalendarViewModeComponent, typeof i2.NbCalendarPageableNavigationComponent, typeof i3.NbCalendarDaysNamesComponent, typeof i4.NbCalendarYearPickerComponent, typeof i5.NbCalendarMonthPickerComponent, typeof i6.NbCalendarDayPickerComponent, typeof i7.NbCalendarDayCellComponent, typeof i8.NbCalendarActionsComponent, typeof i9.NbCalendarMonthCellComponent, typeof i10.NbCalendarYearCellComponent, typeof i11.NbCalendarPickerRowComponent, typeof i12.NbCalendarPickerComponent, typeof i13.NbCalendarWeekNumberComponent ]>;
class NbCalendarModule
class NbCalendarModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCalendarModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbCalendarModule, [typeof i1.NbCalendarComponent], [typeof i2.NbBaseCalendarModule], [typeof i1.NbCalendarComponent]>;
class NbCalendarMonthCellComponent
class NbCalendarMonthCellComponent<D> implements NbCalendarCell<D, D> {}
constructor
constructor(dateService: NbDateService<D>);
property date
date: {};
property disabled
readonly disabled: boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property month
readonly month: string;
property monthCellClass
monthCellClass: boolean;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarMonthCellComponent<any>, 'nb-calendar-month-cell', never, { date: { alias: 'date'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarMonthCellComponent<any>, never>;
property select
select: EventEmitter<D>;
property selected
readonly selected: boolean;
property selectedValue
selectedValue: {};
property size
size: NbCalendarSize;
property today
readonly today: boolean;
method greaterThanMax
protected greaterThanMax: () => boolean;
method monthEnd
protected monthEnd: () => D;
method monthStart
protected monthStart: () => D;
method onClick
onClick: () => void;
method smallerThanMin
protected smallerThanMin: () => boolean;
class NbCalendarMonthModelService
class NbCalendarMonthModelService<D> {}
constructor
constructor(dateService: NbDateService<D>);
property dateService
protected dateService: NbDateService<D>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarMonthModelService<any>, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbCalendarMonthModelService<any>>;
method createDaysGrid
createDaysGrid: ( activeMonth: D, boundingMonth?: boolean, firstDayOfWeek?: number) => D[][];
class NbCalendarMonthPickerComponent
class NbCalendarMonthPickerComponent<D, T> implements OnChanges {}
constructor
constructor(dateService: NbDateService<D>);
property cellComponent
cellComponent: Type<NbCalendarCell<any, any>>;
property date
date: {};
Selected date
property dateService
protected dateService: NbDateService<D>;
property filter
filter: (D: any) => boolean;
property large
readonly large: boolean;
property max
max: {};
property min
min: {};
property month
month: {};
Visible month
property monthChange
monthChange: EventEmitter<D>;
property months
months: D[][];
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarMonthPickerComponent<any, any>, 'nb-calendar-month-picker', never, { min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; size: { alias: 'size'; required: false }; month: { alias: 'month'; required: false }; date: { alias: 'date'; required: false }; _cellComponent: { alias: 'cellComponent'; required: false }; }, { monthChange: 'monthChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarMonthPickerComponent<any, any>, never>;
property size
size: NbCalendarSize;
method initMonths
initMonths: () => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method onSelect
onSelect: (month: D) => void;
class NbCalendarPageableNavigationComponent
class NbCalendarPageableNavigationComponent<D> {}
constructor
constructor(directionService: NbLayoutDirectionService);
property isLtr
readonly isLtr: boolean;
property next
next: EventEmitter<void>;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarPageableNavigationComponent<any>, 'nb-calendar-pageable-navigation', never, {}, { next: 'next'; prev: 'prev' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarPageableNavigationComponent<any>, never>;
property prev
prev: EventEmitter<void>;
class NbCalendarPickerComponent
class NbCalendarPickerComponent<D, T> {}
property cellComponent
cellComponent: Type<NbCalendarCell<D, T>>;
property data
data: D[][];
property filter
filter: (D: any) => boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarPickerComponent<any, any>, 'nb-calendar-picker', never, { data: { alias: 'data'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; cellComponent: { alias: 'cellComponent'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarPickerComponent<any, any>, never>;
property select
select: EventEmitter<D>;
property selectedValue
selectedValue: {};
property size
size: NbCalendarSize;
property visibleDate
visibleDate: {};
class NbCalendarPickerRowComponent
class NbCalendarPickerRowComponent<D, T> implements OnChanges {}
constructor
constructor(cfr: ComponentFactoryResolver);
property component
component: Type<NbCalendarCell<D, T>>;
property containerRef
containerRef: ViewContainerRef;
property filter
filter: (D: any) => boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarPickerRowComponent<any, any>, 'nb-calendar-picker-row', never, { row: { alias: 'row'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; component: { alias: 'component'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarPickerRowComponent<any, any>, never>;
property row
row: D[];
property select
select: EventEmitter<D>;
property selectedValue
selectedValue: {};
property size
size: NbCalendarSize;
property visibleDate
visibleDate: {};
method ngOnChanges
ngOnChanges: () => void;
class NbCalendarRangeComponent
class NbCalendarRangeComponent<D> {}
CalendarRange component provides a capability to choose a date range.
<nb-calendar [(date)]="date"></nb-calendar><nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>Basic usage example @stacked-example(Range, calendar/calendar-range-showcase.component)
### Installation
Import
NbCalendarRangeModule
to your feature module.@NgModule({imports: [// ...NbCalendarRangeModule,],})export class PageModule { }### Usage
CalendarRange component supports all of the Calendar component customization properties. More defails can be found in the [Calendar component docs](docs/components/calendar).
calendar-width: calendar-background-color: calendar-border-color: calendar-border-style: calendar-border-width: calendar-border-radius: calendar-text-color: calendar-text-font-family: calendar-text-font-size: calendar-text-font-weight: calendar-text-line-height: calendar-picker-padding-top: calendar-picker-padding-bottom: calendar-picker-padding-start: calendar-picker-padding-end: calendar-navigation-text-color: calendar-navigation-text-font-family: calendar-navigation-title-text-font-size: calendar-navigation-title-text-font-weight: calendar-navigation-title-text-line-height: calendar-navigation-padding: calendar-cell-inactive-text-color: calendar-cell-disabled-text-color: calendar-cell-hover-background-color: calendar-cell-hover-border-color: calendar-cell-hover-text-color: calendar-cell-hover-text-font-size: calendar-cell-hover-text-font-weight: calendar-cell-hover-text-line-height: calendar-cell-active-background-color: calendar-cell-active-border-color: calendar-cell-active-text-color: calendar-cell-active-text-font-size: calendar-cell-active-text-font-weight: calendar-cell-active-text-line-height: calendar-cell-today-background-color: calendar-cell-today-border-color: calendar-cell-today-text-color: calendar-cell-today-text-font-size: calendar-cell-today-text-font-weight: calendar-cell-today-text-line-height: calendar-cell-today-hover-background-color: calendar-cell-today-hover-border-color: calendar-cell-today-active-background-color: calendar-cell-today-active-border-color: calendar-cell-today-disabled-border-color: calendar-cell-today-selected-background-color: calendar-cell-today-selected-border-color: calendar-cell-today-selected-text-color: calendar-cell-today-selected-hover-background-color: calendar-cell-today-selected-hover-border-color: calendar-cell-today-selected-active-background-color: calendar-cell-today-selected-active-border-color: calendar-cell-today-in-range-background-color: calendar-cell-today-in-range-border-color: calendar-cell-today-in-range-text-color: calendar-cell-today-in-range-hover-background-color: calendar-cell-today-in-range-hover-border-color: calendar-cell-today-in-range-active-background-color: calendar-cell-today-in-range-active-border-color: calendar-cell-selected-background-color: calendar-cell-selected-border-color: calendar-cell-selected-text-color: calendar-cell-selected-text-font-size: calendar-cell-selected-text-font-weight: calendar-cell-selected-text-line-height: calendar-cell-selected-hover-background-color: calendar-cell-selected-hover-border-color: calendar-cell-selected-active-background-color: calendar-cell-selected-active-border-color: calendar-day-cell-width: calendar-day-cell-height: calendar-month-cell-width: calendar-month-cell-height: calendar-year-cell-width: calendar-year-cell-height: calendar-weekday-background: calendar-weekday-divider-color: calendar-weekday-divider-width: calendar-weekday-text-color: calendar-weekday-text-font-size: calendar-weekday-text-font-weight: calendar-weekday-text-line-height: calendar-weekday-holiday-text-color: calendar-weekday-height: calendar-weekday-width: calendar-weeknumber-background: calendar-weeknumber-divider-color: calendar-weeknumber-divider-width: calendar-weeknumber-text-color: calendar-weeknumber-text-font-size: calendar-weeknumber-text-font-weight: calendar-weeknumber-text-line-height: calendar-weeknumber-height: calendar-weeknumber-width: calendar-large-width: calendar-day-cell-large-width: calendar-day-cell-large-height: calendar-weekday-large-height: calendar-weekday-large-width: calendar-weeknumber-large-height: calendar-weeknumber-large-width: calendar-month-cell-large-width: calendar-month-cell-large-height: calendar-year-cell-large-width: calendar-year-cell-large-height:
constructor
constructor(dateService: NbDateService<D>);
property boundingMonth
boundingMonth: boolean;
Defines if we should render previous and next months in the current month view.
property dateService
protected dateService: NbDateService<D>;
property dayCellComponent
dayCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;
property filter
filter: (D: any) => boolean;
A predicate that decides which cells will be disabled.
property firstDayOfWeek
firstDayOfWeek: number;
Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
undefined
means that default locale setting will be used.
property max
max: {};
A maximum available date for selection.
property min
min: {};
A minimum available date for selection.
property monthCellComponent
monthCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;
property ngAcceptInputType_showWeekNumber
static ngAcceptInputType_showWeekNumber: NbBooleanInput;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ngAcceptInputType_startView
static ngAcceptInputType_startView: NbCalendarViewModeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarRangeComponent<any>, 'nb-calendar-range', never, { boundingMonth: { alias: 'boundingMonth'; required: false }; startView: { alias: 'startView'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; _cellComponent: { alias: 'dayCellComponent'; required: false }; _monthCellComponent: { alias: 'monthCellComponent'; required: false }; monthCellComponent: { alias: 'monthCellComponent'; required: false }; _yearCellComponent: { alias: 'yearCellComponent'; required: false }; size: { alias: 'size'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; showNavigation: { alias: 'showNavigation'; required: false }; range: { alias: 'range'; required: false }; showWeekNumber: { alias: 'showWeekNumber'; required: false }; weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false }; firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false }; }, { rangeChange: 'rangeChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarRangeComponent<any>, never>;
property range
range: NbCalendarRange<D>;
Range which will be rendered as selected.
property rangeChange
rangeChange: EventEmitter<NbCalendarRange<D>>;
Emits range when start selected and emits again when end selected.
property showNavigation
showNavigation: boolean;
Determines should we show calendars navigation or not.
property showWeekNumber
showWeekNumber: boolean;
Determines should we show week numbers column. False by default.
property size
size: NbCalendarSize;
Size of the calendar and entire components. Can be 'medium' which is default or 'large'.
property startView
startView: NbCalendarViewMode;
Defines starting view for the calendar.
property visibleDate
visibleDate: {};
property weekNumberSymbol
weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property yearCellComponent
yearCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;
method onChange
onChange: (date: D) => void;
class NbCalendarRangeDayCellComponent
class NbCalendarRangeDayCellComponent<D> extends NbBaseCalendarRangeCell<D> implements NbCalendarCell<D, NbCalendarRange<D>> {}
constructor
constructor(dateService: NbDateService<D>);
property boundingMonth
readonly boundingMonth: boolean;
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property day
readonly day: number;
property dayCellClass
dayCellClass: boolean;
property disabled
readonly disabled: boolean;
property empty
readonly empty: boolean;
property end
readonly end: boolean;
property filter
filter: (D: any) => boolean;
property inRange
readonly inRange: boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarRangeDayCellComponent<any>, 'nb-calendar-range-day-cell', never, { date: { alias: 'date'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarRangeDayCellComponent<any>, never>;
property rangeCellClass
rangeCellClass: boolean;
property select
select: EventEmitter<D>;
property selected
readonly selected: boolean;
property selectedValue
selectedValue: NbCalendarRange<D>;
property size
size: NbCalendarSize;
property start
readonly start: boolean;
property today
readonly today: boolean;
property visibleDate
visibleDate: {};
method dontFitFilter
protected dontFitFilter: () => boolean;
method greaterThanMax
protected greaterThanMax: () => boolean;
method isInRange
protected isInRange: (date: D, { start, end }: NbCalendarRange<D>) => boolean;
method onClick
onClick: () => void;
method smallerThanMin
protected smallerThanMin: () => boolean;
class NbCalendarRangeModule
class NbCalendarRangeModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarRangeModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCalendarRangeModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbCalendarRangeModule, [ typeof i1.NbCalendarRangeComponent, typeof i2.NbCalendarRangeDayCellComponent, typeof i3.NbCalendarRangeYearCellComponent, typeof i4.NbCalendarRangeMonthCellComponent ], [typeof i5.NbBaseCalendarModule], [typeof i1.NbCalendarRangeComponent]>;
class NbCalendarRangeMonthCellComponent
class NbCalendarRangeMonthCellComponent<D> extends NbBaseCalendarRangeCell<D> implements NbCalendarCell<D, NbCalendarRange<D>> {}
constructor
constructor(dateService: NbDateService<D>);
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property disabled
readonly disabled: boolean;
property inRange
readonly inRange: boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property month
readonly month: string;
property monthCellClass
monthCellClass: boolean;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarRangeMonthCellComponent<any>, 'nb-calendar-range-month-cell', never, { date: { alias: 'date'; required: false }; visibleDate: { alias: 'visibleDate'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarRangeMonthCellComponent<any>, never>;
property rangeCellClass
rangeCellClass: boolean;
property rangeEnd
readonly rangeEnd: boolean;
property rangeStart
readonly rangeStart: boolean;
property select
select: EventEmitter<D>;
property selected
readonly selected: boolean;
property selectedValue
selectedValue: NbCalendarRange<D>;
property size
size: NbCalendarSize;
property today
readonly today: boolean;
property visibleDate
visibleDate: {};
method greaterThanMax
protected greaterThanMax: () => boolean;
method isInRage
protected isInRage: (date: D, range: NbCalendarRange<D>) => boolean;
method monthEnd
protected monthEnd: () => D;
method monthStart
protected monthStart: () => D;
method onClick
onClick: () => void;
method smallerThanMin
protected smallerThanMin: () => boolean;
class NbCalendarRangeYearCellComponent
class NbCalendarRangeYearCellComponent<D> extends NbBaseCalendarRangeCell<D> implements NbCalendarCell<D, NbCalendarRange<D>> {}
constructor
constructor(dateService: NbDateService<D>);
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property disabled
readonly disabled: boolean;
property inRange
readonly inRange: boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarRangeYearCellComponent<any>, 'nb-calendar-range-year-cell', never, { date: { alias: 'date'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbCalendarRangeYearCellComponent<any>, never>;
property rangeCellClass
rangeCellClass: boolean;
property rangeEnd
readonly rangeEnd: boolean;
property rangeStart
readonly rangeStart: boolean;
property select
select: EventEmitter<D>;
property selected
readonly selected: boolean;
property selectedValue
selectedValue: NbCalendarRange<D>;
property size
size: NbCalendarSize;
property today
readonly today: boolean;
property year
readonly year: number;
property yearCellClass
yearCellClass: boolean;
method greaterThanMax
protected greaterThanMax: () => boolean;
method isInRange
protected isInRange: (date: D, { start, end }: NbCalendarRange<D>) => boolean;
method onClick
onClick: () => void;
method smallerThanMin
protected smallerThanMin: () => boolean;
method yearEnd
protected yearEnd: () => D;
method yearStart
protected yearStart: () => D;
class NbCalendarTimeModelService
class NbCalendarTimeModelService<D> {}
constructor
constructor(dateService: NbDateService<D>);
property dateService
protected dateService: NbDateService<D>;
property MINUTES_AND_SECONDS
readonly MINUTES_AND_SECONDS: number;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarTimeModelService<any>, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbCalendarTimeModelService<any>>;
method buildDateFormat
buildDateFormat: (twelveHoursFormat: boolean, withSeconds?: boolean) => string;
method getHoursRange
getHoursRange: (step?: number) => D[];
method getResetTime
getResetTime: () => D;
method paddToTwoSymbols
paddToTwoSymbols: (n: number) => string;
class NbCalendarViewModeComponent
class NbCalendarViewModeComponent<D> {}
constructor
constructor( dateService: NbDateService<D>, yearModelService: NbCalendarYearModelService<D>);
property changeMode
changeMode: EventEmitter<void>;
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property ngAcceptInputType_viewMode
static ngAcceptInputType_viewMode: NbCalendarViewModeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarViewModeComponent<any>, 'nb-calendar-view-mode', never, { date: { alias: 'date'; required: false }; viewMode: { alias: 'viewMode'; required: false }; }, { changeMode: 'changeMode' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarViewModeComponent<any>, never>;
property viewMode
viewMode: NbCalendarViewMode;
property yearModelService
protected yearModelService: NbCalendarYearModelService<D>;
method getFirstYear
protected getFirstYear: () => string;
method getIcon
getIcon: () => string;
method getLastYear
protected getLastYear: () => string;
method getText
getText: () => string;
class NbCalendarWeekNumberComponent
class NbCalendarWeekNumberComponent<D> implements OnChanges {}
constructor
constructor(dateService: NbDateService<D>);
property isLarge
readonly isLarge: boolean;
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarWeekNumberComponent<any>, 'nb-calendar-week-numbers', never, { weeks: { alias: 'weeks'; required: false }; size: { alias: 'size'; required: false }; weekNumberSymbol: { alias: 'weekNumberSymbol'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarWeekNumberComponent<any>, never>;
property size
size: NbCalendarSize;
property weekNumbers
weekNumbers: number[];
property weekNumberSymbol
weekNumberSymbol: string;
Sets symbol used as a header for week numbers column
property weeks
weeks: D[][];
method getWeeks
getWeeks: () => number[];
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
class NbCalendarWithTimeComponent
class NbCalendarWithTimeComponent<D> extends NbCalendarComponent<D> implements OnInit, AfterViewInit {}
constructor
constructor( dateService: NbDateService<D>, cd: ChangeDetectorRef, calendarTimeModelService: NbCalendarTimeModelService<D>);
property applyButtonText
applyButtonText: string;
property calendarTimeModelService
protected calendarTimeModelService: NbCalendarTimeModelService<D>;
property cd
cd: ChangeDetectorRef;
property currentTimeButtonText
currentTimeButtonText: string;
property dateService
protected dateService: NbDateService<D>;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarWithTimeComponent<any>, 'nb-calendar-with-time', never, { visibleDate: { alias: 'visibleDate'; required: false }; twelveHoursFormat: { alias: 'twelveHoursFormat'; required: false }; showAmPmLabel: { alias: 'showAmPmLabel'; required: false }; withSeconds: { alias: 'withSeconds'; required: false }; singleColumn: { alias: 'singleColumn'; required: false }; step: { alias: 'step'; required: false }; timeFormat: { alias: 'timeFormat'; required: false }; title: { alias: 'title'; required: false }; applyButtonText: { alias: 'applyButtonText'; required: false }; currentTimeButtonText: { alias: 'currentTimeButtonText'; required: false; }; showCurrentTimeButton: { alias: 'showCurrentTimeButton'; required: false; }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarWithTimeComponent<any>, never>;
property portalOutlet
portalOutlet: NbPortalOutletDirective;
property showAmPmLabel
showAmPmLabel: boolean;
Defines should show am/pm label if twelveHoursFormat enabled.
property showCurrentTimeButton
showCurrentTimeButton: boolean;
property singleColumn
singleColumn: boolean;
Show timepicker values in one column with 60 minutes step by default.
property step
step: number;
Defines minutes step when we use fill time format. If set to 20, it will be: '12:00, 12:20: 12:40, 13:00...'
property timeFormat
timeFormat: string;
Defines time format.
property timepicker
timepicker: NbTimePickerComponent<D>;
property title
title: string;
Defines text over the timepicker.
property twelveHoursFormat
twelveHoursFormat: boolean;
Defines 12 hours format like '07:00 PM'.
property visibleDate
visibleDate: {};
Defines selected date.
property withSeconds
withSeconds: boolean;
Show seconds in timepicker. Ignored when singleColumn is true.
method isLarge
isLarge: () => boolean;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnInit
ngOnInit: () => void;
method onDateValueChange
onDateValueChange: (date: D) => void;
method onTimeChange
onTimeChange: (selectedTime: NbSelectedTimePayload<D>) => void;
method saveCurrentTime
saveCurrentTime: () => void;
method saveValue
saveValue: () => void;
method showSeconds
showSeconds: () => boolean;
class NbCalendarYearCellComponent
class NbCalendarYearCellComponent<D> implements NbCalendarCell<D, D> {}
constructor
constructor(dateService: NbDateService<D>);
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property disabled
readonly disabled: boolean;
property isLarge
readonly isLarge: boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarYearCellComponent<any>, 'nb-calendar-year-cell', never, { date: { alias: 'date'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; selectedValue: { alias: 'selectedValue'; required: false }; size: { alias: 'size'; required: false }; }, { select: 'select' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarYearCellComponent<any>, never>;
property select
select: EventEmitter<D>;
property selected
readonly selected: boolean;
property selectedValue
selectedValue: {};
property size
size: NbCalendarSize;
property today
readonly today: boolean;
property year
readonly year: number;
property yearCellClass
yearCellClass: boolean;
method onClick
onClick: () => void;
class NbCalendarYearModelService
class NbCalendarYearModelService<D> {}
constructor
constructor(dateService: NbDateService<D>);
property dateService
protected dateService: NbDateService<D>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarYearModelService<any>, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbCalendarYearModelService<any>>;
property yearsInRow
protected yearsInRow: number;
property yearsInView
protected yearsInView: number;
method copyWithYear
protected copyWithYear: (year: number, date: D) => D;
method getViewYears
getViewYears: (viewYear: D) => D[][];
method getYearsInRow
getYearsInRow: () => number;
method getYearsInView
getYearsInView: () => number;
class NbCalendarYearPickerComponent
class NbCalendarYearPickerComponent<D> implements OnChanges {}
constructor
constructor( dateService: NbDateService<D>, yearModelService: NbCalendarYearModelService<D>);
property cellComponent
cellComponent: Type<NbCalendarCell<D, D>>;
property date
date: {};
property dateService
protected dateService: NbDateService<D>;
property filter
filter: (D: any) => boolean;
property large
readonly large: boolean;
property max
max: {};
property min
min: {};
property ngAcceptInputType_size
static ngAcceptInputType_size: NbCalendarSizeValues;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCalendarYearPickerComponent<any>, 'nb-calendar-year-picker', never, { date: { alias: 'date'; required: false }; min: { alias: 'min'; required: false }; max: { alias: 'max'; required: false }; filter: { alias: 'filter'; required: false }; _cellComponent: { alias: 'cellComponent'; required: false }; size: { alias: 'size'; required: false }; year: { alias: 'year'; required: false }; }, { yearChange: 'yearChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarYearPickerComponent<any>, never>;
property size
size: NbCalendarSize;
property year
year: {};
property yearChange
yearChange: EventEmitter<D>;
property yearModelService
protected yearModelService: NbCalendarYearModelService<D>;
property years
years: D[][];
method ngOnChanges
ngOnChanges: () => void;
method onSelect
onSelect: (year: any) => void;
class NbCardBackComponent
class NbCardBackComponent {}
Component intended to be used within the
<nb-flip-card>
and<nb-reveal-card>
components.Use it as a container for the back card.
class NbCardBodyComponent
class NbCardBodyComponent {}
Component intended to be used within the
<nb-card>
component. Adds styles for a preset body section.
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 tonb-card
, sonb-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 withstatus
: @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.
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.
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:
class NbCardModule
class NbCardModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCardModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCardModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbCardModule, [ typeof i1.NbCardComponent, typeof i1.NbCardBodyComponent, typeof i1.NbCardFooterComponent, typeof i1.NbCardHeaderComponent, typeof i2.NbRevealCardComponent, typeof i3.NbFlipCardComponent, typeof i4.NbCardFrontComponent, typeof i4.NbCardBackComponent ], [typeof i5.NbSharedModule, typeof i6.NbIconModule], [ typeof i1.NbCardComponent, typeof i1.NbCardBodyComponent, typeof i1.NbCardFooterComponent, typeof i1.NbCardHeaderComponent, typeof i2.NbRevealCardComponent, typeof i3.NbFlipCardComponent, typeof i4.NbCardFrontComponent, typeof i4.NbCardBackComponent ]>;
class NbCdkAdapterModule
class NbCdkAdapterModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCdkAdapterModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCdkAdapterModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration<NbCdkAdapterModule, never, never, never>;
method forRoot
static forRoot: () => ModuleWithProviders<NbCdkAdapterModule>;
class NbCdkMappingModule
class NbCdkMappingModule {}
This module helps us to keep all angular/cdk deps inside our cdk module via providing aliases. Approach will help us move cdk in separate npm package and refactor nebular/theme code.
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCdkMappingModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCdkMappingModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbCdkMappingModule, [typeof NbPortalDirective, typeof NbPortalOutletDirective], [any, any], [any, any, typeof NbPortalDirective, typeof NbPortalOutletDirective]>;
method forRoot
static forRoot: () => ModuleWithProviders<NbCdkMappingModule>;
class NbCellDefDirective
class NbCellDefDirective extends CdkCellDef {}
Cell definition for the nb-table. Captures the template of a column's data row cell as well as cell-specific properties.
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 {}
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 useNbChatModule.forRoot({ ... })
call if this is a global app configuration orNbChatModule.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 typesYou could provide a title template via the
nbChatTitle
directive. It overridestitle
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 thelink
message type:<nb-chat><a *nbCustomMessage="'link'" href="https://example.com">example.com</a></nb-chat>Then, add the
nb-chat-message
component with thelink
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 thenb-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 vialet 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 theng-template
:<div *nbCustomMessage="'my-custom-type'; let data"><!-- custom message --></div>or
<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 ofNbChatCustomMessageDirective
s 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-messagetype="file"[files]="[ { url: '...' } ]"message="Hello world!"></nb-chat-message>Map message:
<nb-chat-messagetype="map"[latitude]="53.914"[longitude]="27.59"message="Here I am"></nb-chat-message>chat-message-background: chat-message-text-color: chat-message-reply-background-color: chat-message-reply-text-color: chat-message-avatar-background-color: chat-message-sender-text-color: chat-message-quote-background-color: chat-message-quote-text-color: chat-message-file-text-color: chat-message-file-background-color:
constructor
constructor( domSanitizer: DomSanitizer, customMessageService: NbChatCustomMessageService);
property avatarStyle
avatarStyle: SafeStyle;
property builtInMessageTypes
protected readonly builtInMessageTypes: string[];
property customMessageData
customMessageData: any;
Data which will be set as custom message template context {any}
property customMessageService
protected customMessageService: NbChatCustomMessageService;
property date
date: Date;
Message send date {Date}
property dateFormat
dateFormat: string;
Message send date format, default 'shortTime' {string}
property domSanitizer
protected domSanitizer: DomSanitizer;
property files
files: NbChatMessageFile[];
Array of files
{ url: 'file url', icon: 'file icon class' }
property flyInOut
readonly flyInOut: boolean;
property latitude
latitude: number;
Map latitude {number}
property longitude
longitude: number;
Map longitude {number}
property message
message: string;
Message sender {string}
property ngAcceptInputType_reply
static ngAcceptInputType_reply: NbBooleanInput;
property notReply
readonly notReply: boolean;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbChatMessageComponent, 'nb-chat-message', never, { reply: { alias: 'reply'; required: false }; message: { alias: 'message'; required: false }; sender: { alias: 'sender'; required: false }; date: { alias: 'date'; required: false }; dateFormat: { alias: 'dateFormat'; required: false }; files: { alias: 'files'; required: false }; quote: { alias: 'quote'; required: false }; latitude: { alias: 'latitude'; required: false }; longitude: { alias: 'longitude'; required: false }; avatar: { alias: 'avatar'; required: false }; type: { alias: 'type'; required: false }; customMessageData: { alias: 'customMessageData'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageComponent, never>;
property quote
quote: string;
Quoted message text {string}
property reply
reply: boolean;
Determines if a message is a reply
property sender
sender: string;
Message sender {string}
property type
type: string;
Message type, available options
text|file|map|quote
{string}
method getCustomMessage
protected getCustomMessage: (type: string) => NbChatCustomMessageDirective;
method getInitials
getInitials: () => string;
class NbChatMessageFileComponent
class NbChatMessageFileComponent {}
Chat message component.
constructor
constructor(cd: ChangeDetectorRef, domSanitizer: DomSanitizer);
property cd
protected cd: ChangeDetectorRef;
property date
date: Date;
Message send date {Date}
property dateFormat
dateFormat: string;
Message send date format, default 'shortTime' {string}
property domSanitizer
protected domSanitizer: DomSanitizer;
property message
message: string;
Message sender {string}
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbChatMessageFileComponent, 'nb-chat-message-file', never, { message: { alias: 'message'; required: false }; sender: { alias: 'sender'; required: false }; date: { alias: 'date'; required: false }; dateFormat: { alias: 'dateFormat'; required: false }; files: { alias: 'files'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageFileComponent, never>;
property readyFiles
readyFiles: any[];
property sender
sender: string;
Message sender {string}
method isImage
isImage: (file: NbChatMessageFile) => boolean;
class NbChatMessageMapComponent
class NbChatMessageMapComponent {}
Chat message component.
constructor
constructor(options: NbChatOptions);
property date
date: Date;
Message send date {Date}
property dateFormat
dateFormat: string;
Message send date format, default 'shortTime' {string}
property file
readonly file: { url: string; type: string; icon: string };
property latitude
latitude: number;
Map latitude {number}
property longitude
longitude: number;
Map longitude {number}
property mapKey
mapKey: string;
property message
message: string;
Message sender {string}
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbChatMessageMapComponent, 'nb-chat-message-map', never, { message: { alias: 'message'; required: false }; sender: { alias: 'sender'; required: false }; date: { alias: 'date'; required: false }; dateFormat: { alias: 'dateFormat'; required: false }; latitude: { alias: 'latitude'; required: false }; longitude: { alias: 'longitude'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageMapComponent, never>;
property sender
sender: string;
Message sender {string}
class NbChatMessageQuoteComponent
class NbChatMessageQuoteComponent {}
Chat message component.
property date
date: Date;
Message send date {Date}
property dateFormat
dateFormat: string;
Message send date format, default 'shortTime' {string}
property message
message: string;
Message sender {string}
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbChatMessageQuoteComponent, 'nb-chat-message-quote', never, { message: { alias: 'message'; required: false }; sender: { alias: 'sender'; required: false }; date: { alias: 'date'; required: false }; dateFormat: { alias: 'dateFormat'; required: false }; quote: { alias: 'quote'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageQuoteComponent, never>;
property quote
quote: string;
Quoted message {Date}
property sender
sender: string;
Message sender {string}
class NbChatMessageTextComponent
class NbChatMessageTextComponent {}
Chat message component.
property date
date: Date;
Message send date {Date}
property dateFormat
dateFormat: string;
Message send date format, default 'shortTime' {string}
property message
message: string;
Message sender {string}
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbChatMessageTextComponent, 'nb-chat-message-text', never, { sender: { alias: 'sender'; required: false }; message: { alias: 'message'; required: false }; date: { alias: 'date'; required: false }; dateFormat: { alias: 'dateFormat'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatMessageTextComponent, never>;
property sender
sender: string;
Message sender {string}
class NbChatModule
class NbChatModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbChatModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbChatModule, [ typeof i1.NbChatComponent, typeof i2.NbChatMessageComponent, typeof i3.NbChatFormComponent, typeof i4.NbChatMessageTextComponent, typeof i5.NbChatMessageFileComponent, typeof i6.NbChatMessageQuoteComponent, typeof i7.NbChatMessageMapComponent, typeof i8.NbChatAvatarComponent, typeof i9.NbChatCustomMessageDirective, typeof i10.NbChatTitleDirective ], [ typeof i11.NbSharedModule, typeof i12.NbIconModule, typeof i13.NbInputModule, typeof i14.NbButtonModule ], [ typeof i1.NbChatComponent, typeof i2.NbChatMessageComponent, typeof i3.NbChatFormComponent, typeof i4.NbChatMessageTextComponent, typeof i5.NbChatMessageFileComponent, typeof i6.NbChatMessageQuoteComponent, typeof i7.NbChatMessageMapComponent, typeof i8.NbChatAvatarComponent, typeof i9.NbChatCustomMessageDirective, typeof i10.NbChatTitleDirective ]>;
method forChild
static forChild: (options?: NbChatOptions) => ModuleWithProviders<NbChatModule>;
method forRoot
static forRoot: (options?: NbChatOptions) => ModuleWithProviders<NbChatModule>;
class NbChatOptions
class NbChatOptions {}
Copyright Akveo. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.
property messageGoogleMapKey
messageGoogleMapKey?: string;
class NbChatTitleDirective
class NbChatTitleDirective {}
constructor
constructor(templateRef: TemplateRef<any>);
property context
context: Object;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbChatTitleDirective, '[nbChatTitle]', never, { context: { alias: 'context'; required: false } }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbChatTitleDirective, never>;
property templateRef
templateRef: TemplateRef<any>;
class NbCheckboxComponent
class NbCheckboxComponent implements AfterViewInit, ControlValueAccessor {}
Styled checkbox component
@stacked-example(Showcase, checkbox/checkbox-showcase.component)
### Installation
Import
NbCheckboxComponent
to your feature module.@NgModule({imports: [// ...NbCheckboxModule,],})export class PageModule { }### Usage
Checkbox is available in multiple colors using
status
property: @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)Indeterminate state is also supported: @stacked-example(Indeterminate Checkbox, checkbox/checkbox-indeterminate.component)
Checkbox can be disabled via
disabled
attribute. @stacked-example(Disabled Checkbox, checkbox/checkbox-disabled.component)checkbox-height: checkbox-width: checkbox-border-style: checkbox-border-width: checkbox-border-radius: checkbox-outline-width: checkbox-outline-color: checkbox-text-font-family: checkbox-text-font-size: checkbox-text-font-weight: checkbox-text-line-height: checkbox-text-space: checkbox-padding: checkbox-focus-inset-shadow-length: checkbox-basic-text-color: checkbox-basic-background-color: checkbox-basic-border-color: checkbox-basic-checked-background-color: checkbox-basic-checked-border-color: checkbox-basic-checked-checkmark-color: checkbox-basic-indeterminate-background-color: checkbox-basic-indeterminate-border-color: checkbox-basic-indeterminate-checkmark-color: checkbox-basic-focus-background-color: checkbox-basic-focus-border-color: checkbox-basic-focus-checked-background-color: checkbox-basic-focus-checked-border-color: checkbox-basic-hover-background-color: checkbox-basic-hover-border-color: checkbox-basic-hover-checked-background-color: checkbox-basic-hover-checked-border-color: checkbox-basic-active-background-color: checkbox-basic-active-border-color: checkbox-basic-active-checked-background-color: checkbox-basic-active-checked-border-color: checkbox-basic-disabled-background-color: checkbox-basic-disabled-border-color: checkbox-basic-disabled-checkmark-color: checkbox-basic-disabled-text-color: checkbox-basic-disabled-checked-background-color: checkbox-primary-text-color: checkbox-primary-background-color: checkbox-primary-border-color: checkbox-primary-checked-background-color: checkbox-primary-checked-border-color: checkbox-primary-checked-checkmark-color: checkbox-primary-indeterminate-background-color: checkbox-primary-indeterminate-border-color: checkbox-primary-indeterminate-checkmark-color: checkbox-primary-focus-background-color: checkbox-primary-focus-border-color: checkbox-primary-focus-checked-background-color: checkbox-primary-focus-checked-border-color: checkbox-primary-hover-background-color: checkbox-primary-hover-border-color: checkbox-primary-hover-checked-background-color: checkbox-primary-hover-checked-border-color: checkbox-primary-active-background-color: checkbox-primary-active-border-color: checkbox-primary-active-checked-background-color: checkbox-primary-active-checked-border-color: checkbox-primary-disabled-background-color: checkbox-primary-disabled-border-color: checkbox-primary-disabled-checkmark-color: checkbox-primary-disabled-text-color: checkbox-primary-disabled-checked-background-color: checkbox-success-text-color: checkbox-success-background-color: checkbox-success-border-color: checkbox-success-checked-background-color: checkbox-success-checked-border-color: checkbox-success-checked-checkmark-color: checkbox-success-indeterminate-background-color: checkbox-success-indeterminate-border-color: checkbox-success-indeterminate-checkmark-color: checkbox-success-focus-background-color: checkbox-success-focus-border-color: checkbox-success-focus-checked-background-color: checkbox-success-focus-checked-border-color: checkbox-success-hover-background-color: checkbox-success-hover-border-color: checkbox-success-hover-checked-background-color: checkbox-success-hover-checked-border-color: checkbox-success-active-background-color: checkbox-success-active-border-color: checkbox-success-active-checked-background-color: checkbox-success-active-checked-border-color: checkbox-success-disabled-background-color: checkbox-success-disabled-border-color: checkbox-success-disabled-checkmark-color: checkbox-success-disabled-text-color: checkbox-success-disabled-checked-background-color: checkbox-info-text-color: checkbox-info-background-color: checkbox-info-border-color: checkbox-info-checked-background-color: checkbox-info-checked-border-color: checkbox-info-checked-checkmark-color: checkbox-info-indeterminate-background-color: checkbox-info-indeterminate-border-color: checkbox-info-indeterminate-checkmark-color: checkbox-info-focus-background-color: checkbox-info-focus-border-color: checkbox-info-focus-checked-background-color: checkbox-info-focus-checked-border-color: checkbox-info-hover-background-color: checkbox-info-hover-border-color: checkbox-info-hover-checked-background-color: checkbox-info-hover-checked-border-color: checkbox-info-active-background-color: checkbox-info-active-border-color: checkbox-info-active-checked-background-color: checkbox-info-active-checked-border-color: checkbox-info-disabled-background-color: checkbox-info-disabled-border-color: checkbox-info-disabled-checkmark-color: checkbox-info-disabled-text-color: checkbox-info-disabled-checked-background-color: checkbox-warning-text-color: checkbox-warning-background-color: checkbox-warning-border-color: checkbox-warning-checked-background-color: checkbox-warning-checked-border-color: checkbox-warning-checked-checkmark-color: checkbox-warning-indeterminate-background-color: checkbox-warning-indeterminate-border-color: checkbox-warning-indeterminate-checkmark-color: checkbox-warning-focus-background-color: checkbox-warning-focus-border-color: checkbox-warning-focus-checked-background-color: checkbox-warning-focus-checked-border-color: checkbox-warning-hover-background-color: checkbox-warning-hover-border-color: checkbox-warning-hover-checked-background-color: checkbox-warning-hover-checked-border-color: checkbox-warning-active-background-color: checkbox-warning-active-border-color: checkbox-warning-active-checked-background-color: checkbox-warning-active-checked-border-color: checkbox-warning-disabled-background-color: checkbox-warning-disabled-border-color: checkbox-warning-disabled-checkmark-color: checkbox-warning-disabled-text-color: checkbox-warning-disabled-checked-background-color: checkbox-danger-text-color: checkbox-danger-background-color: checkbox-danger-border-color: checkbox-danger-checked-background-color: checkbox-danger-checked-border-color: checkbox-danger-checked-checkmark-color: checkbox-danger-indeterminate-background-color: checkbox-danger-indeterminate-border-color: checkbox-danger-indeterminate-checkmark-color: checkbox-danger-focus-background-color: checkbox-danger-focus-border-color: checkbox-danger-focus-checked-background-color: checkbox-danger-focus-checked-border-color: checkbox-danger-hover-background-color: checkbox-danger-hover-border-color: checkbox-danger-hover-checked-background-color: checkbox-danger-hover-checked-border-color: checkbox-danger-active-background-color: checkbox-danger-active-border-color: checkbox-danger-active-checked-background-color: checkbox-danger-active-checked-border-color: checkbox-danger-disabled-background-color: checkbox-danger-disabled-border-color: checkbox-danger-disabled-checkmark-color: checkbox-danger-disabled-text-color: checkbox-danger-disabled-checked-background-color: checkbox-control-text-color: checkbox-control-background-color: checkbox-control-border-color: checkbox-control-checked-background-color: checkbox-control-checked-border-color: checkbox-control-checked-checkmark-color: checkbox-control-indeterminate-background-color: checkbox-control-indeterminate-border-color: checkbox-control-indeterminate-checkmark-color: checkbox-control-focus-background-color: checkbox-control-focus-border-color: checkbox-control-focus-checked-background-color: checkbox-control-focus-checked-border-color: checkbox-control-hover-background-color: checkbox-control-hover-border-color: checkbox-control-hover-checked-background-color: checkbox-control-hover-checked-border-color: checkbox-control-active-background-color: checkbox-control-active-border-color: checkbox-control-active-checked-background-color: checkbox-control-active-checked-border-color: checkbox-control-disabled-background-color: checkbox-control-disabled-border-color: checkbox-control-disabled-checkmark-color: checkbox-control-disabled-text-color: checkbox-control-disabled-checked-background-color:
constructor
constructor( changeDetector: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef<HTMLElement>, zone: NgZone, statusService: NbStatusService);
property additionalClasses
readonly additionalClasses: string[];
property basic
readonly basic: boolean;
property checked
checked: boolean;
property checkedChange
checkedChange: EventEmitter<boolean>;
Output when checked state is changed by a user EventEmitter
property control
readonly control: boolean;
property danger
readonly danger: boolean;
property disabled
disabled: boolean;
Controls input disabled state
property indeterminate
indeterminate: boolean;
Controls checkbox indeterminate state
property info
readonly info: boolean;
property ngAcceptInputType_checked
static ngAcceptInputType_checked: NbBooleanInput;
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ngAcceptInputType_indeterminate
static ngAcceptInputType_indeterminate: NbBooleanInput;
property onChange
onChange: any;
property onTouched
onTouched: any;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbCheckboxComponent, 'nb-checkbox', never, { checked: { alias: 'checked'; required: false }; disabled: { alias: 'disabled'; required: false }; status: { alias: 'status'; required: false }; indeterminate: { alias: 'indeterminate'; required: false }; }, { checkedChange: 'checkedChange' }, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCheckboxComponent, never>;
property primary
readonly primary: boolean;
property status
status: string;
Checkbox status. Possible values are:
basic
,primary
,success
,warning
,danger
,info
,control
.
property success
readonly success: boolean;
property warning
readonly warning: boolean;
method ngAfterViewInit
ngAfterViewInit: () => void;
method registerOnChange
registerOnChange: (fn: any) => void;
method registerOnTouched
registerOnTouched: (fn: any) => void;
method setDisabledState
setDisabledState: (val: boolean) => void;
method setTouched
setTouched: () => void;
method updateValueAndIndeterminate
updateValueAndIndeterminate: (event: Event) => void;
method writeValue
writeValue: (val: any) => void;
class NbCheckboxModule
class NbCheckboxModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbCheckboxModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbCheckboxModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbCheckboxModule, [typeof i1.NbCheckboxComponent], [typeof i2.NbSharedModule, typeof i3.NbIconModule], [typeof i1.NbCheckboxComponent]>;
class NbClickTriggerStrategy
class NbClickTriggerStrategy extends NbTriggerStrategyBase {}
Creates show and hide event streams. Fires toggle event when the click was performed on the host element. Fires close event when the click was performed on the document but not on the host or container.
class NbColorHelper
class NbColorHelper {}
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 yourapp.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 plainNbMenu
inside, so you have to work with it just like withNbMenu
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
andnoop
method configureDynamicOverlay
protected configureDynamicOverlay: () => NbDynamicOverlayHandler;
method hide
hide: () => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnChanges
ngOnChanges: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method rebuild
rebuild: () => void;
method show
show: () => void;
method toggle
toggle: () => void;
method updateOverlayContext
protected updateOverlayContext: () => void;
class NbContextMenuModule
class NbContextMenuModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbContextMenuModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbContextMenuModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbContextMenuModule, [typeof i1.NbContextMenuDirective, typeof i2.NbContextMenuComponent], [any, typeof i4.NbOverlayModule, typeof i5.NbMenuModule], [typeof i1.NbContextMenuDirective]>;
class NbDataRowOutletDirective
class NbDataRowOutletDirective extends DataRowOutlet {}
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 afocus
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 usingmin
andmax
dates passed to the datepicker.@stacked-example(Validation, datepicker/datepicker-validation.component)
Also
NbDatepickerDirective
may be filtered usingfilter
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 andDatePipe
for dates formatting. And nativeDate.parse(...)
for dates parsing. But nativeDate.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 importNbMomentDateModule
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 importNbDateFnsDateModule
from this package.### NbDateFnsDateModule
Format is required when using
NbDateFnsDateModule
. You can set it viaformat
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' })
andNbDateFnsDateModule.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 settingformatOptions
andparseOptions
of options object passed toNbDateFnsDateModule.forRoot
andNbDateFnsDateModule.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
andformatOptions
to provide locale.import { eo } from 'date-fns/locale';@NgModule({imports: [NbDateFnsDateModule.forRoot({parseOptions: { locale: eo },formatOptions: { locale: eo },}),],})datepicker-background-color: datepicker-border-color: datepicker-border-style: datepicker-border-width: datepicker-border-radius: datepicker-shadow:
constructor
constructor( document: any, datepickerAdapters: NbDatepickerAdapter<D>[], hostRef: ElementRef, dateService: NbDateService<D>, changeDetector: ChangeDetectorRef);
property changeDetector
protected changeDetector: ChangeDetectorRef;
property datepickerAdapter
protected datepickerAdapter: NbDatepickerAdapter<D>;
Datepicker adapter.
property datepickerAdapters
protected datepickerAdapters: NbDatepickerAdapter<D>[];
property dateService
protected dateService: NbDateService<D>;
property destroy$
protected destroy$: Subject<void>;
property document
protected document: any;
property hostRef
protected hostRef: ElementRef;
property input
readonly input: HTMLInputElement;
Returns html input element.
property inputValue
readonly inputValue: string;
Returns host input value.
property isDatepickerReady
protected isDatepickerReady: boolean;
property onChange
protected onChange: (D: any) => void;
property onTouched
protected onTouched: () => void;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbDatepickerDirective<any>, 'input[nbDatepicker]', never, { setPicker: { alias: 'nbDatepicker'; required: false } }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDatepickerDirective<any>, never>;
property picker
protected picker: NbDatepicker<D, D>;
Datepicker instance.
property pickerInputsChangedSubscription
protected pickerInputsChangedSubscription: any;
property queue
protected queue: {};
property validator
protected validator: ValidatorFn;
Form control validators will be called in validators context, so, we need to bind them.
method chooseDatepickerAdapter
protected chooseDatepickerAdapter: () => void;
Chooses datepicker adapter based on passed picker component.
method filterValidator
protected filterValidator: () => ValidationErrors | null;
Validates passed value satisfy the filter.
method handleInputChange
protected handleInputChange: (value: string) => void;
Parses input value and write if it isn't null.
method hidePicker
protected hidePicker: () => void;
Hides picker, focuses the input
method maxValidator
protected maxValidator: () => ValidationErrors | null;
Validates passed value is smaller than max.
method minValidator
protected minValidator: () => ValidationErrors | null;
Validates passed value is greater than min.
method ngOnDestroy
ngOnDestroy: () => void;
method noDatepickerAdapterProvided
protected noDatepickerAdapterProvided: () => boolean;
Validates if no datepicker adapter provided.
method parseInputValue
protected parseInputValue: (value: any) => D | null;
method parseValidator
protected parseValidator: () => ValidationErrors | null;
Validates that we can parse value correctly.
method registerOnChange
registerOnChange: (fn: any) => void;
method registerOnTouched
registerOnTouched: (fn: any) => void;
method setDisabledState
setDisabledState: (isDisabled: boolean) => void;
method setupPicker
protected setupPicker: () => void;
Attaches picker to the host input element and subscribes on value changes.
method subscribeOnInputChange
protected subscribeOnInputChange: () => void;
method validate
validate: () => ValidationErrors | null;
Form control validation based on picker validator config.
method writeInput
protected writeInput: (value: D) => void;
method writePicker
protected writePicker: (value: D) => void;
method writeValue
writeValue: (value: D) => void;
Writes value in picker and html input element.
class NbDatepickerModule
class NbDatepickerModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDatepickerModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbDatepickerModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbDatepickerModule, [ typeof i1.NbDatepickerDirective, typeof i2.NbDatepickerContainerComponent, typeof i3.NbCalendarWithTimeComponent, typeof i4.NbDateTimePickerComponent, typeof i5.NbDatepickerComponent, typeof i5.NbRangepickerComponent, typeof i5.NbBasePickerComponent ], [ typeof i6.NbOverlayModule, typeof i7.NbCalendarModule, typeof i8.NbCalendarRangeModule, typeof i9.NbCardModule, typeof i10.NbBaseCalendarModule, typeof i11.NbTimepickerModule, typeof i12.NbCalendarKitModule ], [ typeof i1.NbDatepickerDirective, typeof i5.NbDatepickerComponent, typeof i5.NbRangepickerComponent, typeof i4.NbDateTimePickerComponent, typeof i3.NbCalendarWithTimeComponent ]>;
method forRoot
static forRoot: () => ModuleWithProviders<NbDatepickerModule>;
class NbDateService
abstract class NbDateService<D> {}
property DAYS_IN_WEEK
readonly DAYS_IN_WEEK: number;
property HOURS_IN_DAY_PERIOD
readonly HOURS_IN_DAY_PERIOD: number;
Number of hours in AM/PM day periods.
property locale
protected locale: string;
method addDay
abstract addDay: (date: D, days: number) => D;
Returns date with added number of days.
method addHours
abstract addHours: (date: D, hour: number) => D;
Returns date with added number of hours.
method addMinutes
abstract addMinutes: (date: D, minute: number) => D;
Returns date with added number of minutes.
method addMonth
abstract addMonth: (date: D, months: number) => D;
Returns date with added number of months.
method addYear
abstract addYear: (date: D, years: number) => D;
Returns date with added number of years.
method clone
abstract clone: (date: D) => D;
Clones passed date.
method compareDates
abstract compareDates: (date1: D, date2: D) => number;
Compares two dates. Returns 0 if dates are the same. Returns 1 if the first date is greater than the second. Returns -1 if the second date is greater than the first.
method createDate
abstract createDate: (year: number, month: number, date: number) => D;
Creates new date from year, month and date.
method format
abstract format: (date: D, format: string) => string;
Transforms the date to the string according to the passed format.
method getDate
abstract getDate: (date: D) => number;
Gets the date of the month component of the given date.
method getDateFormat
abstract getDateFormat: () => string;
method getDayOfWeek
abstract getDayOfWeek: (date: D) => number;
Returns day of the week of the given date.
method getDayOfWeekNames
abstract getDayOfWeekNames: (style?: TranslationWidth) => string[];
Returns localized days names.
method getDayPeriod
getDayPeriod: (date: D) => NbDayPeriod;
method getFirstDayOfWeek
abstract getFirstDayOfWeek: () => number;
Returns first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
method getHours
abstract getHours: (date: D) => number;
Gets the hour component of the given date.
method getId
abstract getId: () => string;
method getLocaleTimeFormat
abstract getLocaleTimeFormat: () => string;
Gets the time format based on locale
method getMilliseconds
abstract getMilliseconds: (date: D) => number;
Gets the second component of the given date.
method getMinutes
abstract getMinutes: (date: D) => number;
Gets the minute component of the given date.
method getMonth
abstract getMonth: (date: D) => number;
Gets the month component of the given date.
method getMonthEnd
abstract getMonthEnd: (date: D) => D;
Creates the same date but with day equals to the last day in this month.
method getMonthName
abstract getMonthName: (date: D, style?: TranslationWidth) => string;
Returns localized month name by date and style.
method getMonthNameByIndex
abstract getMonthNameByIndex: ( month: number, style?: TranslationWidth) => string;
Returns localized month name by month index and style.
method getMonthStart
abstract getMonthStart: (date: D) => D;
Creates the same date but with day equals to 1.
method getNumberOfDaysInMonth
abstract getNumberOfDaysInMonth: (date: D) => number;
Returns number of days in the date.
method getSeconds
abstract getSeconds: (date: D) => number;
Gets the second component of the given date.
method getTwelveHoursFormat
abstract getTwelveHoursFormat: () => string;
method getTwelveHoursFormatWithSeconds
getTwelveHoursFormatWithSeconds: () => string;
method getTwentyFourHoursFormat
getTwentyFourHoursFormat: () => string;
method getTwentyFourHoursFormatWithSeconds
getTwentyFourHoursFormatWithSeconds: () => string;
method getWeekNumber
abstract getWeekNumber: (date: D) => number;
method getYear
abstract getYear: (date: D) => number;
Gets the year component of the given date.
method getYearEnd
abstract getYearEnd: (date: D) => D;
Creates the same date but with month equals to 11 and day equals to 31.
method getYearStart
abstract getYearStart: (date: D) => D;
Creates the same date but with month equals to 0 and day equals to 1.
method isBetween
isBetween: (date: D, start: D, end: D) => boolean;
Checks if the date is between the start date and the end date.
method isSameDay
abstract isSameDay: (date1: D, date2: D) => boolean;
Checks is two dates have the same day.
method isSameDaySafe
isSameDaySafe: (date1: D, date2: D) => boolean;
Checks is two dates have the same day.
method isSameHour
isSameHour: (date1: D, date2: D) => boolean;
method isSameHourAndMinute
isSameHourAndMinute: (date1: D, date2: D) => boolean;
method isSameMinute
isSameMinute: (date1: D, date2: D) => boolean;
method isSameMonth
abstract isSameMonth: (date1: D, date2: D) => boolean;
Checks is two dates have the same month.
method isSameMonthSafe
isSameMonthSafe: (date1: D, date2: D) => boolean;
Checks is two dates have the same month.
method isSameYear
abstract isSameYear: (date1: D, date2: D) => boolean;
Checks is two dates have the same year.
method isSameYearSafe
isSameYearSafe: (date1: D, date2: D) => boolean;
Checks is two dates have the same year.
method isValidDateString
abstract isValidDateString: (date: string, format: string) => boolean;
Returns true if date string is valid date string according to the provided format.
method isValidTimeString
abstract isValidTimeString: (date: string, format: string) => boolean;
Returns true if time string is valid time string according to the provided format.
method parse
abstract parse: (date: string, format: string) => D;
Parses the date string according to the passed format.
method setHours
abstract setHours: (date: D, hour: number) => D;
Returns date with selected hour
method setLocale
setLocale: (locale: any) => void;
method setMilliseconds
abstract setMilliseconds: (date: D, second: number) => D;
Returns date with selected milliseconds
method setMinutes
abstract setMinutes: (date: D, minute: number) => D;
Returns date with selected minute
method setSeconds
abstract setSeconds: (date: D, second: number) => D;
Returns date with selected second
method today
abstract today: () => D;
Returns today date.
method valueOf
abstract valueOf: (date: D) => number;
Returns date with added number of years.
class NbDateTimeAdapterService
class NbDateTimeAdapterService<D> extends NbDatepickerAdapter<D> {}
constructor
constructor(dateService: NbDateService<D>);
property dateService
protected dateService: NbDateService<D>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDateTimeAdapterService<any>, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbDateTimeAdapterService<any>>;
property picker
picker: Type<NbDateTimePickerComponent<D>>;
method format
format: (date: any, format: string) => string;
method isValid
isValid: (date: string, format: string) => boolean;
method parse
parse: (date: string, format: string) => D;
class NbDateTimePickerComponent
class NbDateTimePickerComponent<D> extends NbBasePickerComponent<D, D, NbCalendarWithTimeComponent<D>> implements OnInit {}
The DateTimePicker component itself. Provides a proxy to
NbCalendarWithTimeComponent
options as well as custom picker options.
constructor
constructor( document: any, positionBuilder: NbPositionBuilderService, triggerStrategyBuilder: NbTriggerStrategyBuilderService, overlay: NbOverlayService, cfr: ComponentFactoryResolver, dateService: NbDateService<D>, dateServiceOptions: any, calendarWithTimeModelService: NbCalendarTimeModelService<D>);
property applyButtonText
applyButtonText: string;
property calendarWithTimeModelService
protected calendarWithTimeModelService: NbCalendarTimeModelService<D>;
property currentTimeButtonText
currentTimeButtonText: string;
property dateTimeChange
readonly dateTimeChange: EventEmitter<D>;
Emits date with time when selected.
property ngAcceptInputType_showAmPmLabel
static ngAcceptInputType_showAmPmLabel: NbBooleanInput;
property ngAcceptInputType_singleColumn
static ngAcceptInputType_singleColumn: NbBooleanInput;
property ngAcceptInputType_twelveHoursFormat
static ngAcceptInputType_twelveHoursFormat: NbBooleanInput;
property ngAcceptInputType_withSeconds
static ngAcceptInputType_withSeconds: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbDateTimePickerComponent<any>, 'nb-date-timepicker', never, { step: { alias: 'step'; required: false }; title: { alias: 'title'; required: false }; applyButtonText: { alias: 'applyButtonText'; required: false }; currentTimeButtonText: { alias: 'currentTimeButtonText'; required: false; }; showCurrentTimeButton: { alias: 'showCurrentTimeButton'; required: false; }; twelveHoursFormat: { alias: 'twelveHoursFormat'; required: false }; showAmPmLabel: { alias: 'showAmPmLabel'; required: false }; withSeconds: { alias: 'withSeconds'; required: false }; singleColumn: { alias: 'singleColumn'; required: false }; }, { dateTimeChange: 'dateTimeChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbDateTimePickerComponent<any>, [null, null, null, null, null, null, { optional: true }, null]>;
property pickerClass
protected pickerClass: Type<NbCalendarWithTimeComponent<D>>;
property pickerValueChange
readonly pickerValueChange: Observable<any>;
property showAmPmLabel
showAmPmLabel: boolean;
Defines should show am/pm label if twelveHoursFormat enabled.
property showCurrentTimeButton
showCurrentTimeButton: boolean;
property singleColumn
singleColumn: boolean;
Show timepicker values in one column with 60 minutes step by default.
property step
step: number;
Defines minutes step when we use fill time format. If set to 20, it will be: '12:00, 12:20: 12:40, 13:00...'
property title
title: string;
property twelveHoursFormat
twelveHoursFormat: boolean;
Defines 12 hours format like '07:00 PM'.
property value
value: any;
property withSeconds
withSeconds: boolean;
Show seconds in timepicker. Ignored when singleColumn is true.
method buildTimeFormat
protected buildTimeFormat: () => string;
method ngOnInit
ngOnInit: () => void;
method patchWithInputs
protected patchWithInputs: () => void;
method writeQueue
protected writeQueue: () => void;
class NbDialogConfig
class NbDialogConfig<D = any> {}
Describes all available options that may be passed to the NbDialogService.
constructor
constructor(config: Partial<NbDialogConfig<any>>);
property autoFocus
autoFocus: boolean;
Focuses dialog automatically after open if true.
property backdropClass
backdropClass: string;
Class that'll be assigned to the backdrop element.
property closeOnBackdropClick
closeOnBackdropClick: boolean;
If true then mouse clicks by backdrop will close a dialog.
property closeOnEsc
closeOnEsc: boolean;
If true then escape press will close a dialog.
property context
context: {};
property dialogClass
dialogClass: string;
Class that'll be assigned to the dialog overlay.
property hasBackdrop
hasBackdrop: boolean;
If true than overlay will render backdrop under a dialog.
property hasScroll
hasScroll: boolean;
Disables scroll on content under dialog if true and does nothing otherwise.
property viewContainerRef
viewContainerRef: ViewContainerRef;
Where the attached component should live in Angular's *logical* component tree. This affects what is available for injection and the change detection order for the component instantiated inside of the dialog. This does not affect where the dialog content will be rendered.
class NbDialogContainerComponent
class NbDialogContainerComponent implements OnInit, OnDestroy {}
Container component for each dialog. All the dialogs will be attached to it. // TODO add animations
constructor
constructor( config: NbDialogConfig<any>, elementRef: ElementRef, focusTrapFactory: NbFocusTrapFactoryService);
property config
protected config: NbDialogConfig<any>;
property elementRef
protected elementRef: ElementRef;
property focusTrap
protected focusTrap: NbFocusTrap;
property focusTrapFactory
protected focusTrapFactory: NbFocusTrapFactoryService;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbDialogContainerComponent, 'nb-dialog-container', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDialogContainerComponent, never>;
property portalOutlet
portalOutlet: NbPortalOutletDirective;
method attachComponentPortal
attachComponentPortal: <T>(portal: NbComponentPortal<T>) => ComponentRef<T>;
method attachTemplatePortal
attachTemplatePortal: <C>(portal: NbTemplatePortal<C>) => EmbeddedViewRef<C>;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
class NbDialogModule
class NbDialogModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDialogModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbDialogModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbDialogModule, [typeof i1.NbDialogContainerComponent], [typeof i2.NbSharedModule, typeof i3.NbOverlayModule], never>;
method forChild
static forChild: ( dialogConfig?: Partial<NbDialogConfig>) => ModuleWithProviders<NbDialogModule>;
method forRoot
static forRoot: ( dialogConfig?: Partial<NbDialogConfig>) => ModuleWithProviders<NbDialogModule>;
class NbDialogRef
class NbDialogRef<T> {}
The
NbDialogRef
helps to manipulate dialog after it was created. The dialog can be dismissed by usingclose
method of the dialogRef. You can access rendered component ascontent
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 returnNbDialogRef
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.tsconstructor(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 withonClose
stream ofNbDialogRef
.@stacked-example(Result, dialog/dialog-result.component)
### Configuration
As we mentioned above,
open
method of theNbDialogService
may receive optional configuration options. Also, you can provide global dialogs configuration throughNbDialogModule.forRoot({ ... })
.This config may contain the following:
context
- both, template and component may receive data throughconfig.context
property. For components, this data will be assigned through inputs. For templates, you can access it inside template as $implicit.this.dialogService.open(template, { context: 'pass data in template' });<ng-template let-some-additional-data>{{ some-additional-data }}<ng-template/>hasBackdrop
- determines is service have to render backdrop under the dialog. Default is true. @stacked-example(Backdrop, dialog/dialog-has-backdrop.component)closeOnBackdropClick
- close dialog on backdrop click if true. Default is true. @stacked-example(Backdrop click, dialog/dialog-backdrop-click.component)closeOnEsc
- close dialog on escape button on the keyboard. Default is true. @stacked-example(Escape hit, dialog/dialog-esc.component)hasScroll
- Disables scroll on content under dialog if true and does nothing otherwise. Default is false. Please, open dialogs in the separate window and try to scroll. @stacked-example(Scroll, dialog/dialog-scroll.component)autoFocus
- Focuses dialog automatically after open if true. It's useful to prevent misclicks on trigger elements and opening multiple dialogs. Default is true.As you can see, if you open dialog with auto focus dialog will focus first focusable element or just blur previously focused automatically. Otherwise, without auto focus, the focus will stay on the previously focused element. Please, open dialogs in the separate window and try to click on the button without focus and then hit space any times. Multiple same dialogs will be opened. @stacked-example(Auto focus, dialog/dialog-auto-focus.component)
constructor
constructor( document: any, globalConfig: any, positionBuilder: NbPositionBuilderService, overlay: NbOverlayService, injector: Injector, cfr: ComponentFactoryResolver);
property cfr
protected cfr: ComponentFactoryResolver;
property document
protected document: any;
property globalConfig
protected globalConfig: any;
property injector
protected injector: Injector;
property overlay
protected overlay: NbOverlayService;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDialogService, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbDialogService>;
property positionBuilder
protected positionBuilder: NbPositionBuilderService;
method createComponentPortal
protected createComponentPortal: <T>( config: NbDialogConfig, content: Type<T>, dialogRef: NbDialogRef<T>) => NbComponentPortal;
We're creating portal with custom injector provided through config or using global injector. This approach provides us capability inject
NbDialogRef
in dialog component.
method createContainer
protected createContainer: ( config: NbDialogConfig, overlayRef: OverlayRef) => NbDialogContainerComponent;
method createContent
protected createContent: <T>( config: NbDialogConfig, content: Type<T> | TemplateRef<T>, container: NbDialogContainerComponent, dialogRef: NbDialogRef<T>) => void;
method createInjector
protected createInjector: (config: NbDialogConfig) => Injector;
method createOverlay
protected createOverlay: (config: NbDialogConfig) => OverlayRef;
method createPositionStrategy
protected createPositionStrategy: () => NbGlobalPositionStrategy;
method createScrollStrategy
protected createScrollStrategy: (hasScroll: boolean) => ScrollStrategy;
method createTemplatePortal
protected createTemplatePortal: <T>( config: NbDialogConfig, content: TemplateRef<T>, dialogRef: NbDialogRef<T>) => NbTemplatePortal;
method open
open: <T>( content: Type<T> | TemplateRef<T>, userConfig?: Partial<NbDialogConfig<Partial<T> | string>>) => NbDialogRef<T>;
Opens new instance of the dialog, may receive optional config.
method registerCloseListeners
protected registerCloseListeners: <T>( config: NbDialogConfig, overlayRef: OverlayRef, dialogRef: NbDialogRef<T>) => void;
class NbDirectionality
class NbDirectionality extends Directionality {}
class NbDynamicOverlay
class NbDynamicOverlay {}
constructor
constructor( overlay: NbOverlayService, componentFactoryResolver: ComponentFactoryResolver, zone: NgZone, overlayContainer: NbOverlayContainer);
property componentFactoryResolver
protected componentFactoryResolver: ComponentFactoryResolver;
property componentType
protected componentType: Type<NbRenderableContainer>;
property container
protected container: ComponentRef<NbRenderableContainer>;
property content
protected content: any;
property context
protected context: Object;
property destroy$
protected destroy$: Subject<void>;
property disabled
protected disabled: boolean;
property isAttached
readonly isAttached: boolean;
property isShown
readonly isShown: Observable<boolean>;
property isShown$
protected isShown$: BehaviorSubject<boolean>;
property lastAppliedPosition
protected lastAppliedPosition: NbPosition;
property overlay
protected overlay: NbOverlayService;
property overlayConfig
protected overlayConfig: OverlayConfig;
property overlayContainer
protected overlayContainer: NbOverlayContainer;
property overlayDestroy$
protected overlayDestroy$: Subject<any>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDynamicOverlay, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbDynamicOverlay>;
property positionStrategy
protected positionStrategy: NbAdjustableConnectedPositionStrategy;
property positionStrategyChange$
protected positionStrategyChange$: Subject<void>;
property ref
protected ref: OverlayRef;
property zone
protected zone: NgZone;
method create
create: ( componentType: Type<NbRenderableContainer>, content: NbOverlayContent, context: Object, positionStrategy: NbAdjustableConnectedPositionStrategy, overlayConfig?: OverlayConfig, disabled?: boolean) => this;
method createContainerContext
protected createContainerContext: () => Object;
method createOverlay
protected createOverlay: () => void;
method dispose
dispose: () => void;
method disposeOverlayRef
protected disposeOverlayRef: () => void;
method getContainer
getContainer: () => ComponentRef<NbRenderableContainer>;
method hasOverlayInContainer
protected hasOverlayInContainer: () => boolean;
method hide
hide: () => void;
method renderContainer
protected renderContainer: () => void;
method setComponent
setComponent: (componentType: Type<NbRenderableContainer>) => void;
method setContent
setContent: (content: NbOverlayContent) => void;
method setContentAndContext
setContentAndContext: (content: NbOverlayContent, context: Object) => void;
method setContext
setContext: (context: Object) => void;
method setDisabled
setDisabled: (disabled: boolean) => void;
method setOverlayConfig
setOverlayConfig: (overlayConfig: OverlayConfig) => void;
method setPositionStrategy
setPositionStrategy: ( positionStrategy: NbAdjustableConnectedPositionStrategy) => void;
method show
show: () => any;
method toggle
toggle: () => void;
method updateContext
protected updateContext: () => void;
method updatePosition
protected updatePosition: () => void;
method updatePositionWhenStable
protected updatePositionWhenStable: (overlay: OverlayRef) => void;
Dimensions of the container may change after content update. So we listen to zone.stable event to reposition the container.
class NbDynamicOverlayChange
class NbDynamicOverlayChange extends SimpleChange {}
constructor
constructor(previousValue: any, currentValue: any, firstChange?: boolean);
method isChanged
isChanged: () => boolean;
class NbDynamicOverlayHandler
class NbDynamicOverlayHandler {}
constructor
constructor( positionBuilder: NbPositionBuilderService, triggerStrategyBuilder: NbTriggerStrategyBuilderService, dynamicOverlayService: NbDynamicOverlay, directionService: NbLayoutDirectionService);
property changes
protected changes: { [key: string]: NbDynamicOverlayChange };
property destroy$
protected destroy$: Subject<void>;
property dynamicOverlay
protected dynamicOverlay: NbDynamicOverlay;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbDynamicOverlayHandler, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbDynamicOverlayHandler>;
property positionStrategy
protected positionStrategy: NbAdjustableConnectedPositionStrategy;
property triggerStrategy
protected triggerStrategy: NbTriggerStrategy;
method adjustment
adjustment: (adjustment: NbAdjustment) => this;
method build
build: () => NbDynamicOverlay;
method clearChanges
protected clearChanges: () => void;
method componentType
componentType: (componentType: Type<NbRenderableContainer>) => this;
method connect
connect: () => void;
method content
content: (content: NbOverlayContent) => this;
method context
context: (context: {}) => this;
method createPositionStrategy
protected createPositionStrategy: () => NbAdjustableConnectedPositionStrategy;
method destroy
destroy: () => void;
method disabled
disabled: (disabled: boolean) => this;
method disconnect
disconnect: () => void;
method host
host: (host: ElementRef) => this;
method isAdjustmentUpdated
protected isAdjustmentUpdated: () => boolean;
method isComponentTypeUpdated
protected isComponentTypeUpdated: () => boolean;
method isComponentTypeUpdateRequired
protected isComponentTypeUpdateRequired: () => boolean;
method isContainerRerenderRequired
protected isContainerRerenderRequired: () => boolean;
method isContentUpdated
protected isContentUpdated: () => boolean;
method isContextUpdated
protected isContextUpdated: () => boolean;
method isDisabledUpdated
protected isDisabledUpdated: () => boolean;
method isHostUpdated
protected isHostUpdated: () => boolean;
method isOffsetUpdated
protected isOffsetUpdated: () => boolean;
method isOverlayConfigUpdated
protected isOverlayConfigUpdated: () => boolean;
method isPositionStrategyUpdateRequired
protected isPositionStrategyUpdateRequired: () => boolean;
method isPositionUpdated
protected isPositionUpdated: () => boolean;
method isTriggerStrategyUpdateRequired
protected isTriggerStrategyUpdateRequired: () => boolean;
method isTriggerUpdated
protected isTriggerUpdated: () => boolean;
method offset
offset: (offset: number) => this;
method overlayConfig
overlayConfig: (overlayConfig: OverlayConfig) => this;
method position
position: (position: NbPosition) => this;
method rebuild
rebuild: () => NbDynamicOverlay;
method subscribeOnDirectionChange
protected subscribeOnDirectionChange: () => void;
method subscribeOnTriggers
protected subscribeOnTriggers: (dynamicOverlay: NbDynamicOverlay) => void;
method trigger
trigger: (trigger: NbTrigger) => this;
class NbFilterDirective
class NbFilterDirective {}
property filterable
filterable: NbFilterable;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbFilterDirective, '[nbFilter]', never, { filterable: { alias: 'nbFilter'; required: false } }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbFilterDirective, never>;
method filter
filter: (filterRequest: string) => void;
class NbFilterInputDirective
class NbFilterInputDirective extends NbFilterDirective implements OnInit, OnDestroy {}
Helper directive to trigger data source's filter method when user types in input
property debounceTime
debounceTime: number;
Debounce time before triggering filter method. Set in milliseconds. Default 200.
property filterable
filterable: NbFilterable;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbFilterInputDirective, '[nbFilterInput]', never, { filterable: { alias: 'nbFilterInput'; required: false }; debounceTime: { alias: 'debounceTime'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbFilterInputDirective, never>;
method filter
filter: (event: any) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
class NbFlexibleConnectedPositionStrategy
class NbFlexibleConnectedPositionStrategy extends FlexibleConnectedPositionStrategy {}
class NbFlipCardComponent
class NbFlipCardComponent {}
Flip card example: @stacked-example(Showcase, flip-card/flip-card-showcase.component)
As a content Flip card accepts two instances of
nb-card
- for front and back sides.Basic flip card configuration:
<nb-flip-card><nb-card-front><nb-card><nb-card-body>Front</nb-card-body></nb-card></nb-card-front><nb-card-back><nb-card><nb-card-body>Back</nb-card-body></nb-card></nb-card-back></nb-flip-card>### Installation
Import
NbCardModule
to your feature module.@NgModule({imports: [// ...NbCardModule,],})export class PageModule { }### Usage
Flip Card with header and footer: @stacked-example(With Header & Footer, flip-card/flip-card-full.component.ts)
Colored flip-cards could be simply configured by providing a
status
property: @stacked-example(Colored Card, flip-card/flip-card-colors.component)It is also possible to assign an
accent
property for a slight card highlight as well as combine it withstatus
: @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 {}
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.
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.
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 {}
class NbFormFieldComponent
class NbFormFieldComponent implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {}
constructor
constructor( cd: ChangeDetectorRef, zone: NgZone, elementRef: ElementRef, renderer: Renderer2);
property cd
protected cd: ChangeDetectorRef;
property destroy$
protected readonly destroy$: Subject<void>;
property elementRef
protected elementRef: ElementRef;
property formControl
formControl: NbFormFieldControl;
property formControlConfig
formControlConfig: NbFormFieldControlConfig;
property formControlState$
protected formControlState$: ReplaySubject<NbFormControlState>;
property formFieldClasses
formFieldClasses: any;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbFormFieldComponent, 'nb-form-field', never, {}, {}, ['formControl', 'formControlConfig', 'prefix', 'suffix'], ['[nbPrefix]', '*', '[nbSuffix]'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldComponent, never>;
property prefix
prefix: QueryList<NbPrefixDirective>;
property prefixClasses$
prefixClasses$: Observable<string[]>;
property renderer
protected renderer: Renderer2;
property suffix
suffix: QueryList<NbSuffixDirective>;
property suffixClasses$
suffixClasses$: Observable<string[]>;
property zone
protected zone: NgZone;
method getAddonClasses
protected getAddonClasses: ( addon: NbFormControlAddon, state: NbFormControlState) => string[];
method getFormControlConfig
protected getFormControlConfig: () => NbFormFieldControlConfig;
method isStatesEqual
protected isStatesEqual: ( oldState: NbFormControlState, state: NbFormControlState) => boolean;
method ngAfterContentChecked
ngAfterContentChecked: () => void;
method ngAfterContentInit
ngAfterContentInit: () => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method shouldShowPrefix
shouldShowPrefix: () => boolean;
method shouldShowSuffix
shouldShowSuffix: () => boolean;
method subscribeToAddonChange
protected subscribeToAddonChange: () => void;
method subscribeToFormControlStateChange
protected subscribeToFormControlStateChange: () => void;
class NbFormFieldControl
abstract class NbFormFieldControl {}
property disabled$
disabled$: Observable<boolean>;
property focused$
focused$: Observable<boolean>;
property fullWidth$
fullWidth$: Observable<boolean>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldControl, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbFormFieldControl>;
property size$
size$: Observable<NbComponentSize>;
property status$
status$: Observable<string>;
class NbFormFieldControlConfig
class NbFormFieldControlConfig {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldControlConfig, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbFormFieldControlConfig>;
property supportsPrefix
supportsPrefix: boolean;
property supportsSuffix
supportsSuffix: boolean;
class NbFormFieldModule
class NbFormFieldModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbFormFieldModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbFormFieldModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbFormFieldModule, [ typeof i1.NbFormFieldComponent, typeof i2.NbPrefixDirective, typeof i3.NbSuffixDirective ], [any], [ typeof i1.NbFormFieldComponent, typeof i2.NbPrefixDirective, typeof i3.NbSuffixDirective ]>;
class NbGlobalPositionStrategy
class NbGlobalPositionStrategy extends GlobalPositionStrategy {}
method position
position: (position: NbGlobalLogicalPosition) => this;
class NbHeaderCellDefDirective
class NbHeaderCellDefDirective extends CdkHeaderCellDef {}
Header cell definition for the nb-table. Captures the template of a column's header cell and as well as cell-specific properties.
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.
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 {}
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.
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.
class NbIconComponent
class NbIconComponent implements NbIconConfig, OnChanges, OnInit {}
Icon component. Allows to render both
svg
andfont
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-iconsThis command will install Eva Icons pack. Then register
NbEvaIconsModule
into your app module:import { NbEvaIconsModule } from '@nebular/eva-icons';@NgModule({imports: [// ...NbEvaIconsModule,],})export class AppModule { }Last thing, import
NbIconModule
to your feature module where you need to show an icon:import { NbIconModule } from '@nebular/theme';@NgModule({imports: [// ...NbIconModule,],})export class PageModule { }### Usage
Icon can be colored using
status
input:<nb-icon icon="star" status="warning"></nb-icon>Colored icons: @stacked-example(Colored Icons, icon/icon-colors.component)
In case you need to specify an icon from a specific icon pack, this could be done using
pack
input property:<nb-icon icon="star" pack="font-awesome"></nb-icon>Additional icon settings (if available by the icon pack) could be passed using
options
input:<nb-icon icon="star" [options]="{ animation: { type: 'zoom' } }"></nb-icon>icon-font-size: icon-line-height: icon-width: icon-height: icon-svg-vertical-align: icon-basic-color: icon-primary-color: icon-info-color: icon-success-color: icon-warning-color: icon-danger-color: icon-control-color:
constructor
constructor( sanitizer: DomSanitizer, iconLibrary: NbIconLibraries, el: ElementRef, renderer: Renderer2, statusService: NbStatusService);
property additionalClasses
readonly additionalClasses: string[];
property basic
readonly basic: boolean;
property config
config: string | NbIconConfig;
Sets all icon configurable properties via config object. If passed value is a string set icon name. @docs-private
property control
readonly control: boolean;
property danger
readonly danger: boolean;
property el
protected el: ElementRef;
property html
html: SafeHtml;
property icon
icon: string;
Icon name
Parameter status
property iconDef
protected iconDef: any;
property iconLibrary
protected iconLibrary: NbIconLibraries;
property info
readonly info: boolean;
property options
options: { [name: string]: any };
Additional icon settings
Parameter
{[name: string]: any}
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbIconComponent, 'nb-icon', never, { icon: { alias: 'icon'; required: false }; pack: { alias: 'pack'; required: false }; options: { alias: 'options'; required: false }; status: { alias: 'status'; required: false }; config: { alias: 'config'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbIconComponent, never>;
property pack
pack: string;
Icon pack name
Parameter status
property prevClasses
protected prevClasses: any[];
property primary
readonly primary: boolean;
property renderer
protected renderer: Renderer2;
property sanitizer
protected sanitizer: DomSanitizer;
property status
status?: string;
Icon status (adds specific styles):
basic
,primary
,info
,success
,warning
,danger
,control
property statusService
protected statusService: NbStatusService;
property success
readonly success: boolean;
property warning
readonly warning: boolean;
method assignClasses
protected assignClasses: (classes: string[]) => void;
method clearIcon
protected clearIcon: () => void;
method ngOnChanges
ngOnChanges: () => void;
method ngOnInit
ngOnInit: () => void;
method renderIcon
renderIcon: ( name: string, pack?: string, options?: { [name: string]: any }) => import('./icon-libraries').NbIconDefinition;
class NbIconDefinition
class NbIconDefinition {}
class NbIconLibraries
class NbIconLibraries {}
This service allows to register multiple icon packs to use them later within
<nb-icon></nb-icon>
component.
property defaultPack
protected defaultPack: NbIconPack;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbIconLibraries, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbIconLibraries>;
property packs
protected packs: Map<string, NbIconPack>;
method createFontIcon
protected createFontIcon: ( name: string, content: NbIcon | string, params: NbFontIconPackParams) => NbFontIcon;
method createSvgIcon
protected createSvgIcon: ( name: string, content: NbIcon | string, params: NbIconPackParams) => NbSvgIcon;
method getDefaultPackOrThrow
protected getDefaultPackOrThrow: () => NbIconPack;
method getFontIcon
getFontIcon: (name: string, pack?: string) => NbIconDefinition;
Returns Font icon
Parameter name
Parameter pack
Returns
NbIconDefinition
method getIcon
getIcon: (name: string, pack?: string) => NbIconDefinition | null;
Returns an icon
Parameter name
Parameter pack
Returns
NbIconDefinition
method getIconFromPack
protected getIconFromPack: ( name: string, pack: NbIconPack) => NbIcon | string | null;
method getPack
getPack: (name: string) => NbIconPack;
Returns pack by name
Parameter name
method getPackOrThrow
protected getPackOrThrow: (name: string) => NbIconPack;
method getSvgIcon
getSvgIcon: (name: string, pack?: string) => NbIconDefinition | null;
Returns Svg icon
Parameter name
Parameter pack
Returns
NbIconDefinition
method registerFontPack
registerFontPack: (name: string, params?: NbFontIconPackParams) => void;
Registers new font pack
Parameter name
Parameter params
method registerSvgPack
registerSvgPack: ( name: string, icons: NbIcons, params?: NbIconPackParams) => void;
Registers new Svg icon pack
Parameter name
Parameter icons
Parameter params
method setDefaultPack
setDefaultPack: (name: string) => void;
Sets pack as a default
Parameter name
class NbIconModule
class NbIconModule {}
constructor
constructor(iconsLibrary: NbIconLibraries);
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbIconModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbIconModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbIconModule, [typeof i1.NbIconComponent], [any], [typeof i1.NbIconComponent]>;
class NbInfiniteListDirective
class NbInfiniteListDirective implements AfterViewInit, OnDestroy {}
Infinite List Directive
<nb-list nbInfiniteList [threshold]="500" (bottomThreshold)="loadNext()"><nb-list-item *ngFor="let item of items"></nb-list-item></nb-list>@stacked-example(Simple infinite list, infinite-list/infinite-list-showcase.component)
Directive will notify when list scrolled up or down to a given threshold. By default it listen to scroll of list on which applied, but also can be set to listen to window scroll.
@stacked-example(Scroll modes, infinite-list/infinite-list-scroll-modes.component)
To improve UX of infinite lists, it's better to keep current page in url, so user able to return to the last viewed page or to share a link to this page.
nbListPageTracker
directive will help you to know, what page user currently viewing. Just put it on a list, set page size and it will calculate page that currently in viewport. You can [open the example](example/infinite-list/infinite-news-list.component) in a new tab to check out this feature.@stacked-example(Infinite list with pager, infinite-list/infinite-news-list.component)
@stacked-example(Infinite list with placeholders at the top, infinite-list/infinite-list-placeholders.component)
constructor
constructor( elementRef: ElementRef, scrollService: NbLayoutScrollService, dimensionsService: NbLayoutRulerService);
property bottomThreshold
bottomThreshold: EventEmitter<any>;
Emits when distance between list bottom and current scroll position is less than threshold.
property listItems
listItems: QueryList<NbListItemComponent>;
property ngAcceptInputType_listenWindowScroll
static ngAcceptInputType_listenWindowScroll: NbBooleanInput;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbInfiniteListDirective, '[nbInfiniteList]', never, { threshold: { alias: 'threshold'; required: false }; throttleTime: { alias: 'throttleTime'; required: false }; listenWindowScroll: { alias: 'listenWindowScroll'; required: false }; }, { bottomThreshold: 'bottomThreshold'; topThreshold: 'topThreshold' }, ['listItems'], never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbInfiniteListDirective, never>;
property threshold
threshold: number;
Threshold after which event load more event will be emited. In pixels.
property throttleTime
throttleTime: number;
property topThreshold
topThreshold: EventEmitter<any>;
Emits when distance between list top and current scroll position is less than threshold.
property windowScroll
windowScroll: boolean;
method checkPosition
checkPosition: ({ scrollHeight, scrollTop, clientHeight,}: NbScrollableContainerDimensions) => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method onElementScroll
onElementScroll: () => void;
class NbInputDirective
class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewInit, OnDestroy, NbFormFieldControl {}
Basic input directive.
<input nbInput></input>### Installation
Import
NbInputModule
to your feature module.@NgModule({imports: [// ...NbInputModule,],})export class PageModule { }### Usage
Default input size is
medium
: @stacked-example(Showcase, input/input-showcase.component)Inputs are available in multiple colors using
status
property: @stacked-example(Input Colors, input/input-colors.component)There are three input sizes:
@stacked-example(Input Sizes, input/input-sizes.component)
Inputs available in different shapes, which could be combined with the other properties: @stacked-example(Input Shapes, input/input-shapes.component)
nbInput
could be applied to the following selectors -input
,textarea
: @stacked-example(Input Elements, input/input-types.component)You can add
fullWidth
attribute to make element fill container: @stacked-example(Full width inputs, input/input-full-width.component)Or you can bind control with form controls or ngModel: @stacked-example(Input form binding, input/input-form.component)
Use
<nb-form-field>
to add custom content to the input field. First importNbFormFieldModule
. Then put the input field and custom content into<nb-form-field>
and addnbPrefix
ornbSuffix
directive to the custom content.nbPrefix
puts content before input andnbSuffix
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 {}
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
andclipped
headers adding creating a sub-header for your app:@stacked-example(Subheader, layout/layout-subheader.component)
header-background-color: header-text-color: header-text-font-family: header-text-font-size: header-text-font-weight: header-text-line-height: header-height: header-padding: header-shadow:
constructor
constructor(layout: NbLayoutComponent);
property fixedValue
fixedValue: boolean;
property ngAcceptInputType_fixed
static ngAcceptInputType_fixed: NbBooleanInput;
property ngAcceptInputType_subheader
static ngAcceptInputType_subheader: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbLayoutHeaderComponent, 'nb-layout-header', never, { fixed: { alias: 'fixed'; required: false }; subheader: { alias: 'subheader'; required: false }; }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutHeaderComponent, never>;
property subheaderValue
subheaderValue: boolean;
class NbLayoutModule
class NbLayoutModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbLayoutModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbLayoutModule, [ typeof i1.NbLayoutComponent, typeof i1.NbLayoutColumnComponent, typeof i1.NbLayoutFooterComponent, typeof i1.NbLayoutHeaderComponent, typeof i2.NbLtrDirective, typeof i2.NbRtlDirective ], [typeof i3.NbSharedModule], [ typeof i1.NbLayoutComponent, typeof i1.NbLayoutColumnComponent, typeof i1.NbLayoutFooterComponent, typeof i1.NbLayoutHeaderComponent, typeof i2.NbLtrDirective, typeof i2.NbRtlDirective ]>;
class NbLayoutRulerService
class NbLayoutRulerService {}
Simple helper service to return Layout dimensions Depending of current Layout scroll mode (default or
withScroll
when scroll is moved to an element inside of the layout) corresponding dimensions will be returns - ofdocumentElement
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 thenb-layout
component
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbLayoutScrollService, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbLayoutScrollService>;
method fireScrollChange
fireScrollChange: (event: any) => void;
Parameter event
method getPosition
getPosition: () => Observable<NbScrollPosition>;
Returns scroll position
Returns
{Observable}
method onGetPosition
onGetPosition: () => Subject<any>;
Returns
{Subject}
method onManualScroll
onManualScroll: () => Observable<NbScrollPosition>;
Returns
Observable.
method onScroll
onScroll: () => Observable<any>;
Returns a stream of scroll events
Returns
{Observable}
method onScrollableChange
onScrollableChange: () => Observable<boolean>;
method scrollable
scrollable: (scrollable: boolean) => void;
method scrollTo
scrollTo: (x?: number, y?: number) => void;
Sets scroll position
Parameter x
Parameter y
class NbListComponent
class NbListComponent {}
List is a container component that wraps
nb-list-item
component.Basic example: @stacked-example(Simple list, list/simple-list-showcase.component)
nb-list-item
accepts arbitrary content, so you can create a list of any components.### Installation
Import
NbListModule
to your feature module.@NgModule({imports: [// ...NbListModule,],})export class PageModule { }### Usage
List of users: @stacked-example(Users list, list/users-list-showcase.component)
list-item-divider-color: list-item-divider-style: list-item-divider-width: list-item-padding: list-item-text-color: list-item-font-family: list-item-font-size: list-item-font-weight: list-item-line-height:
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbListComponent, 'nb-list', never, { role: { alias: 'role'; required: false } }, {}, never, ['nb-list-item'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbListComponent, never>;
property role
role: string;
Role attribute value
{string}
class NbListItemComponent
class NbListItemComponent {}
List item component is a grouping component that accepts arbitrary content. It should be direct child of
nb-list
componet.
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbListItemComponent, 'nb-list-item', never, { role: { alias: 'role'; required: false } }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbListItemComponent, never>;
property role
role: string;
Role attribute value
{string}
class NbListModule
class NbListModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbListModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbListModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbListModule, [ typeof i1.NbListComponent, typeof i1.NbListItemComponent, typeof i2.NbListPageTrackerDirective, typeof i3.NbInfiniteListDirective ], never, [ typeof i1.NbListComponent, typeof i1.NbListItemComponent, typeof i2.NbListPageTrackerDirective, typeof i3.NbInfiniteListDirective ]>;
class NbListPageTrackerDirective
class NbListPageTrackerDirective implements AfterViewInit, OnDestroy {}
List pager directive
Directive allows you to determine page of currently viewing items.
constructor
constructor();
property listItems
listItems: QueryList<ElementRef>;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbListPageTrackerDirective, '[nbListPageTracker]', never, { pageSize: { alias: 'pageSize'; required: false }; startPage: { alias: 'startPage'; required: false }; }, { pageChange: 'pageChange' }, ['listItems'], never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbListPageTrackerDirective, never>;
property pageChange
pageChange: EventEmitter<number>;
Emits when another page become visible.
property pageSize
pageSize: number;
Items per page.
property startPage
startPage: number;
Page to start counting with.
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
class NbLtrDirective
class NbLtrDirective extends NbBaseLayoutDirectionDirective {}
Apply
nbLtr
directive to the element you need to show only when layout direction isLTR
.<div *nbLtr>This text is visible only when layout direction is LTR</div>
constructor
constructor( templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, cd: ChangeDetectorRef, directionService: NbLayoutDirectionService);
property cd
protected cd: ChangeDetectorRef;
property directionService
protected directionService: NbLayoutDirectionService;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbLtrDirective, '[nbLtr]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbLtrDirective, never>;
property templateRef
protected templateRef: TemplateRef<any>;
property viewContainer
protected viewContainer: ViewContainerRef;
class NbMediaBreakpointsService
class NbMediaBreakpointsService {}
Manages media breakpoints
Provides access to available media breakpoints to convert window width to a configured breakpoint, e.g. 200px - *xs* breakpoint
constructor
constructor(breakpoints: any);
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbMediaBreakpointsService, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbMediaBreakpointsService>;
method getBreakpoints
getBreakpoints: () => NbMediaBreakpoint[];
Returns a list of configured breakpoints for the theme
Returns
NbMediaBreakpoint[]
method getBreakpointsMap
getBreakpointsMap: () => { [breakpoint: string]: number };
Returns a map of configured breakpoints for the theme
Returns
{[p: string]: number}
method getByName
getByName: (name: string) => NbMediaBreakpoint;
Returns a configured breakpoint by name
Parameter name
string
Returns
NbMediaBreakpoint
method getByWidth
getByWidth: (width: number) => NbMediaBreakpoint;
Returns a configured breakpoint by width
Parameter width
number
Returns
{Z|{name: string, width: number}}
class NbMenuComponent
class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {}
Vertical menu component.
Accepts a list of menu items and renders them accordingly. Supports multi-level menus.
Basic example @stacked-example(Showcase, menu/menu-showcase.component)
// ...items: NbMenuItem[] = [{title: home,link: '/'},{title: dashboard,link: 'dashboard'}];// ...<nb-menu [items]="items"></nb-menu>### Installation
Import
NbMenuModule.forRoot()
to your app module.@NgModule({imports: [// ...NbMenuModule.forRoot(),],})export class AppModule { }and
NbMenuModule
to your feature module where the component should be shown:@NgModule({imports: [// ...NbMenuModule,],})export class PageModule { }### Usage
Two-level menu example @stacked-example(Two Levels, menu/menu-children.component)
Autocollapse menu example @stacked-example(Autocollapse Menu, menu/menu-autocollapse.component)
Menu badge @stacked-example(Menu item badge, menu/menu-badge.component)
menu-background-color: menu-text-color: menu-text-font-family: menu-text-font-size: menu-text-font-weight: menu-text-line-height: menu-group-text-color: menu-item-border-radius: menu-item-padding: menu-item-hover-background-color: menu-item-hover-cursor: menu-item-hover-text-color: menu-item-icon-hover-color: menu-item-active-background-color: menu-item-active-text-color: menu-item-icon-active-color: menu-item-icon-color: menu-item-icon-margin: menu-item-icon-width: menu-item-divider-color: menu-item-divider-style: menu-item-divider-width: menu-submenu-background-color: menu-submenu-text-color: menu-submenu-margin: menu-submenu-padding: menu-submenu-item-border-color: menu-submenu-item-border-style: menu-submenu-item-border-width: menu-submenu-item-border-radius: menu-submenu-item-padding: menu-submenu-item-hover-background-color: menu-submenu-item-hover-border-color: menu-submenu-item-hover-text-color: menu-submenu-item-icon-hover-color: menu-submenu-item-active-background-color: menu-submenu-item-active-border-color: menu-submenu-item-active-text-color: menu-submenu-item-icon-active-color: menu-submenu-item-active-hover-background-color: menu-submenu-item-active-hover-border-color: menu-submenu-item-active-hover-text-color: menu-submenu-item-icon-active-hover-color:
constructor
constructor( window: any, platformId: any, menuInternalService: NbMenuInternalService, router: Router);
property autoCollapse
autoCollapse: boolean;
Collapse all opened submenus on the toggle event Default value is "false" boolean
property destroy$
protected destroy$: Subject<void>;
property items
items: NbMenuItem[];
List of menu items. List | List | any
property menuInternalService
protected menuInternalService: NbMenuInternalService;
property ngAcceptInputType_autoCollapse
static ngAcceptInputType_autoCollapse: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbMenuComponent, 'nb-menu', never, { tag: { alias: 'tag'; required: false }; items: { alias: 'items'; required: false }; autoCollapse: { alias: 'autoCollapse'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuComponent, never>;
property platformId
protected platformId: any;
property router
protected router: Router;
property tag
tag: string;
Tags a menu with some ID, can be later used in the menu service to determine which menu triggered the action, if multiple menus exist on the page.
{string}
property window
protected window: any;
method collapseAll
protected collapseAll: () => void;
method compareTag
protected compareTag: (tag: string) => boolean;
method getHomeItem
protected getHomeItem: (items: NbMenuItem[]) => NbMenuItem;
method getSelectedItem
protected getSelectedItem: (items: NbMenuItem[]) => NbMenuItem;
method navigateHome
protected navigateHome: () => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method onAddItem
onAddItem: (data: { tag: string; items: NbMenuItem[] }) => void;
method onHoverItem
onHoverItem: (item: NbMenuItem) => void;
method onItemClick
onItemClick: (item: NbMenuItem) => void;
method onSelectItem
onSelectItem: (item: NbMenuItem) => void;
method onToggleSubMenu
onToggleSubMenu: (item: NbMenuItem) => void;
class NbMenuItem
class NbMenuItem {}
Menu Item options example @stacked-example(Menu Link Parameters, menu/menu-link-params.component)
property ariaRole
ariaRole?: string;
The name of a role in the ARIA specification {string}
property badge
badge?: NbMenuBadgeConfig;
Badge component {boolean}
property children
children?: NbMenuItem[];
Children items {List}
property data
data?: any;
property expanded
expanded?: boolean;
Expanded by default {boolean}
property fragment
fragment?: string;
property group
group?: boolean;
Whether the item is just a group (non-clickable) {boolean}
property hidden
hidden?: boolean;
Hidden Item {boolean}
property home
home?: boolean;
Where this is a home item {boolean}
property icon
icon?: string | NbIconConfig;
Icon class name or icon config object {string | NbIconConfig}
property link
link?: string;
Item relative link (for routerLink) {string}
property parent
parent?: NbMenuItem;
property pathMatch
pathMatch?: 'full' | 'prefix';
Item is selected when partly or fully equal to the current url {string}
property preserveFragment
preserveFragment?: boolean;
property queryParams
queryParams?: Params;
Map of query parameters {Params}
property queryParamsHandling
queryParamsHandling?: QueryParamsHandling;
property selected
selected?: boolean;
property skipLocationChange
skipLocationChange?: boolean;
Whether the item skipLocationChange is true or false {boolean}
property target
target?: string;
HTML Link target {string}
property title
title: string;
Item Title {string}
property url
url?: string;
Item URL (absolute) {string}
method getParents
static getParents: (item: NbMenuItem) => NbMenuItem[];
Returns
item parents in top-down order
method isParent
static isParent: (item: NbMenuItem, possibleChild: NbMenuItem) => boolean;
class NbMenuItemComponent
class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {}
constructor
constructor( menuService: NbMenuService, directionService: NbLayoutDirectionService);
property badge
badge: NbMenuBadgeConfig;
property destroy$
protected destroy$: Subject<void>;
property directionService
protected directionService: NbLayoutDirectionService;
property hoverItem
hoverItem: EventEmitter<any>;
property itemClick
itemClick: EventEmitter<any>;
property menuItem
menuItem: NbMenuItem;
property menuService
protected menuService: NbMenuService;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbMenuItemComponent, '[nbMenuItem]', never, { menuItem: { alias: 'menuItem'; required: false }; badge: { alias: 'badge'; required: false }; }, { hoverItem: 'hoverItem'; toggleSubMenu: 'toggleSubMenu'; selectItem: 'selectItem'; itemClick: 'itemClick'; }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuItemComponent, never>;
property selectItem
selectItem: EventEmitter<any>;
property toggleState
toggleState: NbToggleStates;
property toggleSubMenu
toggleSubMenu: EventEmitter<any>;
method getExpandStateIcon
getExpandStateIcon: () => string;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngDoCheck
ngDoCheck: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method onHoverItem
onHoverItem: (item: NbMenuItem) => void;
method onItemClick
onItemClick: (item: NbMenuItem) => void;
method onSelectItem
onSelectItem: (item: NbMenuItem) => void;
method onToggleSubMenu
onToggleSubMenu: (item: NbMenuItem) => void;
class NbMenuModule
class NbMenuModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbMenuModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbMenuModule, [typeof i1.NbMenuComponent, typeof i1.NbMenuItemComponent], [typeof i2.NbSharedModule, typeof i3.NbIconModule, typeof i4.NbBadgeModule], [typeof i1.NbMenuComponent, typeof i1.NbMenuItemComponent]>;
method forRoot
static forRoot: () => ModuleWithProviders<NbMenuModule>;
class NbMenuService
class NbMenuService {}
Menu Service. Allows you to listen to menu events, or to interact with a menu. @stacked-example(Menu Service, menu/menu-service.component)
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbMenuService, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbMenuService>;
method addItems
addItems: (items: NbMenuItem[], tag?: string) => void;
Add items to the end of the menu items list
Parameter items
Parameter tag
method collapseAll
collapseAll: (tag?: string) => void;
Collapses all menu items
Parameter tag
method getSelectedItem
getSelectedItem: (tag?: string) => Observable<NbMenuBag>;
Returns currently selected item. Won't subscribe to the future events.
Parameter tag
Returns
{Observable<{tag: string; item: NbMenuItem}>}
method navigateHome
navigateHome: (tag?: string) => void;
Navigate to the home menu item
Parameter tag
method onItemClick
onItemClick: () => Observable<NbMenuBag>;
method onItemHover
onItemHover: () => Observable<NbMenuBag>;
method onItemSelect
onItemSelect: () => Observable<NbMenuBag>;
method onSubmenuToggle
onSubmenuToggle: () => Observable<NbMenuBag>;
class NbNativeDateService
class NbNativeDateService extends NbDateService<Date> {}
The
NbNativeDateService
is basic implementation ofNbDateService
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 {}
class NbNoopTriggerStrategy
class NbNoopTriggerStrategy extends NbTriggerStrategyBase {}
Creates empty show and hide event streams.
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 forNbOptionGroupComponent
andNbOptionComponent
list.option-list-max-height: option-list-shadow: option-list-background-color: option-list-border-style: option-list-border-width: option-list-border-color: option-list-border-radius: option-list-adjacent-border-color: option-list-adjacent-border-style: option-list-adjacent-border-width:
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbOptionListComponent<any>, 'nb-option-list', never, { size: { alias: 'size'; required: false }; position: { alias: 'position'; required: false }; }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbOptionListComponent<any>, never>;
property position
position: NbPosition;
property positionBottom
readonly positionBottom: boolean;
property positionTop
readonly positionTop: boolean;
property size
size: NbComponentSize;
property sizeGiant
readonly sizeGiant: boolean;
property sizeLarge
readonly sizeLarge: boolean;
property sizeMedium
readonly sizeMedium: boolean;
property sizeSmall
readonly sizeSmall: boolean;
property sizeTiny
readonly sizeTiny: boolean;
class NbOptionModule
class NbOptionModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbOptionModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbOptionModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbOptionModule, [ typeof i1.NbOptionListComponent, typeof i2.NbOptionComponent, typeof i3.NbOptionGroupComponent ], [any, typeof i5.NbCheckboxModule], [ typeof i1.NbOptionListComponent, typeof i2.NbOptionComponent, typeof i3.NbOptionGroupComponent ]>;
class NbOverlay
class NbOverlay extends Overlay {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlay, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlay>;
property scrollStrategies
scrollStrategies: NbScrollStrategyOptions;
class NbOverlayContainer
class NbOverlayContainer extends OverlayContainer {}
class NbOverlayContainerAdapter
class NbOverlayContainerAdapter extends NbOverlayContainer {}
Provides nb-layout as overlay container. Container has to be cleared when layout destroys. Another way previous version of the container will be used but it isn't inserted in DOM and exists in memory only. This case important only if you switch between multiple layouts.
property container
protected container: HTMLElement;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayContainerAdapter, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NbOverlayContainerAdapter>;
method checkContainer
protected checkContainer: () => void;
method clearContainer
clearContainer: () => void;
method setContainer
setContainer: (container: HTMLElement) => void;
class NbOverlayContainerComponent
class NbOverlayContainerComponent {}
constructor
constructor( vcr: ViewContainerRef, injector: Injector, changeDetectorRef: ChangeDetectorRef);
property content
content: string;
property injector
protected injector: Injector;
property isAttached
isAttached: boolean;
property isStringContent
readonly isStringContent: boolean;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbOverlayContainerComponent, 'nb-overlay-container', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayContainerComponent, never>;
property portalOutlet
portalOutlet: NbPortalOutletDirective;
property vcr
protected vcr: ViewContainerRef;
method attachComponentPortal
attachComponentPortal: <T>( portal: NbComponentPortal<T>, context?: Object) => ComponentRef<T>;
method attachStringContent
attachStringContent: (content: string) => void;
method attachTemplatePortal
attachTemplatePortal: <C>(portal: NbTemplatePortal<C>) => EmbeddedViewRef<C>;
method createChildInjector
protected createChildInjector: ( cfr: ComponentFactoryResolver) => NbPortalInjector;
method detach
detach: () => void;
class NbOverlayModule
class NbOverlayModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbOverlayModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbOverlayModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbOverlayModule, [ typeof i1.NbPositionedContainerComponent, typeof i1.NbOverlayContainerComponent ], [typeof i2.NbCdkMappingModule, typeof i3.NbSharedModule], [ typeof i2.NbCdkMappingModule, typeof i4.NbCdkAdapterModule, typeof i1.NbOverlayContainerComponent ]>;
method forRoot
static forRoot: () => ModuleWithProviders<NbOverlayModule>;
class NbOverlayPositionBuilder
class NbOverlayPositionBuilder extends OverlayPositionBuilder {}
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 {}
class NbPopoverComponent
class NbPopoverComponent extends NbPositionedContainerComponent implements NbRenderableContainer {}
Overlay container. Renders provided content inside.
popover-text-color: popover-text-font-family: popover-text-font-size: popover-text-font-weight: popover-text-line-height: popover-background-color: popover-border-width: popover-border-color: popover-border-radius: popover-shadow: popover-arrow-size: popover-padding:
property cfr
cfr: ComponentFactoryResolver;
property content
content: any;
property context
context: Object;
property overlayContainer
overlayContainer: NbOverlayContainerComponent;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbPopoverComponent, 'nb-popover', never, { content: { alias: 'content'; required: false }; context: { alias: 'context'; required: false }; cfr: { alias: 'cfr'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbPopoverComponent, never>;
method attachComponent
protected attachComponent: () => void;
method attachContent
protected attachContent: () => void;
method attachString
protected attachString: () => void;
method attachTemplate
protected attachTemplate: () => void;
method detachContent
protected detachContent: () => void;
method renderContent
renderContent: () => void;
class NbPopoverDirective
class NbPopoverDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit {}
Powerful popover directive, which provides the best UX for your users.
@stacked-example(Showcase, popover/popover-showcase.component)
Popover can accept different content such as: TemplateRef
<button [nbPopover]="templateRef"></button><ng-template #templateRef><span>Hello, Popover!</span></ng-template>### Installation
Import
NbPopoverModule
to your feature module.@NgModule({imports: [// ...NbPopoverModule,],})export class PageModule { }### Usage
Custom components
<button [nbPopover]="MyPopoverComponent"></button>Both custom components and templateRef popovers can receive *contentContext* property that will be passed to the content props.
Primitive types
<button nbPopover="Hello, Popover!"></button>Popover has different placements, such as: top, bottom, left, right, start and end which can be used as following:
@stacked-example(Placements, popover/popover-placements.component)
By default popover will try to adjust itself to maximally fit viewport and provide the best user experience. It will try to change position of the popover container. If you want to disable this behaviour set it
noop
.<button nbPopover="Hello, Popover!" nbPopoverAdjustment="noop"></button>Popover has a number of triggers which provides an ability to show and hide the component in different ways:
- Click mode shows the component when a user clicks on the host element and hides when the user clicks somewhere on the document outside the component. - Hint provides capability to show the component when the user hovers over the host element and hide when the user hovers out of the host. - Hover works like hint mode with one exception - when the user moves mouse from host element to the container element the component remains open, so that it is possible to interact with it content. - Focus mode is applied when user focuses the element. - Noop mode - the component won't react to the user interaction.
@stacked-example(Available Triggers, popover/popover-modes.component.html)
Noop mode is especially useful when you need to control Popover programmatically, for example show/hide as a result of some third-party action, like HTTP request or validation check:
@stacked-example(Manual Control, popover/popover-noop.component)
Below are examples for manual popover settings control, both via template binding and code. @stacked-example(Popover Settings, popover/popover-dynamic.component)
Please note, while manipulating Popover setting via code, you need to call
rebuild()
method to apply the settings changed. @stacked-example(Popover Settings Code, popover/popover-dynamic-code.component)@additional-example(Template Ref, popover/popover-template-ref.component) @additional-example(Custom Component, popover/popover-custom-component.component)
constructor
constructor(hostRef: ElementRef, dynamicOverlayHandler: NbDynamicOverlayHandler);
property adjustment
adjustment: NbAdjustment;
Container position will be changes automatically based on this strategy if container can't fit view port. Set this property to
noop
value if you want to disable automatically adjustment. Available values:clockwise
(default),counterclockwise
,vertical
,horizontal
,noop
.
property content
content: any;
Popover content which will be rendered in NbArrowedOverlayContainerComponent. Available content: template ref, component and any primitive.
property context
context: Object;
Container content context. Will be applied to the rendered component.
property destroy$
protected destroy$: Subject<void>;
property disabled
disabled: boolean;
Disables the display of the tooltip.
property dynamicOverlay
protected dynamicOverlay: NbDynamicOverlay;
property dynamicOverlayHandler
protected dynamicOverlayHandler: NbDynamicOverlayHandler;
property hostRef
protected hostRef: ElementRef;
property isShown
readonly isShown: boolean;
property nbPopoverShowStateChange
nbPopoverShowStateChange: EventEmitter<{ isShown: boolean }>;
property ngAcceptInputType_adjustment
static ngAcceptInputType_adjustment: NbAdjustmentValues;
property ngAcceptInputType_position
static ngAcceptInputType_position: NbPositionValues;
property ngAcceptInputType_trigger
static ngAcceptInputType_trigger: NbTriggerValues;
property offset
offset: number;
Sets popover offset
property overlayConfig
protected overlayConfig: OverlayConfig;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NbPopoverDirective, '[nbPopover]', ['nbPopover'], { content: { alias: 'nbPopover'; required: false }; context: { alias: 'nbPopoverContext'; required: false }; position: { alias: 'nbPopoverPlacement'; required: false }; adjustment: { alias: 'nbPopoverAdjustment'; required: false }; trigger: { alias: 'nbPopoverTrigger'; required: false }; offset: { alias: 'nbPopoverOffset'; required: false }; disabled: { alias: 'nbTooltipDisabled'; required: false }; popoverClass: { alias: 'nbPopoverClass'; required: false }; }, { nbPopoverShowStateChange: 'nbPopoverShowStateChange' }, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbPopoverDirective, never>;
property popoverClass
popoverClass: string;
property popoverComponent
protected popoverComponent: typeof NbPopoverComponent;
property position
position: NbPosition;
Position will be calculated relatively host element based on the position. Can be top, right, bottom, left, start or end.
property trigger
trigger: NbTrigger;
Describes when the container will be shown. Available options:
click
,hover
,hint
,focus
andnoop
method configureDynamicOverlay
protected configureDynamicOverlay: () => NbDynamicOverlayHandler;
method hide
hide: () => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnChanges
ngOnChanges: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method rebuild
rebuild: () => void;
method show
show: () => void;
method toggle
toggle: () => void;
class NbPopoverModule
class NbPopoverModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbPopoverModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbPopoverModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbPopoverModule, [typeof i1.NbPopoverDirective, typeof i2.NbPopoverComponent], [typeof i3.NbOverlayModule], [typeof i1.NbPopoverDirective]>;
class NbPortalDirective
class NbPortalDirective extends CdkPortal {}
class NbPortalInjector
class NbPortalInjector extends PortalInjector {}
class NbPortalOutletDirective
class NbPortalOutletDirective extends CdkPortalOutlet {}
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 {}
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
andbackground-color
transition: @stacked-example(Progress bar interactive, progress-bar/progress-bar-interactive.component)progress-bar-animation-duration: progress-bar-border-radius: progress-bar-text-font-family: progress-bar-tiny-height: progress-bar-tiny-text-font-size: progress-bar-tiny-text-font-weight: progress-bar-tiny-text-line-height: progress-bar-small-height: progress-bar-small-text-font-size: progress-bar-small-text-font-weight: progress-bar-small-text-line-height: progress-bar-medium-height: progress-bar-medium-text-font-size: progress-bar-medium-text-font-weight: progress-bar-medium-text-line-height: progress-bar-large-height: progress-bar-large-text-font-size: progress-bar-large-text-font-weight: progress-bar-large-text-line-height: progress-bar-giant-height: progress-bar-giant-text-font-size: progress-bar-giant-text-font-weight: progress-bar-giant-text-line-height: progress-bar-basic-background-color: progress-bar-basic-filled-background-color: progress-bar-basic-text-color: progress-bar-primary-background-color: progress-bar-primary-filled-background-color: progress-bar-primary-text-color: progress-bar-success-background-color: progress-bar-success-filled-background-color: progress-bar-success-text-color: progress-bar-info-background-color: progress-bar-info-filled-background-color: progress-bar-info-text-color: progress-bar-warning-background-color: progress-bar-warning-filled-background-color: progress-bar-warning-text-color: progress-bar-danger-background-color: progress-bar-danger-filled-background-color: progress-bar-danger-text-color: progress-bar-control-background-color: progress-bar-control-filled-background-color: progress-bar-control-text-color:
constructor
constructor(statusService: NbStatusService);
property additionalClasses
readonly additionalClasses: string[];
property basic
readonly basic: boolean;
property control
readonly control: boolean;
property danger
readonly danger: boolean;
property displayValue
displayValue: boolean;
Displays value inside progress bar
property giant
readonly giant: boolean;
property info
readonly info: boolean;
property large
readonly large: boolean;
property medium
readonly medium: boolean;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbProgressBarComponent, 'nb-progress-bar', never, { value: { alias: 'value'; required: false }; status: { alias: 'status'; required: false }; size: { alias: 'size'; required: false }; displayValue: { alias: 'displayValue'; required: false }; }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbProgressBarComponent, never>;
property primary
readonly primary: boolean;
property size
size: NbComponentSize;
Progress bar size (
tiny
,small
,medium
(default),large
,giant
)
property small
readonly small: boolean;
property status
status: string;
Progress bar background (
basic
(default),primary
,info
,success
,warning
,danger
,control
)
property statusService
protected statusService: NbStatusService;
property success
readonly success: boolean;
property tiny
readonly tiny: boolean;
property value
value: number;
Progress bar value in percent (0 - 100)
property warning
readonly warning: boolean;
class NbProgressBarModule
class NbProgressBarModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbProgressBarModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbProgressBarModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbProgressBarModule, [typeof i1.NbProgressBarComponent], [typeof i2.NbSharedModule], [typeof i1.NbProgressBarComponent]>;
class NbRadioComponent
class NbRadioComponent {}
The
NbRadioComponent
provides the same functionality as native<input type="radio">
with Nebular styles and animations.@stacked-example(Showcase, radio/radio-showcase.component)
### Installation
Import
NbRadioModule
to your feature module.@NgModule({imports: [// ...NbRadioModule,],})export class PageModule { }### Usage
Radio buttons should be wrapped in
nb-radio-group
to provide form bindings.<nb-radio-group [(ngModel)]="selectedOption"><nb-radio value="1">Option 1</nb-radio><nb-radio value="2">Option 2</nb-radio><nb-radio value="3">Option 3</nb-radio></nb-radio-group>You can disable some radios in the group using a
disabled
attribute.@stacked-example(Disabled, radio/radio-disabled.component)
radio-width: radio-height: radio-border-style: radio-border-width: radio-text-font-family: radio-text-font-size: radio-text-font-weight: radio-text-line-height: radio-outline-color: radio-outline-width: radio-basic-text-color: radio-basic-border-color: radio-basic-background-color: radio-basic-checked-background-color: radio-basic-checked-border-color: radio-basic-inner-circle-color: radio-basic-focus-border-color: radio-basic-focus-inner-circle-color: radio-basic-hover-background-color: radio-basic-hover-border-color: radio-basic-hover-inner-circle-color: radio-basic-hover-checked-background-color: radio-basic-active-border-color: radio-basic-active-inner-circle-color: radio-basic-disabled-background-color: radio-basic-disabled-border-color: radio-basic-disabled-text-color: radio-basic-disabled-checked-background-color: radio-basic-disabled-checked-border-color: radio-basic-disabled-checked-inner-circle-color: radio-primary-text-color: radio-primary-border-color: radio-primary-background-color: radio-primary-checked-background-color: radio-primary-checked-border-color: radio-primary-inner-circle-color: radio-primary-focus-border-color: radio-primary-focus-inner-circle-color: radio-primary-hover-background-color: radio-primary-hover-border-color: radio-primary-hover-inner-circle-color: radio-primary-hover-checked-background-color: radio-primary-active-border-color: radio-primary-active-inner-circle-color: radio-primary-disabled-background-color: radio-primary-disabled-border-color: radio-primary-disabled-text-color: radio-primary-disabled-checked-background-color: radio-primary-disabled-checked-border-color: radio-primary-disabled-checked-inner-circle-color: radio-success-text-color: radio-success-border-color: radio-success-background-color: radio-success-checked-background-color: radio-success-checked-border-color: radio-success-inner-circle-color: radio-success-focus-border-color: radio-success-focus-inner-circle-color: radio-success-hover-background-color: radio-success-hover-border-color: radio-success-hover-inner-circle-color: radio-success-hover-checked-background-color: radio-success-active-border-color: radio-success-active-inner-circle-color: radio-success-disabled-background-color: radio-success-disabled-border-color: radio-success-disabled-text-color: radio-success-disabled-checked-background-color: radio-success-disabled-checked-border-color: radio-success-disabled-checked-inner-circle-color: radio-info-text-color: radio-info-border-color: radio-info-background-color: radio-info-checked-background-color: radio-info-checked-border-color: radio-info-inner-circle-color: radio-info-focus-border-color: radio-info-focus-inner-circle-color: radio-info-hover-background-color: radio-info-hover-border-color: radio-info-hover-inner-circle-color: radio-info-hover-checked-background-color: radio-info-active-border-color: radio-info-active-inner-circle-color: radio-info-disabled-background-color: radio-info-disabled-border-color: radio-info-disabled-text-color: radio-info-disabled-checked-background-color: radio-info-disabled-checked-border-color: radio-info-disabled-checked-inner-circle-color: radio-warning-text-color: radio-warning-border-color: radio-warning-background-color: radio-warning-checked-background-color: radio-warning-checked-border-color: radio-warning-inner-circle-color: radio-warning-focus-border-color: radio-warning-focus-inner-circle-color: radio-warning-hover-background-color: radio-warning-hover-border-color: radio-warning-hover-inner-circle-color: radio-warning-hover-checked-background-color: radio-warning-active-border-color: radio-warning-active-inner-circle-color: radio-warning-disabled-background-color: radio-warning-disabled-border-color: radio-warning-disabled-text-color: radio-warning-disabled-checked-background-color: radio-warning-disabled-checked-border-color: radio-warning-disabled-checked-inner-circle-color: radio-danger-text-color: radio-danger-border-color: radio-danger-background-color: radio-danger-checked-background-color: radio-danger-checked-border-color: radio-danger-inner-circle-color: radio-danger-focus-border-color: radio-danger-focus-inner-circle-color: radio-danger-hover-background-color: radio-danger-hover-border-color: radio-danger-hover-inner-circle-color: radio-danger-hover-checked-background-color: radio-danger-active-border-color: radio-danger-active-inner-circle-color: radio-danger-disabled-background-color: radio-danger-disabled-border-color: radio-danger-disabled-text-color: radio-danger-disabled-checked-background-color: radio-danger-disabled-checked-border-color: radio-danger-disabled-checked-inner-circle-color: radio-control-text-color: radio-control-background-color: radio-control-border-color: radio-control-checked-background-color: radio-control-checked-border-color: radio-control-inner-circle-color: radio-control-focus-border-color: radio-control-focus-inner-circle-color: radio-control-hover-background-color: radio-control-hover-border-color: radio-control-hover-inner-circle-color: radio-control-hover-checked-background-color: radio-control-active-border-color: radio-control-active-inner-circle-color: radio-control-disabled-background-color: radio-control-disabled-border-color: radio-control-disabled-text-color: radio-control-disabled-checked-background-color: radio-control-disabled-checked-border-color: radio-control-disabled-checked-inner-circle-color:
constructor
constructor( cd: ChangeDetectorRef, renderer: Renderer2, statusService: NbStatusService);
property additionalClasses
readonly additionalClasses: string[];
property blur
blur: EventEmitter<void>;
property cd
protected cd: ChangeDetectorRef;
property checked
checked: boolean;
property disabled
disabled: boolean;
property input
input: ElementRef<HTMLInputElement>;
property isBasic
readonly isBasic: boolean;
property isControl
readonly isControl: boolean;
property isDanger
readonly isDanger: boolean;
property isInfo
readonly isInfo: boolean;
property isPrimary
readonly isPrimary: boolean;
property isSuccess
readonly isSuccess: boolean;
property isWarning
readonly isWarning: boolean;
property name
name: string;
property ngAcceptInputType_checked
static ngAcceptInputType_checked: NbBooleanInput;
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbRadioComponent, 'nb-radio', never, { name: { alias: 'name'; required: false }; checked: { alias: 'checked'; required: false }; value: { alias: 'value'; required: false }; disabled: { alias: 'disabled'; required: false }; status: { alias: 'status'; required: false }; }, { valueChange: 'valueChange'; blur: 'blur' }, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbRadioComponent, never>;