@ng-bootstrap/ng-bootstrap

@ng-bootstrap/ng-bootstrap

Version 15.0.1
Published 15 hours ago
3.27 MB
1 dependency
MIT license

Install

npm i @ng-bootstrap/ng-bootstrap

yarn add @ng-bootstrap/ng-bootstrap

pnpm add @ng-bootstrap/ng-bootstrap

Overview

Angular powered Bootstrap

Index

Classes

class NgbAccordion

class NgbAccordion implements AfterContentChecked {}

Accordion is a collection of collapsible panels (bootstrap cards).
It can ensure only one panel is opened at a time and allows to customize panel headers.
Deprecated
14.1.0

constructor

constructor(
    config: NgbAccordionConfig,
    _ngZone: NgZone,
    _changeDetector: ChangeDetectorRef
);

property activeIds

activeIds: string | readonly string[];

An array or comma separated strings of panel ids that should be opened **initially**.
For subsequent changes use methods like expand(), collapse(), etc. and the (panelChange) event.

property animation

animation: any;

If true, accordion will be animated.
8.0.0

property closeOtherPanels

closeOtherPanels: boolean;

If true, only one panel could be opened at a time.
Opening a new panel will close others.

property destroyOnHide

destroyOnHide: boolean;

If true, panel content will be detached from DOM and not simply hidden when the panel is collapsed.

property hidden

hidden: EventEmitter<string>;

An event emitted when the collapsing animation is finished on the panel, and before the panel element is removed. The payload is the panel id.
8.0.0

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbAccordion,
    'ngb-accordion',
    ['ngbAccordion'],
    {
        animation: { alias: 'animation'; required: false };
        activeIds: { alias: 'activeIds'; required: false };
        closeOtherPanels: { alias: 'closeOthers'; required: false };
        destroyOnHide: { alias: 'destroyOnHide'; required: false };
        type: { alias: 'type'; required: false };
    },
    { panelChange: 'panelChange'; shown: 'shown'; hidden: 'hidden' },
    ['panels'],
    never,
    true,
    never
>;

property ɵfac

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

property panelChange

panelChange: EventEmitter<NgbPanelChangeEvent>;

