ng2-bootstrap
- Version 1.6.3
- Published
- 1 dependency
- MIT license
Install
npm i ng2-bootstrap
yarn add ng2-bootstrap
pnpm add ng2-bootstrap
Overview
Native Angular Bootstrap Components
Index
Functions
Classes
DatePickerComponent
- activeDate
- activeDateChange
- config
- configureOptions()
- customClass
- dateDisabled
- datepickerMode
- formatDay
- formatDayHeader
- formatDayTitle
- formatMonth
- formatMonthTitle
- formatYear
- initDate
- maxDate
- maxMode
- minDate
- minMode
- monthColLimit
- onActiveDateChange()
- onChange
- onlyCurrentMonth
- onSelectionDone()
- onTouched
- onUpdate()
- registerOnChange()
- registerOnTouched()
- selectionDone
- shortcutPropagation
- showWeeks
- startingDay
- writeValue()
- yearColLimit
- yearRange
PagerComponent
- align
- boundaryLinks
- calculateTotalPages()
- classMap
- config
- configureOptions()
- directionLinks
- disabled
- elementRef
- firstText
- getPages()
- getText()
- inited
- itemsPerPage
- lastText
- makePage()
- maxSize
- nextText
- ngOnInit()
- noNext()
- noPrevious()
- numPages
- onChange
- onTouched
- page
- pageBtnClass
- pageChanged
- pages
- previousText
- registerOnChange()
- registerOnTouched()
- renderer
- rotate
- selectPage()
- totalItems
- totalPages
- writeValue()
PaginationComponent
- align
- boundaryLinks
- calculateTotalPages()
- classMap
- config
- configureOptions()
- directionLinks
- disabled
- elementRef
- firstText
- getPages()
- getText()
- inited
- itemsPerPage
- lastText
- makePage()
- maxSize
- nextText
- ngOnInit()
- noNext()
- noPrevious()
- numPages
- onChange
- onTouched
- page
- pageBtnClass
- pageChanged
- pages
- previousText
- registerOnChange()
- registerOnTouched()
- renderer
- rotate
- selectPage()
- totalItems
- totalPages
- writeValue()
SortableComponent
- activeItem
- cancelEvent()
- fieldName
- getItemStyle()
- itemActiveClass
- itemActiveStyle
- itemClass
- items
- itemStyle
- itemTemplate
- onChange
- onChanged
- onDrop()
- onItemDragover()
- onItemDragstart()
- onTouched
- placeholderClass
- placeholderItem
- placeholderStyle
- registerOnChange()
- registerOnTouched()
- resetActiveItem()
- showPlaceholder
- updatePlaceholderState()
- wrapperClass
- wrapperStyle
- writeValue()
TimepickerComponent
- addMinutesToSelected()
- arrowkeys
- config
- decrementHours()
- decrementMinutes()
- getHoursFromTemplate()
- getMinutesFromTemplate()
- hours
- hoursOnBlur()
- hourStep
- incrementHours()
- incrementMinutes()
- invalidHours
- invalidMinutes
- max
- meridian
- meridians
- min
- minutes
- minutesOnBlur()
- minuteStep
- mousewheel
- ngOnInit()
- noDecrementHours()
- noDecrementMinutes()
- noIncrementHours()
- noIncrementMinutes()
- noToggleMeridian()
- onChange
- onTouched
- pad()
- readonlyInput
- refresh()
- registerOnChange()
- registerOnTouched()
- selected
- setDisabledState()
- showMeridian
- showSpinners
- toggleMeridian()
- updateHours()
- updateMinutes()
- updateTemplate()
- writeValue()
TypeaheadDirective
- asyncActions()
- changeModel()
- container
- element
- finalizeAsyncCall()
- hasMatches()
- hide()
- isTypeaheadOptionsListActive
- keyUpEventEmitter
- matches
- ngControl
- ngOnDestroy()
- ngOnInit()
- normalizeOption()
- normalizeQuery()
- onBlur()
- onChange()
- onFocus()
- onKeydown()
- optionsListTemplate
- placement
- prepareMatches()
- renderer
- show()
- syncActions()
- testMatch()
- typeahead
- typeaheadAsync
- typeaheadGroupField
- typeaheadItemTemplate
- typeaheadLatinize
- typeaheadLoading
- typeaheadMinLength
- typeaheadNoResults
- typeaheadOnBlur
- typeaheadOnSelect
- typeaheadOptionField
- typeaheadOptionsLimit
- typeaheadPhraseDelimiters
- typeaheadSingleWords
- typeaheadWaitMs
- typeaheadWordDelimiters
- viewContainerRef
Interfaces
Functions
function isBs3
isBs3: () => boolean;
function OnChange
OnChange: (defaultValue?: any) => any;
function positionElements
positionElements: ( hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean) => void;
Classes
class AccordionComponent
class AccordionComponent {}
Displays collapsible content panels for presenting information in a limited amount of space.
constructor
constructor(config: AccordionConfig);
property closeOthers
closeOthers: boolean;
if
true
expanding one item will close all others
property groups
protected groups: AccordionPanelComponent[];
method addGroup
addGroup: (group: AccordionPanelComponent) => void;
method closeOtherPanels
closeOtherPanels: (openGroup: AccordionPanelComponent) => void;
method removeGroup
removeGroup: (group: AccordionPanelComponent) => void;
class AccordionConfig
class AccordionConfig {}
Configuration service, provides default values for the AccordionComponent.
property closeOthers
closeOthers: boolean;
Whether the other panels should be closed when a panel is opened
class AccordionModule
class AccordionModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class AccordionPanelComponent
class AccordionPanelComponent implements OnInit, OnDestroy {}
constructor
constructor(accordion: AccordionComponent);
property accordion
protected accordion: AccordionComponent;
property heading
heading: string;
Clickable text in accordion's group header, check
accordion heading
below for using html in header
property isBs3
readonly isBs3: boolean;
property isDisabled
isDisabled: boolean;
if true — disables accordion group
property isOpen
isOpen: boolean;
Is accordion group open or closed
property panelClass
panelClass: string;
Provides an ability to use Bootstrap's contextual panel classes (
panel-primary
,panel-success
,panel-info
, etc...). List of all available classes [available here](http://getbootstrap.com/components/#panels-alternatives)
method ngOnDestroy
ngOnDestroy: () => any;
method ngOnInit
ngOnInit: () => any;
method toggleOpen
toggleOpen: (event: Event) => any;
class AlertComponent
class AlertComponent implements OnInit {}
constructor
constructor(_config: AlertConfig);
property classes
classes: string;
property dismissible
dismissible: boolean;
If set, displays an inline "Close" button
property dismissibleChange
dismissibleChange: EventEmitter<string>;
property dismissOnTimeout
dismissOnTimeout: string | number;
Number in milliseconds, after which alert will be closed
property isClosed
isClosed: boolean;
property onClose
onClose: EventEmitter<AlertComponent>;
This event fires immediately after close instance method is called, $event is an instance of Alert component.
property onClosed
onClosed: EventEmitter<AlertComponent>;
This event fires when alert closed, $event is an instance of Alert component
property type
type: string;
Alert type. Provides one of four bootstrap supported contextual classes:
success
,info
,warning
anddanger
method close
close: () => void;
Closes an alert by removing it from the DOM.
method ngOnInit
ngOnInit: () => void;
class AlertConfig
class AlertConfig {}
property dismissible
dismissible: boolean;
is alerts are dismissible by default
property dismissOnTimeout
dismissOnTimeout?: number;
default time before alert will dismiss
property type
type: string;
default alert type
class AlertModule
class AlertModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class BarComponent
class BarComponent implements OnInit, OnDestroy {}
constructor
constructor(progress: ProgressDirective);
property max
max: number;
property percent
percent: number;
property progress
progress: ProgressDirective;
property transition
transition: string;
property type
type: string;
provide one of the four supported contextual classes:
success
,info
,warning
,danger
property value
value: number;
current value of progress bar
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method recalculatePercentage
recalculatePercentage: () => void;
class BsDropdownConfig
class BsDropdownConfig {}
Default dropdown configuration
property autoClose
autoClose: boolean;
default dropdown auto closing behavior
class BsDropdownContainerComponent
class BsDropdownContainerComponent implements OnDestroy {}
constructor
constructor(_state: BsDropdownState);
property direction
readonly direction: 'down' | 'up';
property isOpen
isOpen: boolean;
method ngOnDestroy
ngOnDestroy: () => void;
class BsDropdownDirective
class BsDropdownDirective implements OnInit, OnDestroy {}
constructor
constructor( _elementRef: ElementRef, _renderer: Renderer, _viewContainerRef: ViewContainerRef, _cis: ComponentLoaderFactory, _config: BsDropdownConfig, _state: BsDropdownState);
property autoClose
autoClose: boolean;
Indicates that dropdown will be closed on item or document click, and after pressing ESC
property container
container: string;
A selector specifying the element the popover should be appended to. Currently only supports "body".
property dropup
dropup: boolean;
This attribute indicates that the dropdown should be opened upwards
property isBs4
readonly isBs4: boolean;
property isDisabled
isDisabled: boolean;
Disables dropdown toggle and hides dropdown menu if opened
property isOpen
isOpen: boolean;
Returns whether or not the popover is currently being shown
property onHidden
onHidden: EventEmitter<any>;
Emits an event when the popover is hidden
property onShown
onShown: EventEmitter<any>;
Emits an event when the popover is shown
property placement
placement: string;
Placement of a popover. Accepts: "top", "bottom", "left", "right"
property triggers
triggers: string;
Specifies events that should trigger. Supports a space separated list of event names.
method hide
hide: () => void;
Closes an element’s popover. This is considered a “manual” triggering of the popover.
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method show
show: () => void;
Opens an element’s popover. This is considered a “manual” triggering of the popover.
method toggle
toggle: (value?: boolean) => void;
Toggles an element’s popover. This is considered a “manual” triggering of the popover.
class BsDropdownMenuDirective
class BsDropdownMenuDirective {}
constructor
constructor( _state: BsDropdownState, _viewContainer: ViewContainerRef, _templateRef: TemplateRef<any>);
class BsDropdownModule
class BsDropdownModule {}
method forRoot
static forRoot: (config?: any) => ModuleWithProviders;
class BsDropdownState
class BsDropdownState {}
constructor
constructor();
property autoClose
autoClose: boolean;
property direction
direction: 'down' | 'up';
property dropdownMenu
dropdownMenu: Promise<BsComponentRef<any>>;
Content to be displayed as popover.
property isDisabledChange
isDisabledChange: EventEmitter<boolean>;
property isOpenChange
isOpenChange: EventEmitter<boolean>;
property resolveDropdownMenu
resolveDropdownMenu: (componentRef: BsComponentRef<any>) => void;
property toggleClick
toggleClick: EventEmitter<boolean>;
class BsDropdownToggleDirective
class BsDropdownToggleDirective implements OnDestroy {}
constructor
constructor(_state: BsDropdownState, _element: ElementRef);
property isDisabled
isDisabled: boolean;
property isOpen
isOpen: boolean;
method ngOnDestroy
ngOnDestroy: () => void;
method onClick
onClick: () => void;
method onDocumentClick
onDocumentClick: (event: any) => void;
method onEsc
onEsc: () => void;
class BsRootModule
class BsRootModule {}
class ButtonCheckboxDirective
class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {}
Add checkbox functionality to any element
property btnCheckboxFalse
btnCheckboxFalse: any;
Falsy value, will be set to ngModel
property btnCheckboxTrue
btnCheckboxTrue: any;
Truthy value, will be set to ngModel
property falseValue
protected readonly falseValue: boolean;
property isDisabled
protected isDisabled: boolean;
property onChange
protected onChange: any;
property onTouched
protected onTouched: any;
property state
state: boolean;
property trueValue
protected readonly trueValue: boolean;
property value
protected value: any;
method ngOnInit
ngOnInit: () => any;
method onClick
onClick: () => void;
method registerOnChange
registerOnChange: (fn: (_: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: () => {}) => void;
method setDisabledState
setDisabledState: (isDisabled: boolean) => void;
method toggle
toggle: (state: boolean) => void;
method writeValue
writeValue: (value: any) => void;
class ButtonRadioDirective
class ButtonRadioDirective implements ControlValueAccessor, OnInit {}
Create radio buttons or groups of buttons. A value of a selected button is bound to a variable specified via ngModel.
constructor
constructor(el: ElementRef);
property btnRadio
btnRadio: any;
Radio button value, will be set to
ngModel
property el
protected el: ElementRef;
property isActive
readonly isActive: boolean;
property onChange
onChange: any;
property onTouched
onTouched: any;
property uncheckable
uncheckable: boolean;
If
true
— radio button can be unchecked
property value
value: any;
Current value of radio component or group
method ngOnInit
ngOnInit: () => void;
method onBlur
onBlur: () => void;
method onClick
onClick: () => void;
method registerOnChange
registerOnChange: (fn: any) => void;
method registerOnTouched
registerOnTouched: (fn: any) => void;
method writeValue
writeValue: (value: any) => void;
class ButtonsModule
class ButtonsModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class CarouselComponent
class CarouselComponent implements OnDestroy {}
Base element to create carousel
constructor
constructor(config: CarouselConfig);
property activeSlide
activeSlide: number;
Index of currently displayed slide(started for 0)
property activeSlideChange
activeSlideChange: EventEmitter<any>;
Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property
property currentInterval
protected currentInterval: any;
property destroyed
protected destroyed: boolean;
property interval
interval: number;
Delay of item cycling in milliseconds. If false, carousel won't cycle automatically.
property isBs4
readonly isBs4: boolean;
property isPlaying
protected isPlaying: boolean;
property noPause
noPause: boolean;
If
true
— will disable pausing on carousel mouse hover
property noWrap
noWrap: boolean;
If
true
— carousel will not cycle continuously and will have hard stops (prevent looping)
property slides
readonly slides: SlideComponent[];
method addSlide
addSlide: (slide: SlideComponent) => void;
Adds new slide. If this slide is first in collection - set it as active and starts auto changing
Parameter slide
method getCurrentSlideIndex
getCurrentSlideIndex: () => number;
Finds and returns index of currently displayed slide
Returns
{number}
method isLast
isLast: (index: number) => boolean;
Defines, whether the specified index is last in collection
Parameter index
Returns
{boolean}
method nextSlide
nextSlide: (force?: boolean) => void;
Rolling to next slide
Parameter force
: {boolean} if true - will ignore noWrap flag
method ngOnDestroy
ngOnDestroy: () => void;
method pause
pause: () => void;
Stops a auto changing of slides
method play
play: () => void;
Starts a auto changing of slides
method previousSlide
previousSlide: (force?: boolean) => void;
Rolling to previous slide
Parameter force
: {boolean} if true - will ignore noWrap flag
method removeSlide
removeSlide: (slide: SlideComponent) => void;
Removes specified slide. If this slide is active - will roll to another slide
Parameter slide
method selectSlide
selectSlide: (index: number) => void;
Rolling to specified slide
Parameter index
: {number} index of slide, which must be shown
class CarouselConfig
class CarouselConfig {}
class CarouselModule
class CarouselModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class CollapseDirective
class CollapseDirective {}
constructor
constructor(_el: ElementRef, _renderer: Renderer);
property collapse
collapse: boolean;
A flag indicating visibility of content (shown or hidden)
property collapsed
collapsed: EventEmitter<any>;
This event fires as soon as content collapses
property display
display: string;
property expanded
expanded: EventEmitter<any>;
This event fires as soon as content becomes visible
property isCollapse
isCollapse: boolean;
property isCollapsed
isCollapsed: boolean;
property isCollapsing
isCollapsing: boolean;
property isExpanded
isExpanded: boolean;
method hide
hide: () => void;
allows to manually hide content
method show
show: () => void;
allows to manually show collapsed content
method toggle
toggle: () => void;
allows to manually toggle content visibility
class CollapseModule
class CollapseModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class ComponentLoader
class ComponentLoader<T> {}
property instance
instance: {};
property isShown
readonly isShown: boolean;
property onBeforeHide
onBeforeHide: EventEmitter<any>;
property onBeforeShow
onBeforeShow: EventEmitter<any>;
property onHidden
onHidden: EventEmitter<any>;
property onShown
onShown: EventEmitter<any>;
method attach
attach: (compType: Type<T>) => ComponentLoader<T>;
method dispose
dispose: () => void;
method hide
hide: () => ComponentLoader<T>;
method listen
listen: (listenOpts: ListenOptions) => ComponentLoader<T>;
method position
position: (opts?: PositioningOptions) => ComponentLoader<T>;
method provide
provide: (provider: Provider) => ComponentLoader<T>;
method show
show: (opts?: { [key: string]: any; content?: string | TemplateRef<any>;}) => ComponentRef<T>;
method to
to: (container?: string) => ComponentLoader<T>;
method toggle
toggle: () => void;
class ComponentLoaderFactory
class ComponentLoaderFactory {}
constructor
constructor( componentFactoryResolver: ComponentFactoryResolver, ngZone: NgZone, injector: Injector, posService: PositioningService);
method createLoader
createLoader: <T>( _elementRef: ElementRef, _viewContainerRef: ViewContainerRef, _renderer: Renderer) => ComponentLoader<T>;
Parameter _elementRef
Parameter _viewContainerRef
Parameter _renderer
Returns
{ComponentLoader}
class ContentRef
class ContentRef {}
constructor
constructor(nodes: any[], viewRef?: ViewRef, componentRef?: ComponentRef<any>);
property componentRef
componentRef?: ComponentRef<any>;
property nodes
nodes: any[];
property viewRef
viewRef?: ViewRef;
class DateFormatter
class DateFormatter {}
method format
format: (date: Date, format: string) => string;
class DatePickerComponent
class DatePickerComponent implements ControlValueAccessor {}
constructor
constructor(config: DatepickerConfig);
property activeDate
activeDate: Date;
currently active date
property activeDateChange
activeDateChange: EventEmitter<Date>;
callback to invoke when the activeDate is changed.
property config
protected config: DatepickerConfig;
property customClass
customClass: { date: Date; mode: string; clazz: string }[];
array of custom css classes to be applied to targeted dates
property dateDisabled
dateDisabled: { date: Date; mode: string }[];
array of disabled dates
property datepickerMode
datepickerMode: string;
sets datepicker mode, supports:
day
,month
,year
property formatDay
formatDay: string;
format of day in month
property formatDayHeader
formatDayHeader: string;
format of day in week header
property formatDayTitle
formatDayTitle: string;
format of title when selecting day
property formatMonth
formatMonth: string;
format of month in year
property formatMonthTitle
formatMonthTitle: string;
format of title when selecting month
property formatYear
formatYear: string;
format of year in year range
property initDate
initDate: Date;
default date to show if
ng-model
value is not specified
property maxDate
maxDate: Date;
latest selectable date
property maxMode
maxMode: string;
sets upper datepicker mode, supports:
day
,month
,year
property minDate
minDate: Date;
oldest selectable date
property minMode
minMode: string;
set lower datepicker mode, supports:
day
,month
,year
property monthColLimit
monthColLimit: number;
number of months displayed in a single row of month picker
property onChange
onChange: any;
property onlyCurrentMonth
onlyCurrentMonth: boolean;
if true only dates from the currently displayed month will be shown
property onTouched
onTouched: any;
property selectionDone
selectionDone: EventEmitter<Date>;
property shortcutPropagation
shortcutPropagation: boolean;
if true shortcut`s event propagation will be disabled
property showWeeks
showWeeks: boolean;
if false week numbers will be hidden
property startingDay
startingDay: number;
starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday)
property yearColLimit
yearColLimit: number;
number of years displayed in a single row of year picker
property yearRange
yearRange: number;
number of years displayed in year selection
method configureOptions
configureOptions: () => void;
method onActiveDateChange
onActiveDateChange: (event: Date) => void;
method onSelectionDone
onSelectionDone: (event: Date) => void;
method onUpdate
onUpdate: (event: any) => void;
method registerOnChange
registerOnChange: (fn: (_: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: () => {}) => void;
method writeValue
writeValue: (value: any) => void;
class DatepickerConfig
class DatepickerConfig {}
property datepickerMode
datepickerMode: string;
property formatDay
formatDay: string;
property formatDayHeader
formatDayHeader: string;
property formatDayTitle
formatDayTitle: string;
property formatMonth
formatMonth: string;
property formatMonthTitle
formatMonthTitle: string;
property formatYear
formatYear: string;
property maxMode
maxMode: string;
property minMode
minMode: string;
property monthColLimit
monthColLimit: number;
property onlyCurrentMonth
onlyCurrentMonth: boolean;
property shortcutPropagation
shortcutPropagation: boolean;
property showWeeks
showWeeks: boolean;
property startingDay
startingDay: number;
property yearColLimit
yearColLimit: number;
property yearRange
yearRange: number;
class DatepickerModule
class DatepickerModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class DayPickerComponent
class DayPickerComponent implements OnInit {}
constructor
constructor(datePicker: DatePickerInnerComponent);
property CURRENT_THEME_TEMPLATE
CURRENT_THEME_TEMPLATE: any;
property datePicker
datePicker: DatePickerInnerComponent;
property isBs4
readonly isBs4: boolean;
property labels
labels: any[];
property rows
rows: any[];
property title
title: string;
property weekNumbers
weekNumbers: number[];
method getDates
protected getDates: (startDate: Date, n: number) => Date[];
method getISO8601WeekNumber
protected getISO8601WeekNumber: (date: Date) => number;
method ngOnInit
ngOnInit: () => void;
class DraggableItemService
class DraggableItemService {}
method captureItem
captureItem: (overZoneIndex: number, newIndex: number) => DraggableItem;
method dragStart
dragStart: (item: DraggableItem) => void;
method getItem
getItem: () => DraggableItem;
method onCaptureItem
onCaptureItem: () => Observable<DraggableItem>;
class LinkedList
class LinkedList<T> {}
property asArray
protected asArray: T[];
property current
protected current: any;
property head
protected head: any;
property length
length: number;
property tail
protected tail: any;
method add
add: (value: T, position?: number) => void;
method createInternalArrayRepresentation
protected createInternalArrayRepresentation: () => void;
method every
every: (fn: any) => boolean;
method find
find: (fn: any) => T;
method findAll
findAll: (fn: any) => any[];
method findIndex
findIndex: (fn: any) => number;
method forEach
forEach: (fn: any) => void;
method get
get: (position: number) => T;
method getNode
protected getNode: (position: number) => any;
method indexOf
indexOf: (value: T) => number;
method pop
pop: () => T;
method push
push: (...args: T[]) => number;
method remove
remove: (position?: number) => void;
method set
set: (position: number, value: T) => void;
method shift
shift: () => T;
method some
some: (fn: any) => boolean;
method toArray
toArray: () => T[];
method toString
toString: () => string;
method unshift
unshift: (...args: T[]) => number;
class ModalBackdropComponent
class ModalBackdropComponent {}
This component will be added as background layout for modals if enabled
constructor
constructor(element: ElementRef, renderer: Renderer);
property element
element: ElementRef;
property isAnimated
isAnimated: boolean;
property isShown
isShown: boolean;
property renderer
renderer: Renderer;
class ModalBackdropOptions
class ModalBackdropOptions {}
constructor
constructor(options: ModalBackdropOptions);
property animate
animate: boolean;
class ModalDirective
class ModalDirective implements AfterViewInit, OnDestroy {}
Mark any code with directive to show it's content in modal
constructor
constructor( _element: ElementRef, _viewContainerRef: ViewContainerRef, _renderer: Renderer, clf: ComponentLoaderFactory);
property backdrop
protected backdrop: ComponentRef<ModalBackdropComponent>;
property config
config: ModalOptions;
allows to set modal configuration via element property
property isAnimated
isAnimated: boolean;
property isBodyOverflowing
protected isBodyOverflowing: boolean;
property isShown
readonly isShown: boolean;
property onHidden
onHidden: EventEmitter<ModalDirective>;
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
property onHide
onHide: EventEmitter<ModalDirective>;
This event is fired immediately when the hide instance method has been called.
property onShow
onShow: EventEmitter<ModalDirective>;
This event fires immediately when the
show
instance method is called.
property onShown
onShown: EventEmitter<ModalDirective>;
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete)
property originalBodyPadding
protected originalBodyPadding: number;
property scrollbarWidth
protected scrollbarWidth: number;
property timerHideModal
protected timerHideModal: number;
property timerRmBackDrop
protected timerRmBackDrop: number;
method getScrollbarWidth
protected getScrollbarWidth: () => number;
method hide
hide: (event?: Event) => void;
Allows to manually close modal
method ngAfterViewInit
ngAfterViewInit: () => any;
method ngOnDestroy
ngOnDestroy: () => any;
method onClick
onClick: (event: any) => void;
method onEsc
onEsc: () => void;
method resetScrollbar
protected resetScrollbar: () => void;
method setScrollbar
protected setScrollbar: () => void;
method show
show: () => void;
Allows to manually open modal
method toggle
toggle: () => void;
Allows to manually toggle modal visibility
class ModalModule
class ModalModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class MonthPickerComponent
class MonthPickerComponent implements OnInit {}
constructor
constructor(datePicker: DatePickerInnerComponent);
property datePicker
datePicker: DatePickerInnerComponent;
property isBs4
readonly isBs4: boolean;
property maxMode
maxMode: string;
property rows
rows: any[];
property title
title: string;
method ngOnInit
ngOnInit: () => void;
class Ng2BootstrapModule
class Ng2BootstrapModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class NgTranscludeDirective
class NgTranscludeDirective {}
constructor
constructor(viewRef: ViewContainerRef);
property ngTransclude
ngTransclude: TemplateRef<any>;
property viewRef
viewRef: ViewContainerRef;
class PagerComponent
class PagerComponent implements ControlValueAccessor, OnInit {}
constructor
constructor( renderer: Renderer, elementRef: ElementRef, paginationConfig: PaginationConfig);
property align
align: boolean;
if
true
aligns each link to the sides of pager
property boundaryLinks
boundaryLinks: boolean;
if false first and last buttons will be hidden
property classMap
classMap: string;
property config
config: any;
property directionLinks
directionLinks: boolean;
if false previous and next buttons will be hidden
property disabled
disabled: boolean;
if true pagination component will be disabled
property elementRef
elementRef: ElementRef;
property firstText
firstText: string;
first button text
property inited
protected inited: boolean;
property itemsPerPage
itemsPerPage: number;
maximum number of items per page. If value less than 1 will display all items on one page
property lastText
lastText: string;
last button text
property maxSize
maxSize: number;
limit number for page links in pager
property nextText
nextText: string;
next button text
property numPages
numPages: EventEmitter<number>;
fired when total pages count changes, $event:number equals to total pages count
property onChange
onChange: any;
property onTouched
onTouched: any;
property page
page: number;
property pageBtnClass
pageBtnClass: string;
add class to
property pageChanged
pageChanged: EventEmitter<PageChangedEvent>;
fired when page was changed, $event:{page, itemsPerPage} equals to object with current page index and number of items per page
property pages
pages: any[];
property previousText
previousText: string;
previous button text
property renderer
renderer: Renderer;
property rotate
rotate: boolean;
if true current page will in the middle of pages list
property totalItems
totalItems: number;
total number of items in all pages
property totalPages
totalPages: number;
method calculateTotalPages
protected calculateTotalPages: () => number;
method configureOptions
configureOptions: (config: any) => void;
method getPages
protected getPages: (currentPage: number, totalPages: number) => any[];
method getText
getText: (key: string) => string;
method makePage
protected makePage: ( num: number, text: string, active: boolean) => { number: number; text: string; active: boolean };
method ngOnInit
ngOnInit: () => void;
method noNext
noNext: () => boolean;
method noPrevious
noPrevious: () => boolean;
method registerOnChange
registerOnChange: (fn: (_: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: () => {}) => void;
method selectPage
selectPage: (page: number, event?: Event) => void;
method writeValue
writeValue: (value: number) => void;
class PaginationComponent
class PaginationComponent implements ControlValueAccessor, OnInit {}
constructor
constructor( renderer: Renderer, elementRef: ElementRef, paginationConfig: PaginationConfig);
property align
align: boolean;
if
true
aligns each link to the sides of pager
property boundaryLinks
boundaryLinks: boolean;
if false first and last buttons will be hidden
property classMap
classMap: string;
property config
config: any;
property directionLinks
directionLinks: boolean;
if false previous and next buttons will be hidden
property disabled
disabled: boolean;
if true pagination component will be disabled
property elementRef
elementRef: ElementRef;
property firstText
firstText: string;
first button text
property inited
protected inited: boolean;
property itemsPerPage
itemsPerPage: number;
maximum number of items per page. If value less than 1 will display all items on one page
property lastText
lastText: string;
last button text
property maxSize
maxSize: number;
limit number for page links in pager
property nextText
nextText: string;
next button text
property numPages
numPages: EventEmitter<number>;
fired when total pages count changes, $event:number equals to total pages count
property onChange
onChange: any;
property onTouched
onTouched: any;
property page
page: number;
property pageBtnClass
pageBtnClass: string;
add class to
property pageChanged
pageChanged: EventEmitter<PageChangedEvent>;
fired when page was changed, $event:{page, itemsPerPage} equals to object with current page index and number of items per page
property pages
pages: any[];
property previousText
previousText: string;
previous button text
property renderer
renderer: Renderer;
property rotate
rotate: boolean;
if true current page will in the middle of pages list
property totalItems
totalItems: number;
total number of items in all pages
property totalPages
totalPages: number;
method calculateTotalPages
protected calculateTotalPages: () => number;
method configureOptions
configureOptions: (config: any) => void;
method getPages
protected getPages: (currentPage: number, totalPages: number) => any[];
method getText
getText: (key: string) => string;
method makePage
protected makePage: ( num: number, text: string, active: boolean) => { number: number; text: string; active: boolean };
method ngOnInit
ngOnInit: () => void;
method noNext
noNext: () => boolean;
method noPrevious
noPrevious: () => boolean;
method registerOnChange
registerOnChange: (fn: (_: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: () => {}) => void;
method selectPage
selectPage: (page: number, event?: Event) => void;
method writeValue
writeValue: (value: number) => void;
class PaginationConfig
class PaginationConfig {}
Provides default values for Pagination and pager components
class PaginationModule
class PaginationModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class PopoverConfig
class PopoverConfig {}
Configuration service for the Popover directive. You can inject this service, typically in your root component, and customize the values of its properties in order to provide default values for all the popovers used in the application.
property container
container: string;
A selector specifying the element the popover should be appended to. Currently only supports "body".
property placement
placement: string;
Placement of a popover. Accepts: "top", "bottom", "left", "right"
property triggers
triggers: string;
Specifies events that should trigger. Supports a space separated list of event names.
class PopoverContainerComponent
class PopoverContainerComponent {}
constructor
constructor(config: PopoverConfig);
property isBs3
readonly isBs3: boolean;
property placement
placement: string;
property title
title: string;
class PopoverDirective
class PopoverDirective implements OnInit, OnDestroy {}
A lightweight, extensible directive for fancy popover creation.
constructor
constructor( _elementRef: ElementRef, _renderer: Renderer, _viewContainerRef: ViewContainerRef, _config: PopoverConfig, cis: ComponentLoaderFactory);
property container
container: string;
A selector specifying the element the popover should be appended to. Currently only supports "body".
property isOpen
isOpen: boolean;
Returns whether or not the popover is currently being shown
property onHidden
onHidden: EventEmitter<any>;
Emits an event when the popover is hidden
property onShown
onShown: EventEmitter<any>;
Emits an event when the popover is shown
property placement
placement: 'top' | 'bottom' | 'left' | 'right';
Placement of a popover. Accepts: "top", "bottom", "left", "right"
property popover
popover: any;
Content to be displayed as popover.
property popoverTitle
popoverTitle: string;
Title of a popover.
property triggers
triggers: string;
Specifies events that should trigger. Supports a space separated list of event names.
method hide
hide: () => void;
Closes an element’s popover. This is considered a “manual” triggering of the popover.
method ngOnDestroy
ngOnDestroy: () => any;
method ngOnInit
ngOnInit: () => any;
method show
show: () => void;
Opens an element’s popover. This is considered a “manual” triggering of the popover.
method toggle
toggle: () => void;
Toggles an element’s popover. This is considered a “manual” triggering of the popover.
class PopoverModule
class PopoverModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class Positioning
class Positioning {}
Valor Software Angular ng-bootstrap team
method offset
offset: (element: HTMLElement, round?: boolean) => ClientRect;
method position
position: (element: HTMLElement, round?: boolean) => ClientRect;
method positionElements
positionElements: ( hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean) => ClientRect;
class PositioningService
class PositioningService {}
method position
position: (options: PositioningOptions) => void;
class ProgressbarComponent
class ProgressbarComponent {}
constructor
constructor(config: ProgressbarConfig);
property animate
animate: boolean;
if
true
changing value of progress bar will be animated (note: not supported by Bootstrap 4)
property max
max: number;
maximum total value of progress element
property type
type: string;
provide one of the four supported contextual classes:
success
,info
,warning
,danger
property value
value: number;
current value of progress bar
class ProgressbarConfig
class ProgressbarConfig {}
class ProgressbarModule
class ProgressbarModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class ProgressDirective
class ProgressDirective {}
property addClass
addClass: boolean;
property animate
animate: boolean;
if
true
changing value of progress bar will be animated (note: not supported by Bootstrap 4)
property bars
bars: any[];
property max
max: number;
maximum total value of progress element
method addBar
addBar: (bar: BarComponent) => void;
method removeBar
removeBar: (bar: BarComponent) => void;
class RatingComponent
class RatingComponent implements ControlValueAccessor, OnInit {}
property max
max: number;
number of icons
property onChange
onChange: any;
property onHover
onHover: EventEmitter<number>;
fired when icon selected, $event:number equals to selected rating
property onLeave
onLeave: EventEmitter<number>;
fired when icon selected, $event:number equals to previous rating value
property onTouched
onTouched: any;
property preValue
protected preValue: number;
property range
range: any[];
property ratingStates
ratingStates: { stateOn: string; stateOff: string }[];
array of custom icons classes
property readonly
readonly: boolean;
if true will not react on any user events
property stateOff
stateOff: string;
unselected icon class
property stateOn
stateOn: string;
selected icon class
property titles
titles: string[];
array of icons titles, default: (["one", "two", "three", "four", "five"])
property value
value: number;
method buildTemplateObjects
protected buildTemplateObjects: (ratingStates: any[], max: number) => any[];
method enter
enter: (value: number) => void;
method ngOnInit
ngOnInit: () => void;
method onKeydown
onKeydown: (event: any) => void;
method rate
rate: (value: number) => void;
method registerOnChange
registerOnChange: (fn: (_: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: () => {}) => void;
method reset
reset: () => void;
method writeValue
writeValue: (value: number) => void;
class RatingModule
class RatingModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class SlideComponent
class SlideComponent implements OnInit, OnDestroy {}
constructor
constructor(carousel: CarouselComponent);
property active
active: boolean;
Is current slide active
property addClass
addClass: boolean;
Wraps element by appropriate CSS classes
property carousel
protected carousel: CarouselComponent;
Link to Parent(container-collection) component
method ngOnDestroy
ngOnDestroy: () => void;
Fires changes in container collection after removing of this slide instance
method ngOnInit
ngOnInit: () => void;
Fires changes in container collection after adding a new slide instance
class SortableComponent
class SortableComponent implements ControlValueAccessor {}
constructor
constructor(transfer: DraggableItemService);
property activeItem
activeItem: number;
property fieldName
fieldName: string;
field name if input array consists of objects
property itemActiveClass
itemActiveClass: string;
class name for active item
property itemActiveStyle
itemActiveStyle: { [key: string]: string };
style object for active item
property itemClass
itemClass: string;
class name for item
property items
items: SortableItem[];
property itemStyle
itemStyle: { [key: string]: string };
style object for item
property itemTemplate
itemTemplate: TemplateRef<any>;
used to specify a custom item template. Template variables: item and index;
property onChange
onChange: EventEmitter<any[]>;
fired on array change (reordering, insert, remove), same as ngModelChange. Returns new items collection as a payload.
property onChanged
onChanged: any;
property onTouched
onTouched: any;
property placeholderClass
placeholderClass: string;
class name for placeholder
property placeholderItem
placeholderItem: string;
placeholder item which will be shown if collection is empty
property placeholderStyle
placeholderStyle: { [key: string]: string };
style object for placeholder
property showPlaceholder
showPlaceholder: boolean;
property wrapperClass
wrapperClass: string;
class name for items wrapper
property wrapperStyle
wrapperStyle: { [key: string]: string };
style object for items wrapper
method cancelEvent
cancelEvent: (event: DragEvent) => void;
method getItemStyle
getItemStyle: (isActive: boolean) => {};
method onDrop
onDrop: (item: DraggableItem) => void;
method onItemDragover
onItemDragover: (event: DragEvent, i: number) => void;
method onItemDragstart
onItemDragstart: (event: DragEvent, item: SortableItem, i: number) => void;
method registerOnChange
registerOnChange: (callback: (_: any) => void) => void;
method registerOnTouched
registerOnTouched: (callback: () => void) => void;
method resetActiveItem
resetActiveItem: (event: DragEvent) => void;
method updatePlaceholderState
updatePlaceholderState: () => void;
method writeValue
writeValue: (value: any[]) => void;
class SortableModule
class SortableModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class TabDirective
class TabDirective implements OnInit {}
constructor
constructor(tabset: TabsetComponent);
property active
active: boolean;
tab active state toggle
property addClass
addClass: boolean;
property customClass
customClass: string;
if set, will be added to the tab's class atribute
property deselect
deselect: EventEmitter<TabDirective>;
fired when tab became inactive, $event:Tab equals to deselected instance of Tab component
property disabled
disabled: boolean;
if true tab can not be activated
property heading
heading: string;
tab header text
property headingRef
headingRef: TemplateRef<any>;
property removable
removable: boolean;
if true tab can be removable, additional button will appear
property removed
removed: EventEmitter<TabDirective>;
fired before tab will be removed
property select
select: EventEmitter<TabDirective>;
fired when tab became active, $event:Tab equals to selected instance of Tab component
property tabset
tabset: TabsetComponent;
method ngOnInit
ngOnInit: () => void;
class TabHeadingDirective
class TabHeadingDirective {}
Should be used to mark element as a template for tab heading
constructor
constructor(templateRef: TemplateRef<any>, tab: TabDirective);
property templateRef
templateRef: TemplateRef<any>;
class TabsetComponent
class TabsetComponent implements OnDestroy {}
constructor
constructor(config: TabsetConfig);
property classMap
classMap: any;
property clazz
clazz: boolean;
property isDestroyed
protected isDestroyed: boolean;
property justified
justified: boolean;
if true tabs fill the container and have a consistent width
property tabs
tabs: TabDirective[];
property type
type: string;
navigation context class: 'tabs' or 'pills'
property vertical
vertical: boolean;
if true tabs will be placed vertically
method addTab
addTab: (tab: TabDirective) => void;
method getClosestTabIndex
protected getClosestTabIndex: (index: number) => number;
method hasAvailableTabs
protected hasAvailableTabs: (index: number) => boolean;
method ngOnDestroy
ngOnDestroy: () => void;
method removeTab
removeTab: (tab: TabDirective) => void;
method setClassMap
protected setClassMap: () => void;
class TabsetConfig
class TabsetConfig {}
property type
type: string;
provides default navigation context class: 'tabs' or 'pills'
class TabsModule
class TabsModule {}
method forRoot
static forRoot: () => ModuleWithProviders;
class TimepickerComponent
class TimepickerComponent implements ControlValueAccessor, OnInit {}
constructor
constructor(_config: TimepickerConfig);
property arrowkeys
arrowkeys: boolean;
if true up/down arrowkeys inside hours and minutes inputs will change time
property config
protected config: TimepickerConfig;
property hours
hours: string;
property hourStep
hourStep: number;
hours change step
property invalidHours
invalidHours: any;
property invalidMinutes
invalidMinutes: any;
property max
max: Date;
maximum time user can select
property meridian
meridian: any;
property meridians
meridians: string[];
meridian labels based on locale
property min
min: Date;
minimum time user can select
property minutes
minutes: string;
property minuteStep
minuteStep: number;
hours change step
property mousewheel
mousewheel: boolean;
if true scroll inside hours and minutes inputs will change time
property onChange
onChange: any;
property onTouched
onTouched: any;
property readonlyInput
readonlyInput: boolean;
if true hours and minutes fields will be readonly
property selected
protected selected: Date;
property showMeridian
showMeridian: boolean;
if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM
property showSpinners
showSpinners: boolean;
if true spinner arrows above and below the inputs will be shown
method addMinutesToSelected
protected addMinutesToSelected: (minutes: any) => void;
method decrementHours
decrementHours: () => void;
method decrementMinutes
decrementMinutes: () => void;
method getHoursFromTemplate
protected getHoursFromTemplate: () => number;
method getMinutesFromTemplate
protected getMinutesFromTemplate: () => number;
method hoursOnBlur
hoursOnBlur: () => void;
method incrementHours
incrementHours: () => void;
method incrementMinutes
incrementMinutes: () => void;
method minutesOnBlur
minutesOnBlur: () => void;
method ngOnInit
ngOnInit: () => void;
method noDecrementHours
noDecrementHours: () => boolean;
method noDecrementMinutes
noDecrementMinutes: () => boolean;
method noIncrementHours
noIncrementHours: () => boolean;
method noIncrementMinutes
noIncrementMinutes: () => boolean;
method noToggleMeridian
noToggleMeridian: () => boolean;
method pad
protected pad: (value: string | number) => string;
method refresh
protected refresh: () => void;
method registerOnChange
registerOnChange: (fn: (_: any) => {}) => void;
method registerOnTouched
registerOnTouched: (fn: () => {}) => void;
method setDisabledState
setDisabledState: (isDisabled: boolean) => void;
method toggleMeridian
toggleMeridian: () => void;
method updateHours
updateHours: () => void;
method updateMinutes
updateMinutes: () => void;
method updateTemplate
protected updateTemplate: () => void;
method writeValue
writeValue: (v: any) => void;
class TimepickerConfig
class TimepickerConfig {}
Provides default configuration values for timepicker