Event emitted right before the panel toggle happens.
See [NgbPanelChangeEvent](#/components/accordion/api#NgbPanelChangeEvent) for payload details.

property panels

panels: QueryList<NgbPanel>;

property shown

shown: EventEmitter<string>;

An event emitted when the expanding animation is finished on the panel. The payload is the panel id.
8.0.0

property type

type: string;

Type of panels.
Bootstrap provides styles for the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.

method collapse

collapse: (panelId: string) => void;

Collapses a panel with the given id.
Has no effect if the panel is already collapsed or disabled.

method collapseAll

collapseAll: () => void;

Collapses all opened panels.

method expand

expand: (panelId: string) => void;

Expands a panel with a given id.
Has no effect if the panel is already expanded or disabled.

method expandAll

expandAll: () => void;

Expands all panels, if [closeOthers] is false.
If [closeOthers] is true, it will expand the first panel, unless there is already a panel opened.

method isExpanded

isExpanded: (panelId: string) => boolean;

Checks if a panel with a given id is expanded.

method ngAfterContentChecked

ngAfterContentChecked: () => void;

method toggle

toggle: (panelId: string) => void;

Toggles a panel with the given id.
Has no effect if the panel is disabled.

class NgbAccordionBody

class NgbAccordionBody implements AfterContentChecked, OnDestroy {}

A directive that wraps the content of an accordion item's collapsible body.
The actual content is provided in a child ng-template element. Depending on the state of the accordion, the template will be either inserted or removed from the DOM.
14.1.0

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionBody,
    '[ngbAccordionBody]',
    never,
    {},
    {},
    ['_bodyTpl'],
    never,
    true,
    never
>;

property ɵfac

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

method ngAfterContentChecked

ngAfterContentChecked: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

class NgbAccordionButton

class NgbAccordionButton {}

A directive to put on a button element inside an accordion item's header.
If you want a custom markup for the header, you can also use the [NgbAccordionToggle directive](#/components/accordion/api#NgbAccordionToggle).
14.1.0

constructor

constructor(item: NgbAccordionItem);

property item

item: NgbAccordionItem;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionButton,
    'button[ngbAccordionButton]',
    never,
    {},
    {},
    never,
    never,
    true,
    [{ directive: typeof NgbAccordionToggle; inputs: {}; outputs: {} }]
>;

property ɵfac

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

class NgbAccordionCollapse

class NgbAccordionCollapse {}

A directive that wraps the collapsible item's content of the accordion.
Internally it reuses the [NgbCollapse directive](#/components/collapse)
14.1.0

constructor

constructor(item: NgbAccordionItem, ngbCollapse: NgbCollapse);

property item

item: NgbAccordionItem;

property ngbCollapse

ngbCollapse: NgbCollapse;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionCollapse,
    '[ngbAccordionCollapse]',
    ['ngbAccordionCollapse'],
    {},
    {},
    never,
    never,
    true,
    [{ directive: typeof i1.NgbCollapse; inputs: {}; outputs: {} }]
>;

property ɵfac

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

class NgbAccordionConfig

class NgbAccordionConfig {}

A configuration service for the [NgbAccordionDirective](#/components/accordion/api#NgbAccordionDirective).
You can inject this service, typically in your root component, and customize its properties to provide default values for all accordions used in the application.

constructor

constructor(_ngbConfig: NgbConfig);

property animation

animation: boolean;

property closeOthers

closeOthers: boolean;

property ɵfac

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

property ɵprov

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

property type

type: string;

Deprecated
14.1.0

class NgbAccordionDirective

class NgbAccordionDirective {}

Accordion is a stack of cards that have a header and collapsible body.
This directive is a container for these items and provides an API to handle them.
14.1.0

constructor

constructor(config: NgbAccordionConfig);

property animation

animation: boolean;

If true, accordion will be animated.

property closeOthers

closeOthers: boolean;

If true, only one item at the time can stay open.

property destroyOnHide

destroyOnHide: boolean;

If true, the content of the accordion items body will be removed from the DOM. It will be just hidden otherwise.
This property can be overwritten at the [NgbAccordionItem](#/components/accordion/api#NgbAccordionItem) level

property hidden

hidden: EventEmitter<string>;

Event emitted when the collapsing animation is finished and before the content is removed from DOM. The payload is the id of hidden accordion item.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionDirective,
    '[ngbAccordion]',
    ['ngbAccordion'],
    {
        animation: { alias: 'animation'; required: false };
        closeOthers: { alias: 'closeOthers'; required: false };
        destroyOnHide: { alias: 'destroyOnHide'; required: false };
    },
    { shown: 'shown'; hidden: 'hidden' },
    ['_items'],
    never,
    true,
    never
>;

property ɵfac

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

property shown

shown: EventEmitter<string>;

Event emitted when the expanding animation is finished. The payload is the id of shown accordion item.

method collapse

collapse: (itemId: string) => void;

Collapses an item with the given id.
Has no effect if the itemId does not correspond to any item.
Parameter itemId
The id of the item to collapse.

method collapseAll

collapseAll: () => void;

Collapses all items.

method expand

expand: (itemId: string) => void;

Expands an item with the given id.
If closeOthers is true, it will collapse other panels.
Parameter itemId
The id of the item to expand.

method expandAll

expandAll: () => void;

Expands all items.
If closeOthers is true and all items are closed, it will open the first one. Otherwise, it will keep the opened one.

method isExpanded

isExpanded: (itemId: string) => boolean;

Checks if an item with the given id is expanded.
If the itemId does not correspond to any item, it returns false.
Parameter itemId
The id of the item to check.

method toggle

toggle: (itemId: string) => void;

Toggles an item with the given id.
It will toggle an item, even if it is disabled.
Parameter itemId
The id of the item to toggle.

class NgbAccordionHeader

class NgbAccordionHeader {}

A directive that wraps an accordion item's header.
14.1.0

constructor

constructor(item: NgbAccordionItem);

property item

item: NgbAccordionItem;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionHeader,
    '[ngbAccordionHeader]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class NgbAccordionItem

class NgbAccordionItem implements AfterContentInit, OnDestroy {}

A directive that wraps an accordion item: a toggleable header + body that collapses.
You can get hold of the NgbAccordionItem instance in the template with #item="ngbAccordionItem". It allows to check if the item is collapsed or not, toggle the collapse state, etc.
Every accordion item has a string ID that is automatically generated in the ngb-accordion-item-XX format, unless provided explicitly.
14.1.0

constructor

constructor(_accordion: NgbAccordionDirective, _cd: ChangeDetectorRef);

property animatingBodyCollapse

animatingBodyCollapse: boolean;

property collapsed

collapsed: boolean;

property collapseId

readonly collapseId: string;

property destroyOnHide

destroyOnHide: boolean;

If true, the content of the accordion item's body will be removed from the DOM. It will be just hidden otherwise.
This property can also be set up on the parent [NgbAccordion directive](#/components/accordion/api#NgbAccordionDirective).

property disabled

disabled: boolean;

If true, the accordion item will be disabled. It won't react to user's clicks, but still will be toggelable programmatically.

property hidden

hidden: EventEmitter<void>;

Event emitted when the collapsing animation is finished and before the content is removed from DOM. It has no payload.

property id

id: string;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionItem,
    '[ngbAccordionItem]',
    ['ngbAccordionItem'],
    {
        id: { alias: 'ngbAccordionItem'; required: false };
        destroyOnHide: { alias: 'destroyOnHide'; required: false };
        disabled: { alias: 'disabled'; required: false };
        collapsed: { alias: 'collapsed'; required: false };
    },
    { shown: 'shown'; hidden: 'hidden' },
    ['_collapse'],
    never,
    true,
    never
>;

property ɵfac

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

property shown

shown: EventEmitter<void>;

Event emitted when the expanding animation is finished. It has no payload.

property toggleId

readonly toggleId: string;

method collapse

collapse: () => void;

Collapses an accordion item.

method expand

expand: () => void;

Expands an accordion item.

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method toggle

toggle: () => void;

Toggles an accordion item.

class NgbAccordionModule

class NgbAccordionModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbAccordionModule,
    never,
    [
        typeof i1.NgbAccordion,
        typeof i1.NgbPanel,
        typeof i1.NgbPanelTitle,
        typeof i1.NgbPanelContent,
        typeof i1.NgbPanelHeader,
        typeof i1.NgbPanelToggle,
        typeof i2.NgbAccordionButton,
        typeof i2.NgbAccordionDirective,
        typeof i2.NgbAccordionItem,
        typeof i2.NgbAccordionHeader,
        typeof i2.NgbAccordionToggle,
        typeof i2.NgbAccordionBody,
        typeof i2.NgbAccordionCollapse
    ],
    [
        typeof i1.NgbAccordion,
        typeof i1.NgbPanel,
        typeof i1.NgbPanelTitle,
        typeof i1.NgbPanelContent,
        typeof i1.NgbPanelHeader,
        typeof i1.NgbPanelToggle,
        typeof i2.NgbAccordionButton,
        typeof i2.NgbAccordionDirective,
        typeof i2.NgbAccordionItem,
        typeof i2.NgbAccordionHeader,
        typeof i2.NgbAccordionToggle,
        typeof i2.NgbAccordionBody,
        typeof i2.NgbAccordionCollapse
    ]
>;

class NgbAccordionToggle

class NgbAccordionToggle {}

A directive to put on a toggling element inside the accordion item's header. It will register click handlers that toggle the associated panel and will handle accessibility attributes.
This directive is used internally by the [NgbAccordionButton directive](#/components/accordion/api#NgbAccordionButton).
14.1.0

constructor

constructor(item: NgbAccordionItem, accordion: NgbAccordionDirective);

property accordion

accordion: NgbAccordionDirective;

property item

item: NgbAccordionItem;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbAccordionToggle,
    '[ngbAccordionToggle]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class NgbActiveModal

class NgbActiveModal {}

A reference to the currently opened (active) modal.
Instances of this class can be injected into your component passed as modal content. So you can .update(), .close() or .dismiss() the modal window from your component.

method close

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

Closes the modal with an optional result value.
The NgbModalRef.result promise will be resolved with the provided value.

method dismiss

dismiss: (reason?: any) => void;

Dismisses the modal with an optional reason value.
The NgbModalRef.result promise will be rejected with the provided value.

method update

update: (options: NgbModalUpdatableOptions) => void;

Updates options of an opened modal.
14.2.0

class NgbActiveOffcanvas

class NgbActiveOffcanvas {}

A reference to the currently opened (active) offcanvas.
Instances of this class can be injected into your component passed as offcanvas content. So you can .close() or .dismiss() the offcanvas window from your component.
12.1.0

method close

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

Closes the offcanvas with an optional result value.
The NgbOffcanvasRef.result promise will be resolved with the provided value.

method dismiss

dismiss: (reason?: any) => void;

Dismisses the offcanvas with an optional reason value.
The NgbOffcanvasRef.result promise will be rejected with the provided value.

class NgbAlert

class NgbAlert implements OnInit, OnChanges {}

Alert is a component to provide contextual feedback messages for user.
It supports several alert types and can be dismissed.

constructor

constructor(
    config: NgbAlertConfig,
    _renderer: Renderer2,
    _element: ElementRef,
    _zone: NgZone
);

property animation

animation: boolean;

If true, alert closing will be animated.
Animation is triggered only when clicked on the close button (×) or via the .close() function
8.0.0

property closed

closed: EventEmitter<void>;

An event emitted when the close button is clicked. It has no payload and only relevant for dismissible alerts.
8.0.0

property dismissible

dismissible: boolean;

If true, alert can be dismissed by the user.
The close button (×) will be displayed and you can be notified of the event with the (close) output.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbAlert,
    'ngb-alert',
    ['ngbAlert'],
    {
        animation: { alias: 'animation'; required: false };
        dismissible: { alias: 'dismissible'; required: false };
        type: { alias: 'type'; required: false };
    },
    { closed: 'closed' },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property type

type: string;

Type of the alert.
Bootstrap provides styles for the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.

method close

close: () => Observable<void>;

Triggers alert closing programmatically (same as clicking on the close button (×)).
The returned observable will emit and be completed once the closing transition has finished. If the animations are turned off this happens synchronously.
Alternatively you could listen or subscribe to the (closed) output
8.0.0

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

class NgbAlertConfig

class NgbAlertConfig {}

A configuration service for the [NgbAlert](#/components/alert/api#NgbAlert) component.
You can inject this service, typically in your root component, and customize its properties to provide default values for all alerts used in the application.

constructor

constructor(_ngbConfig: NgbConfig);

property animation

animation: boolean;

property dismissible

dismissible: boolean;

property ɵfac

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

property ɵprov

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

property type

type: string;

class NgbAlertModule

class NgbAlertModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbCalendar

abstract class NgbCalendar {}

A service that represents the calendar used by the datepicker.
The default implementation uses the Gregorian calendar. You can inject it in your own implementations if necessary to simplify NgbDate calculations.

property ɵfac

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

property ɵprov

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

method getDaysPerWeek

abstract getDaysPerWeek: () => number;

Returns the number of days per week.

method getMonths

abstract getMonths: (year?: number) => number[];

Returns an array of months per year.
With default calendar we use ISO 8601 and return [1, 2, ..., 12];

method getNext

abstract getNext: (
    date: NgbDate,
    period?: NgbPeriod,
    number?: number
) => NgbDate;

Adds a number of years, months or days to a given date.
* period can be y, m or d and defaults to day. * number defaults to 1.
Always returns a new date.

method getPrev

abstract getPrev: (
    date: NgbDate,
    period?: NgbPeriod,
    number?: number
) => NgbDate;

Subtracts a number of years, months or days from a given date.
* period can be y, m or d and defaults to day. * number defaults to 1.
Always returns a new date.

method getToday

abstract getToday: () => NgbDate;

Returns the today's date.

method getWeekday

abstract getWeekday: (date: NgbDate) => number;

Returns the weekday number for a given day.
With the default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun

method getWeekNumber

abstract getWeekNumber: (
    week: readonly NgbDate[],
    firstDayOfWeek: number
) => number;

Returns the week number for a given week.

method getWeeksPerMonth

abstract getWeeksPerMonth: () => number;

Returns the number of weeks per month.

method isValid

abstract isValid: (date?: NgbDate | null) => boolean;

Checks if a date is valid in the current calendar.

class NgbCalendarBuddhist

class NgbCalendarBuddhist extends NgbCalendarGregorian {}

9.1.0

property ɵfac

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

property ɵprov

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

method getNext

getNext: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getPrev

getPrev: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getToday

getToday: () => NgbDate;

method getWeekday

getWeekday: (date: NgbDate) => number;

method getWeekNumber

getWeekNumber: (week: readonly NgbDate[], firstDayOfWeek: number) => number;

method isValid

isValid: (date?: NgbDate | null) => boolean;

class NgbCalendarGregorian

class NgbCalendarGregorian extends NgbCalendar {}

property ɵfac

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

property ɵprov

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

method getDaysPerWeek

getDaysPerWeek: () => number;

method getMonths

getMonths: () => number[];

method getNext

getNext: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getPrev

getPrev: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getToday

getToday: () => NgbDate;

method getWeekday

getWeekday: (date: NgbDate) => number;

method getWeekNumber

getWeekNumber: (week: readonly NgbDate[], firstDayOfWeek: number) => number;

method getWeeksPerMonth

getWeeksPerMonth: () => number;

method isValid

isValid: (date?: NgbDate | null) => boolean;

class NgbCalendarHebrew

class NgbCalendarHebrew extends NgbCalendar {}

3.2.0

property ɵfac

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

property ɵprov

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

method fromGregorian

fromGregorian: (date: NgbDate) => NgbDate;

3.4.0

method getDaysPerWeek

getDaysPerWeek: () => number;

method getMonths

getMonths: (year?: number) => number[];

method getNext

getNext: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getPrev

getPrev: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getToday

getToday: () => NgbDate;

method getWeekday

getWeekday: (date: NgbDate) => number;

method getWeekNumber

getWeekNumber: (week: readonly NgbDate[], firstDayOfWeek: number) => number;

method getWeeksPerMonth

getWeeksPerMonth: () => number;

method isValid

isValid: (date?: NgbDate | null) => boolean;

method toGregorian

toGregorian: (date: NgbDate) => NgbDate;

3.4.0

class NgbCalendarIslamicCivil

class NgbCalendarIslamicCivil extends NgbCalendarHijri {}

property ɵfac

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

property ɵprov

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

method fromGregorian

fromGregorian: (gDate: Date) => NgbDate;

Returns the equivalent islamic(civil) date value for a give input Gregorian date. gDate is a JS Date to be converted to Hijri.

method getDaysPerMonth

getDaysPerMonth: (month: number, year: number) => number;

Returns the number of days in a specific Hijri month. month is 1 for Muharram, 2 for Safar, etc. year is any Hijri year.

method toGregorian

toGregorian: (hDate: NgbDate) => Date;

Returns the equivalent JS date value for a give input islamic(civil) date. hDate is an islamic(civil) date to be converted to Gregorian.

class NgbCalendarIslamicUmalqura

class NgbCalendarIslamicUmalqura extends NgbCalendarIslamicCivil {}

property ɵfac

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

property ɵprov

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

method fromGregorian

fromGregorian: (gDate: Date) => NgbDate;

Returns the equivalent islamic(Umalqura) date value for a give input Gregorian date. gdate is s JS Date to be converted to Hijri.

method getDaysPerMonth

getDaysPerMonth: (hMonth: number, hYear: number) => number;

Returns the number of days in a specific Hijri hMonth. hMonth is 1 for Muharram, 2 for Safar, etc. hYear is any Hijri hYear.

method toGregorian

toGregorian: (hDate: NgbDate) => Date;

Converts the current Hijri date to Gregorian.

class NgbCalendarPersian

class NgbCalendarPersian extends NgbCalendar {}

property ɵfac

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

property ɵprov

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

method getDaysPerWeek

getDaysPerWeek: () => number;

method getMonths

getMonths: () => number[];

method getNext

getNext: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getPrev

getPrev: (date: NgbDate, period?: NgbPeriod, number?: number) => NgbDate;

method getToday

getToday: () => NgbDate;

method getWeekday

getWeekday: (date: NgbDate) => number;

method getWeekNumber

getWeekNumber: (week: readonly NgbDate[], firstDayOfWeek: number) => number;

method getWeeksPerMonth

getWeeksPerMonth: () => number;

method isValid

isValid: (date?: NgbDate | null) => boolean;

class NgbCarousel

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

Carousel is a component to easily create and control slideshows.
Allows to set intervals, change the way user interacts with the slides and provides a programmatic API.

constructor

constructor(
    config: NgbCarouselConfig,
    _platformId: any,
    _ngZone: NgZone,
    _cd: ChangeDetectorRef,
    _container: ElementRef
);

property activeId

activeId: string;

The slide id that should be displayed **initially**.
For subsequent interactions use methods select(), next(), etc. and the (slide) output.

property animation

animation: boolean;

A flag to enable/disable the animations.
8.0.0

property focused

focused: boolean;

property interval

interval: number;

property keyboard

keyboard: boolean;

If true, allows to interact with carousel using keyboard 'arrow left' and 'arrow right'.

property mouseHover

mouseHover: boolean;

property NgbSlideEventSource

NgbSlideEventSource: typeof NgbSlideEventSource;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbCarousel,
    'ngb-carousel',
    ['ngbCarousel'],
    {
        animation: { alias: 'animation'; required: false };
        activeId: { alias: 'activeId'; required: false };
        interval: { alias: 'interval'; required: false };
        wrap: { alias: 'wrap'; required: false };
        keyboard: { alias: 'keyboard'; required: false };
        pauseOnHover: { alias: 'pauseOnHover'; required: false };
        pauseOnFocus: { alias: 'pauseOnFocus'; required: false };
        showNavigationArrows: { alias: 'showNavigationArrows'; required: false };
        showNavigationIndicators: {
            alias: 'showNavigationIndicators';
            required: false;
        };
    },
    { slide: 'slide'; slid: 'slid' },
    ['slides'],
    never,
    true,
    never
>;

property ɵfac

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

property pauseOnFocus

pauseOnFocus: boolean;

property pauseOnHover

pauseOnHover: boolean;

property showNavigationArrows

showNavigationArrows: boolean;

If true, 'previous' and 'next' navigation arrows will be visible on the slide.
2.2.0

property showNavigationIndicators

showNavigationIndicators: boolean;

If true, navigation indicators at the bottom of the slide will be visible.
2.2.0

property slid

slid: EventEmitter<NgbSlideEvent>;

An event emitted right after the slide transition is completed.
See [NgbSlideEvent](#/components/carousel/api#NgbSlideEvent) for payload details.
8.0.0

property slide

slide: EventEmitter<NgbSlideEvent>;

An event emitted just before the slide transition starts.
See [NgbSlideEvent](#/components/carousel/api#NgbSlideEvent) for payload details.

property slides

slides: QueryList<NgbSlide>;

property wrap

wrap: boolean;

method arrowLeft

arrowLeft: () => void;

method arrowRight

arrowRight: () => void;

method cycle

cycle: () => void;

Restarts cycling through the slides from start to end.

method focus

focus: () => void;

Set the focus on the carousel.

method next

next: (source?: NgbSlideEventSource) => void;

Navigates to the next slide.

method ngAfterContentChecked

ngAfterContentChecked: () => void;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method pause

pause: () => void;

Pauses cycling through the slides.

method prev

prev: (source?: NgbSlideEventSource) => void;

Navigates to the previous slide.

method select

select: (slideId: string, source?: NgbSlideEventSource) => void;

Navigates to a slide with the specified identifier.

class NgbCarouselConfig

class NgbCarouselConfig {}

A configuration service for the [NgbCarousel](#/components/carousel/api#NgbCarousel) component.
You can inject this service, typically in your root component, and customize its properties to provide default values for all carousels used in the application.

constructor

constructor(_ngbConfig: NgbConfig);

property animation

animation: boolean;

property interval

interval: number;

property keyboard

keyboard: boolean;

property ɵfac

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

property ɵprov

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

property pauseOnFocus

pauseOnFocus: boolean;

property pauseOnHover

pauseOnHover: boolean;

property showNavigationArrows

showNavigationArrows: boolean;

property showNavigationIndicators

showNavigationIndicators: boolean;

property wrap

wrap: boolean;

class NgbCarouselModule

class NgbCarouselModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbCarouselModule,
    never,
    [typeof i1.NgbCarousel, typeof i1.NgbSlide],
    [typeof i1.NgbCarousel, typeof i1.NgbSlide]
>;

class NgbCollapse

class NgbCollapse implements OnInit {}

A directive to provide a simple way of hiding and showing elements on the page.

constructor

constructor(_element: ElementRef, config: NgbCollapseConfig, _zone: NgZone);

property animation

animation: any;

If true, collapse will be animated.
Animation is triggered only when clicked on triggering element or via the .toggle() function
8.0.0

property hidden

hidden: EventEmitter<void>;

An event emitted when the collapse element is hidden, after the transition. It has no payload.
8.0.0

property horizontal

horizontal: boolean;

If true, will collapse horizontally.
13.1.0

property ngbCollapseChange

ngbCollapseChange: EventEmitter<boolean>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbCollapse,
    '[ngbCollapse]',
    ['ngbCollapse'],
    {
        animation: { alias: 'animation'; required: false };
        collapsed: { alias: 'ngbCollapse'; required: false };
        horizontal: { alias: 'horizontal'; required: false };
    },
    { ngbCollapseChange: 'ngbCollapseChange'; shown: 'shown'; hidden: 'hidden' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property shown

shown: EventEmitter<void>;

An event emitted when the collapse element is shown, after the transition. It has no payload.
8.0.0

method ngOnInit

ngOnInit: () => void;

method toggle

toggle: (open?: boolean) => void;

Triggers collapsing programmatically.
If there is a collapsing transition running already, it will be reversed. If the animations are turned off this happens synchronously.
8.0.0

class NgbCollapseConfig

class NgbCollapseConfig {}

A configuration service for the [NgbCollapse](#/components/collapse/api#NgbCollapse) component.
You can inject this service, typically in your root component, and customize its properties to provide default values for all collapses used in the application.

constructor

constructor(_ngbConfig: NgbConfig);

property animation

animation: boolean;

property horizontal

horizontal: boolean;

property ɵfac

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

property ɵprov

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

class NgbCollapseModule

class NgbCollapseModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbConfig

class NgbConfig {}

Global ng-bootstrap config
8.0.0

property animation

animation: boolean;

property ɵfac

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

property ɵprov

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

class NgbDate

class NgbDate implements NgbDateStruct {}

A simple class that represents a date that datepicker also uses internally.
It is the implementation of the NgbDateStruct interface that adds some convenience methods, like .equals(), .before(), etc.
All datepicker APIs consume NgbDateStruct, but return NgbDate.
In many cases it is simpler to manipulate these objects together with [NgbCalendar](#/components/datepicker/api#NgbCalendar) than native JS Dates.
See the [date format overview](#/components/datepicker/overview#date-model) for more details.
3.0.0

constructor

constructor(year: number, month: number, day: number);

property day

day: number;

The day of month, starting with 1

property month

month: number;

The month, for example 1=Jan ... 12=Dec as in ISO 8601

property year

year: number;

The year, for example 2016

method after

after: (other?: NgbDateStruct | null) => boolean;

Checks if the current date is after another date.

method before

before: (other?: NgbDateStruct | null) => boolean;

Checks if the current date is before another date.

method equals

equals: (other?: NgbDateStruct | null) => boolean;

Checks if the current date is equal to another date.

method from

static from: (date?: NgbDateStruct | null) => NgbDate | null;

A **static method** that creates a new date object from the NgbDateStruct,
ex. NgbDate.from({year: 2000, month: 5, day: 1}).
If the date is already of NgbDate type, the method will return the same object.

class NgbDateAdapter

abstract class NgbDateAdapter<D> {}

An abstract service that does the conversion between the internal datepicker NgbDateStruct model and any provided user date model D, ex. a string, a native date, etc.
The adapter is used **only** for conversion when binding datepicker to a form control, ex. [(ngModel)]="userDateModel". Here userDateModel can be of any type.
The default datepicker implementation assumes we use NgbDateStruct as a user model.
See the [date format overview](#/components/datepicker/overview#date-model) for more details and the [custom adapter demo](#/components/datepicker/examples#adapter) for an example.

property ɵfac

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

property ɵprov

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

method fromModel

abstract fromModel: (value: D | null) => NgbDateStruct | null;

Converts a user-model date of type D to an NgbDateStruct for internal use.

method toModel

abstract toModel: (date: NgbDateStruct | null) => D | null;

Converts an internal NgbDateStruct date to a user-model date of type D.

class NgbDateNativeAdapter

class NgbDateNativeAdapter extends NgbDateAdapter<Date> {}

[NgbDateAdapter](#/components/datepicker/api#NgbDateAdapter) implementation that uses native javascript dates as a user date model.

property ɵfac

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

property ɵprov

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

method fromModel

fromModel: (date: Date | null) => NgbDateStruct | null;

Converts a native Date to a NgbDateStruct.

method toModel

toModel: (date: NgbDateStruct | null) => Date | null;

Converts a NgbDateStruct to a native Date.

class NgbDateNativeUTCAdapter

class NgbDateNativeUTCAdapter extends NgbDateNativeAdapter {}

Same as [NgbDateNativeAdapter](#/components/datepicker/api#NgbDateNativeAdapter), but with UTC dates.
3.2.0

property ɵfac

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

property ɵprov

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

class NgbDateParserFormatter

abstract class NgbDateParserFormatter {}

An abstract service for parsing and formatting dates for the [NgbInputDatepicker](#/components/datepicker/api#NgbInputDatepicker) directive. Converts between the internal NgbDateStruct model presentation and a string that is displayed in the input element.
When user types something in the input this service attempts to parse it into a NgbDateStruct object. And vice versa, when users selects a date in the calendar with the mouse, it must be displayed as a string in the input.
Default implementation uses the ISO 8601 format, but you can provide another implementation via DI to use an alternative string format or a custom parsing logic.
See the [date format overview](#/components/datepicker/overview#date-model) for more details.

property ɵfac

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

property ɵprov

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

method format

abstract format: (date: NgbDateStruct | null) => string;

Formats the given NgbDateStruct to a string.
Implementations should return an empty string if the given date is null, and try their best to provide a partial result if the given date is incomplete or invalid.

method parse

abstract parse: (value: string) => NgbDateStruct | null;

Parses the given string to an NgbDateStruct.
Implementations should try their best to provide a result, even partial. They must return null if the value can't be parsed.

class NgbDatepicker

class NgbDatepicker
    implements AfterViewInit, OnDestroy, OnChanges, OnInit, ControlValueAccessor {}

A highly configurable component that helps you with selecting calendar dates.
NgbDatepicker is meant to be displayed inline on a page or put inside a popup.

constructor

constructor(
    _service: NgbDatepickerService,
    _calendar: NgbCalendar,
    _i18n: NgbDatepickerI18n,
    config: NgbDatepickerConfig,
    cd: ChangeDetectorRef,
    _elementRef: ElementRef<HTMLElement>,
    _ngbDateAdapter: NgbDateAdapter<any>,
    _ngZone: NgZone
);

property calendar

readonly calendar: NgbCalendar;

Returns the calendar service used in the specific datepicker instance.
5.3.0

property contentTemplate

contentTemplate: TemplateRef<ContentTemplateContext>;

The reference to a custom content template.
Allows to completely override the way datepicker displays months.
See [NgbDatepickerContent](#/components/datepicker/api#NgbDatepickerContent) and [ContentTemplateContext](#/components/datepicker/api#ContentTemplateContext) for more details.
14.2.0

property contentTemplateFromContent

contentTemplateFromContent?: NgbDatepickerContent;

property dateSelect

dateSelect: EventEmitter<NgbDate>;

An event emitted when user selects a date using keyboard or mouse.
The payload of the event is currently selected NgbDate.
5.2.0

property dayTemplate

dayTemplate: TemplateRef<DayTemplateContext>;

The reference to a custom template for the day.
Allows to completely override the way a day 'cell' in the calendar is displayed.
See [DayTemplateContext](#/components/datepicker/api#DayTemplateContext) for the data you get inside.

property dayTemplateData

dayTemplateData: (
    date: NgbDate,
    current?: { year: number; month: number }
) => any;

The callback to pass any arbitrary data to the template cell via the [DayTemplateContext](#/components/datepicker/api#DayTemplateContext)'s data parameter.
current is the month that is currently displayed by the datepicker.
3.3.0

property displayMonths

displayMonths: number;

The number of months to display.

property firstDayOfWeek

firstDayOfWeek: number;

The first day of the week.
With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun.

property footerTemplate

footerTemplate: TemplateRef<any>;

The reference to the custom template for the datepicker footer.
3.3.0

property i18n

readonly i18n: NgbDatepickerI18n;

Returns the i18n service used in the specific datepicker instance.
14.2.0

property injector

protected injector: Injector;

property markDisabled

markDisabled: (
    date: NgbDate,
    current?: { year: number; month: number }
) => boolean;

The callback to mark some dates as disabled.
It is called for each new date when navigating to a different month.
current is the month that is currently displayed by the datepicker.

property maxDate

maxDate: NgbDateStruct;

The latest date that can be displayed or selected.
If not provided, 'year' select box will display 10 years after the current month.

property minDate

minDate: NgbDateStruct;

The earliest date that can be displayed or selected.
If not provided, 'year' select box will display 10 years before the current month.

property model

model: DatepickerViewModel;

property navigate

navigate: EventEmitter<NgbDatepickerNavigateEvent>;

An event emitted right before the navigation happens and displayed month changes.
See [NgbDatepickerNavigateEvent](#/components/datepicker/api#NgbDatepickerNavigateEvent) for the payload info.

navigation: 'select' | 'arrows' | 'none';

Navigation type.
* "select" - select boxes for month and navigation arrows * "arrows" - only navigation arrows * "none" - no navigation visible at all

property ngAcceptInputType_autoClose

static ngAcceptInputType_autoClose: string | boolean;

property ngAcceptInputType_navigation

static ngAcceptInputType_navigation: string;

property ngAcceptInputType_outsideDays

static ngAcceptInputType_outsideDays: string;

property ngAcceptInputType_weekdays

static ngAcceptInputType_weekdays: number | boolean;

property onChange

onChange: (_: any) => void;

property onTouched

onTouched: () => void;

property outsideDays

outsideDays: 'hidden' | 'visible' | 'collapsed';

The way of displaying days that don't belong to the current month.
* "visible" - days are visible * "hidden" - days are hidden, white space preserved * "collapsed" - days are collapsed, so the datepicker height might change between months
For the 2+ months view, days in between months are never shown.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbDatepicker,
    'ngb-datepicker',
    ['ngbDatepicker'],
    {
        contentTemplate: { alias: 'contentTemplate'; required: false };
        dayTemplate: { alias: 'dayTemplate'; required: false };
        dayTemplateData: { alias: 'dayTemplateData'; required: false };
        displayMonths: { alias: 'displayMonths'; required: false };
        firstDayOfWeek: { alias: 'firstDayOfWeek'; required: false };
        footerTemplate: { alias: 'footerTemplate'; required: false };
        markDisabled: { alias: 'markDisabled'; required: false };
        maxDate: { alias: 'maxDate'; required: false };
        minDate: { alias: 'minDate'; required: false };
        navigation: { alias: 'navigation'; required: false };
        outsideDays: { alias: 'outsideDays'; required: false };
        showWeekNumbers: { alias: 'showWeekNumbers'; required: false };
        startDate: { alias: 'startDate'; required: false };
        weekdays: { alias: 'weekdays'; required: false };
    },
    { navigate: 'navigate'; dateSelect: 'dateSelect' },
    ['contentTemplateFromContent'],
    never,
    true,
    never
>;

property ɵfac

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

property showWeekNumbers

showWeekNumbers: boolean;

If true, week numbers will be displayed.

property startDate

startDate: { year: number; month: number; day?: number };

The date to open calendar with.
With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec. If nothing or invalid date is provided, calendar will open with current month.
You could use navigateTo(date) method as an alternative.

property state

readonly state: NgbDatepickerState;

Returns the readonly public state of the datepicker
5.2.0

property weekdays

weekdays: any;

The way weekdays should be displayed.
* true - weekdays are displayed using default width * false - weekdays are not displayed * TranslationWidth - weekdays are displayed using specified width
9.1.0

method focus

focus: () => void;

method focusDate

focusDate: (date?: NgbDateStruct | null) => void;

Focuses on given date.

method focusSelect

focusSelect: () => void;

Selects focused date.

method navigateTo

navigateTo: (date?: { year: number; month: number; day?: number }) => void;

Navigates to the provided date.
With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec. If nothing or invalid date provided calendar will open current month.
Use the [startDate] input as an alternative.

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onDateSelect

onDateSelect: (date: NgbDate) => void;

method onNavigateDateSelect

onNavigateDateSelect: (date: NgbDate) => void;

method onNavigateEvent

onNavigateEvent: (event: NavigationEvent) => void;

method registerOnChange

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

method registerOnTouched

registerOnTouched: (fn: () => any) => void;

method setDisabledState

setDisabledState: (disabled: boolean) => void;

method writeValue

writeValue: (value: any) => void;

class NgbDatepickerConfig

class NgbDatepickerConfig {}

A configuration service for the [NgbDatepicker](#/components/datepicker/api#NgbDatepicker) component.
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 datepickers used in the application.

property dayTemplate

dayTemplate: TemplateRef<DayTemplateContext>;

property dayTemplateData

dayTemplateData: (
    date: NgbDateStruct,
    current?: { year: number; month: number }
) => any;

property displayMonths

displayMonths: number;

property firstDayOfWeek

firstDayOfWeek: number;

property footerTemplate

footerTemplate: TemplateRef<any>;

property markDisabled

markDisabled: (
    date: NgbDateStruct,
    current?: { year: number; month: number }
) => boolean;

property maxDate

maxDate: NgbDateStruct;

property minDate

minDate: NgbDateStruct;

navigation: 'select' | 'arrows' | 'none';

property outsideDays

outsideDays: 'hidden' | 'visible' | 'collapsed';

property ɵfac

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

property ɵprov

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

property showWeekNumbers

showWeekNumbers: boolean;

property startDate

startDate: { year: number; month: number };

property weekdays

weekdays: any;

class NgbDatepickerContent

class NgbDatepickerContent {}

A directive that marks the content template that customizes the way datepicker months are displayed
5.3.0

constructor

constructor(templateRef: TemplateRef<any>);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbDatepickerContent,
    'ng-template[ngbDatepickerContent]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbDatepickerI18n

abstract class NgbDatepickerI18n {}

A service supplying i18n data to the datepicker component.
The default implementation of this service uses the Angular locale and registered locale data for weekdays and month names (as explained in the Angular i18n guide).
It also provides a way to i18n data that depends on calendar calculations, like aria labels, day, week and year numerals. For other static labels the datepicker uses the default Angular i18n.
See the [i18n demo](#/components/datepicker/examples#i18n) and [Hebrew calendar demo](#/components/datepicker/calendars#hebrew) on how to extend this class and define a custom provider for i18n.

property ɵfac

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

property ɵprov

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

method getDayAriaLabel

abstract getDayAriaLabel: (date: NgbDateStruct) => string;

Returns the value of the aria-label attribute for a specific date.
2.0.0

method getDayNumerals

getDayNumerals: (date: NgbDateStruct) => string;

Returns the textual representation of a day that is rendered in a day cell.
3.0.0

method getMonthFullName

abstract getMonthFullName: (month: number, year?: number) => string;

Returns the full month name to display in the date picker navigation.
With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.

method getMonthLabel

getMonthLabel: (date: NgbDateStruct) => string;

Returns the text label to display above the day view.
9.1.0

method getMonthShortName

abstract getMonthShortName: (month: number, year?: number) => string;

Returns the short month name to display in the date picker navigation.
With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.

method getWeekdayLabel

abstract getWeekdayLabel: (weekday: number, width?: TranslationWidth) => string;

Returns the weekday label using specified width
9.1.0

method getWeekLabel

getWeekLabel: () => string;

Returns the week label to display in the heading of the month view.
9.1.0

method getWeekNumerals

getWeekNumerals: (weekNumber: number) => string;

Returns the textual representation of a week number rendered by datepicker.
3.0.0

method getYearNumerals

getYearNumerals: (year: number) => string;

Returns the textual representation of a year that is rendered in the datepicker year select box.
3.0.0

class NgbDatepickerI18nDefault

class NgbDatepickerI18nDefault extends NgbDatepickerI18n {}

A service providing default implementation for the datepicker i18n. It can be used as a base implementation if necessary.
9.1.0

constructor

constructor(_locale: string);

property ɵfac

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

property ɵprov

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

method getDayAriaLabel

getDayAriaLabel: (date: NgbDateStruct) => string;

method getMonthFullName

getMonthFullName: (month: number) => string;

method getMonthShortName

getMonthShortName: (month: number) => string;

method getWeekdayLabel

getWeekdayLabel: (weekday: number, width?: TranslationWidth) => string;

class NgbDatepickerI18nHebrew

class NgbDatepickerI18nHebrew extends NgbDatepickerI18n {}

3.2.0

property ɵfac

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

property ɵprov

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

method getDayAriaLabel

getDayAriaLabel: (date: NgbDateStruct) => string;

method getDayNumerals

getDayNumerals: (date: NgbDateStruct) => string;

method getMonthFullName

getMonthFullName: (month: number, year?: number) => string;

method getMonthShortName

getMonthShortName: (month: number, year?: number) => string;

method getWeekdayLabel

getWeekdayLabel: (weekday: number, width?: TranslationWidth) => string;

method getWeekNumerals

getWeekNumerals: (weekNumber: number) => string;

method getYearNumerals

getYearNumerals: (year: number) => string;

class NgbDatepickerKeyboardService

class NgbDatepickerKeyboardService {}

A service that represents the keyboard navigation.
Default keyboard shortcuts [are documented in the overview](#/components/datepicker/overview#keyboard-shortcuts)
5.2.0

property ɵfac

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

property ɵprov

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

method processKey

processKey: (event: KeyboardEvent, datepicker: NgbDatepicker) => void;

Processes a keyboard event.

class NgbDatepickerModule

class NgbDatepickerModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbDatepickerModule,
    never,
    [
        typeof i1.NgbDatepicker,
        typeof i1.NgbDatepickerContent,
        typeof i2.NgbInputDatepicker,
        typeof i1.NgbDatepickerMonth
    ],
    [
        typeof i1.NgbDatepicker,
        typeof i1.NgbDatepickerContent,
        typeof i2.NgbInputDatepicker,
        typeof i1.NgbDatepickerMonth
    ]
>;

class NgbDatepickerMonth

class NgbDatepickerMonth {}

A component that renders one month including all the days, weekdays and week numbers. Can be used inside the <ng-template ngbDatepickerMonths></ng-template> when you want to customize months layout.
For a usage example, see [custom month layout demo](#/components/datepicker/examples#custommonth)
5.3.0

constructor

constructor(
    i18n: NgbDatepickerI18n,
    datepicker: NgbDatepicker,
    _keyboardService: NgbDatepickerKeyboardService,
    _service: NgbDatepickerService
);

property datepicker

datepicker: NgbDatepicker;

property i18n

i18n: NgbDatepickerI18n;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbDatepickerMonth,
    'ngb-datepicker-month',
    never,
    { month: { alias: 'month'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property viewModel

viewModel: MonthViewModel;

method doSelect

doSelect: (day: DayViewModel) => void;

method onKeyDown

onKeyDown: (event: KeyboardEvent) => void;

class NgbDateStructAdapter

class NgbDateStructAdapter extends NgbDateAdapter<NgbDateStruct> {}

property ɵfac

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

property ɵprov

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

method fromModel

fromModel: (date: NgbDateStruct | null) => NgbDateStruct | null;

Converts a NgbDateStruct value into NgbDateStruct value

method toModel

toModel: (date: NgbDateStruct | null) => NgbDateStruct | null;

Converts a NgbDateStruct value into NgbDateStruct value

class NgbDropdown

class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestroy {}

A directive that provides contextual overlays for displaying lists of links and more.

constructor

constructor(
    _changeDetector: ChangeDetectorRef,
    config: NgbDropdownConfig,
    _document: any,
    _ngZone: NgZone,
    _elementRef: ElementRef<HTMLElement>,
    _renderer: Renderer2
);

property autoClose

autoClose: boolean | 'inside' | 'outside';

Indicates whether the dropdown should be closed when clicking one of dropdown items or pressing ESC.
* true - the dropdown will close on both outside and inside (menu) clicks. * false - the dropdown can only be closed manually via close() or toggle() methods. * "inside" - the dropdown will close on inside menu clicks, but not outside clicks. * "outside" - the dropdown will close only on the outside clicks and not on menu clicks.

property container

container: string;

A selector specifying the element the dropdown should be appended to. Currently only supports "body".
4.1.0

property display

display: 'dynamic' | 'static';

Enable or disable the dynamic positioning. The default value is dynamic unless the dropdown is used inside a Bootstrap navbar. If you need custom placement for a dropdown in a navbar, set it to dynamic explicitly. See the [positioning of dropdown](#/positioning#dropdown) and the [navbar demo](/#/components/dropdown/examples#navbar) for more details.
4.2.0

property dropdownClass

dropdownClass: string;

A custom class that is applied only to the ngbDropdownMenu parent element. * In case of the inline dropdown it will be the <div ngbDropdown> * In case of the dropdown with container="body" it will be the <div class="dropdown"> attached to the <body>
Useful mainly when dropdown is attached to the body. If the dropdown is inline just use <div ngbDropdown class="custom-class"> instead.
9.1.0

property ngAcceptInputType_autoClose

static ngAcceptInputType_autoClose: string | boolean;

property ngAcceptInputType_display

static ngAcceptInputType_display: string;

property openChange

openChange: EventEmitter<boolean>;

An event fired when the dropdown is opened or closed.
The event payload is a boolean: * true - the dropdown was opened * false - the dropdown was closed

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbDropdown,
    '[ngbDropdown]',
    ['ngbDropdown'],
    {
        autoClose: { alias: 'autoClose'; required: false };
        dropdownClass: { alias: 'dropdownClass'; required: false };
        _open: { alias: 'open'; required: false };
        placement: { alias: 'placement'; required: false };
        popperOptions: { alias: 'popperOptions'; required: false };
        container: { alias: 'container'; required: false };
        display: { alias: 'display'; required: false };
    },
    { openChange: 'openChange' },
    ['_menu', '_anchor'],
    never,
    true,
    never
>;

property ɵfac

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

property placement

placement: PlacementArray;

The preferred placement of the dropdown, among the [possible values](#/guides/positioning#api).
The default order of preference is "bottom-start bottom-end top-start top-end"
Please see the [positioning overview](#/positioning) for more details.

property popperOptions

popperOptions: (options: Options) => Options;

Allows to change default Popper options when positioning the dropdown. Receives current popper options and returns modified ones.
13.1.0

method close

close: () => void;

Closes the dropdown menu.

method isOpen

isOpen: () => boolean;

Checks if the dropdown menu is open.

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onKeyDown

onKeyDown: (event: KeyboardEvent) => void;

method open

open: () => void;

Opens the dropdown menu.

method toggle

toggle: () => void;

Toggles the dropdown menu.

class NgbDropdownAnchor

class NgbDropdownAnchor {}

A directive to mark an element to which dropdown menu will be anchored.
This is a simple version of the NgbDropdownToggle directive. It plays the same role, but doesn't listen to click events to toggle dropdown menu thus enabling support for events other than click.
1.1.0

constructor

constructor(dropdown: NgbDropdown, _elementRef: ElementRef<HTMLElement>);

dropdown: NgbDropdown;

property nativeElement

nativeElement: HTMLElement;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbDropdownAnchor,
    '[ngbDropdownAnchor]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class NgbDropdownConfig

class NgbDropdownConfig {}

A configuration service for the [NgbDropdown](#/components/dropdown/api#NgbDropdown) component.
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 dropdowns used in the application.

property autoClose

autoClose: boolean | 'inside' | 'outside';

property container

container: string;

property ɵfac

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

property ɵprov

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

property placement

placement: PlacementArray;

property popperOptions

popperOptions: (options: Options) => Options;

class NgbDropdownItem

class NgbDropdownItem {}

A directive you should put on a dropdown item to enable keyboard navigation. Arrow keys will move focus between items marked with this directive.
4.1.0

constructor

constructor(elementRef: ElementRef<HTMLElement>, _renderer: Renderer2);

property disabled

disabled: boolean;

property elementRef

elementRef: ElementRef<HTMLElement>;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: boolean | '';

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbDropdownItem,
    '[ngbDropdownItem]',
    never,
    { disabled: { alias: 'disabled'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class NgbDropdownMenu

class NgbDropdownMenu {}

A directive that wraps dropdown menu content and dropdown items.

constructor

constructor(dropdown: NgbDropdown, _elementRef: ElementRef<HTMLElement>);

dropdown: NgbDropdown;

property isOpen

isOpen: boolean;

property menuItems

menuItems: QueryList<NgbDropdownItem>;

property nativeElement

nativeElement: HTMLElement;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbDropdownMenu,
    '[ngbDropdownMenu]',
    never,
    {},
    {},
    ['menuItems'],
    never,
    true,
    never
>;

property ɵfac

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

property placement

placement: Placement;

class NgbDropdownModule

class NgbDropdownModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbDropdownModule

@ng-bootstrap/ng-bootstrap

Install

Overview

Index

Classes

Interfaces

Enums

Type Aliases

Classes

class NgbAccordion

Deprecated

property activeIds

property animation

property closeOtherPanels

property destroyOnHide

property hidden

property ɵcmp

property ɵfac

property panelChange

property panels

property shown

property type

method collapse

method collapseAll

method expand

method expandAll

method isExpanded

method ngAfterContentChecked

method toggle

class NgbAccordionBody

property ɵdir

property ɵfac

method ngAfterContentChecked

method ngOnDestroy

class NgbAccordionButton

property item

property ɵdir

property ɵfac

class NgbAccordionCollapse

property item

property ngbCollapse

property ɵdir

property ɵfac

class NgbAccordionConfig

property animation

property closeOthers

property ɵfac

property ɵprov

property type

Deprecated

class NgbAccordionDirective

property animation

property closeOthers

property destroyOnHide

property hidden

property ɵdir

property ɵfac

property shown

method collapse

Parameter itemId

method collapseAll

method expand

Parameter itemId

method expandAll

method isExpanded

Parameter itemId

method toggle

Parameter itemId

class NgbAccordionHeader

property item

property ɵdir

property ɵfac

class NgbAccordionItem

property animatingBodyCollapse

property collapsed

property collapseId

property destroyOnHide

property disabled

property hidden

property id