@ng-bootstrap/ng-bootstrap

@ng-bootstrap/ng-bootstrap

Version 17.0.1
Published 2 months ago
3.33 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 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

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

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.

property animation

animation: boolean;

property closeOthers

closeOthers: boolean;

property destroyOnHide

destroyOnHide: boolean;

property ɵfac

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

property ɵprov

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

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

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 hide

hide: EventEmitter<string>;

Event emitted before the collapsing animation starts. The payload is the id of hidden accordion item.
15.1.0

property ɵdir

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

property ɵfac

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

property show

show: EventEmitter<string>;

Event emitted before expanding animation starts. The payload is the id of shown accordion item.
15.1.0

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

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

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

property collapsed

collapsed: boolean;

property collapseId

readonly collapseId: string;

property destroyOnHide

destroyOnHide: boolean;

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 hide

hide: EventEmitter<void>;

Event emitted before the collapsing animation starts. It has no payload.
15.1.0

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 };
    },
    { show: 'show'; shown: 'shown'; hide: 'hide'; hidden: 'hidden' },
    ['_collapse'],
    never,
    true,
    never
>;

property ɵfac

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

property show

show: EventEmitter<void>;

Event emitted before the expanding animation starts. It has no payload.
15.1.0

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 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.NgbAccordionButton,
        typeof i1.NgbAccordionDirective,
        typeof i1.NgbAccordionItem,
        typeof i1.NgbAccordionHeader,
        typeof i1.NgbAccordionToggle,
        typeof i1.NgbAccordionBody,
        typeof i1.NgbAccordionCollapse
    ],
    [
        typeof i1.NgbAccordionButton,
        typeof i1.NgbAccordionDirective,
        typeof i1.NgbAccordionItem,
        typeof i1.NgbAccordionHeader,
        typeof i1.NgbAccordionToggle,
        typeof i1.NgbAccordionBody,
        typeof i1.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

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

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

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 (closed) 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

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.

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 NgbCalendarEthiopian

class NgbCalendarEthiopian extends NgbCalendar {}

16.0.0

property ɵfac

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

property ɵprov

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

method getDaysPerWeek

getDaysPerWeek: () => number;

method getMonths

getMonths: (year?: number | undefined) => 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) => 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 {}

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.

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 id

id: string;

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

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.

property animation

animation: boolean;

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.

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, 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();

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: NgbDateStruct,
    current?: { year: number; month: number } | undefined
) => 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: NgbDateStruct,
    current?: { year: number; month: number } | undefined
) => 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' | 'none' | 'arrows';

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: string | 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 | undefined };

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: boolean | 'narrow' | 'long' | 'short';

The way weekdays should be displayed.
* true - weekdays are displayed using default width * false - weekdays are not displayed * "short" | "long" | "narrow" - 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 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' | 'none' | 'arrows';

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; day?: number };

property weekdays

weekdays: boolean | 'narrow' | 'long' | 'short';

class NgbDatepickerContent

class NgbDatepickerContent {}

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

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?: Exclude<Intl.DateTimeFormatOptions['weekday'], undefined>
) => 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 NgbDatepickerI18nAmharic

class NgbDatepickerI18nAmharic extends NgbDatepickerI18n {}

16.0.0

property ɵfac

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

property ɵprov

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

method getDayAriaLabel

getDayAriaLabel: (date: NgbDateStruct) => string;

method getMonthFullName

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

method getMonthShortName

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

method getWeekdayLabel

getWeekdayLabel: (
    weekday: number,
    width?: Intl.DateTimeFormatOptions['weekday']
) => string;

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

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?: Exclude<Intl.DateTimeFormatOptions['weekday'], undefined>
) => 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?: Intl.DateTimeFormatOptions['weekday']
) => 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

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.

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: any) => any;

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

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 NgbDropdownButtonItem

class NgbDropdownButtonItem {}

A directive that will be applied if dropdown item is a button. It will only set the disabled property.

property item

item: NgbDropdownItem;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbDropdownButtonItem,
    'button[ngbDropdownItem]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgbDropdownButtonItem, 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

property disabled

disabled: boolean;

property nativeElement

nativeElement: HTMLElement;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: boolean | '';

property ɵdir

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

property ɵfac

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

property tabindex

tabindex: string | number;

class NgbDropdownMenu

class NgbDropdownMenu {}

A directive that wraps dropdown menu content and dropdown items.

dropdown: NgbDropdown;

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

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,
    never,
    [
        typeof i1.NgbDropdown,
        typeof i1.NgbDropdownAnchor,
        typeof i1.NgbDropdownToggle,
        typeof i1.NgbDropdownMenu,
        typeof i1.NgbDropdownItem,
        typeof i1.NgbDropdownButtonItem
    ],
    [
        typeof i1.NgbDropdown,
        typeof i1.NgbDropdownAnchor,
        typeof i1.NgbDropdownToggle,
        typeof i1.NgbDropdownMenu,
        typeof i1.NgbDropdownItem,
        typeof i1.NgbDropdownButtonItem
    ]
>;

class NgbDropdownToggle

class NgbDropdownToggle extends NgbDropdownAnchor {}

A directive to mark an element that will toggle dropdown via the click event.
You can also use NgbDropdownAnchor as an alternative.

property ɵdir

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

property ɵfac

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

class NgbHighlight

class NgbHighlight implements OnChanges {}

A component that helps with text highlighting.
It splits the result text into parts that contain the searched term and generates the HTML markup to simplify highlighting:
Ex. result="Alaska" and term="as" will produce Al<span class="ngb-highlight">as</span>ka.

property accentSensitive

accentSensitive: boolean;

Boolean option to determine if the highlighting should be sensitive to accents or not.
This feature is only available for browsers that implement the String.normalize function (typically not Internet Explorer). If you want to use this feature in a browser that does not implement String.normalize, you will have to include a polyfill in your application (unorm for example).
9.1.0

property highlightClass

highlightClass: string;

The CSS class for <span> elements wrapping the term inside the result.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbHighlight,
    'ngb-highlight',
    never,
    {
        highlightClass: { alias: 'highlightClass'; required: false };
        result: { alias: 'result'; required: true };
        term: { alias: 'term'; required: true };
        accentSensitive: { alias: 'accentSensitive'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property parts

parts: string[];

property result

result?: string;

The text highlighting is added to.
If the term is found inside this text, it will be highlighted. If the term contains array then all the items from it will be highlighted inside the text.

property term

term: string | readonly string[];

The term or array of terms to be highlighted. Since version v4.2.0 term could be a string[]

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class NgbInputDatepicker

class NgbInputDatepicker
    implements OnChanges, OnDestroy, ControlValueAccessor, Validator {}

A directive that allows to stick a datepicker popup to an input field.
Manages interaction with the input field itself, does value formatting and provides forms integration.

property autoClose

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

Indicates whether the datepicker popup should be closed automatically after date selection / outside click or not.
* true - the popup will close on both date selection and outside click. * false - the popup can only be closed manually via close() or toggle() methods. * "inside" - the popup will close on date selection, but not outside clicks. * "outside" - the popup will close only on the outside click and not on date selection/inside clicks.
3.0.0

property closed

closed: EventEmitter<void>;

An event fired after closing datepicker window.
4.2.0

property container

container: string;

A selector specifying the element the datepicker popup should be appended to.
Currently only supports "body".

property contentTemplate

contentTemplate: TemplateRef<ContentTemplateContext>;

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

property datepickerClass

datepickerClass: string;

An optional class applied to the datepicker popup element.
9.1.0

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.
1.1.1

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 disabled

disabled: any;

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 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. Also used for form validation.
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. Also used for form validation.
If not provided, 'year' select box will display 10 years before the current month.

property navigate

navigate: EventEmitter<NgbDatepickerNavigateEvent>;

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

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

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_disabled

static ngAcceptInputType_disabled: boolean | '';

property ngAcceptInputType_navigation

static ngAcceptInputType_navigation: string;

property ngAcceptInputType_outsideDays

static ngAcceptInputType_outsideDays: string;

property ngAcceptInputType_weekdays

static ngAcceptInputType_weekdays: string | boolean;

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 ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbInputDatepicker,
    'input[ngbDatepicker]',
    ['ngbDatepicker'],
    {
        autoClose: { alias: 'autoClose'; required: false };
        contentTemplate: { alias: 'contentTemplate'; required: false };
        datepickerClass: { alias: 'datepickerClass'; 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 };
        minDate: { alias: 'minDate'; required: false };
        maxDate: { alias: 'maxDate'; required: false };
        navigation: { alias: 'navigation'; required: false };
        outsideDays: { alias: 'outsideDays'; required: false };
        placement: { alias: 'placement'; required: false };
        popperOptions: { alias: 'popperOptions'; required: false };
        restoreFocus: { alias: 'restoreFocus'; required: false };
        showWeekNumbers: { alias: 'showWeekNumbers'; required: false };
        startDate: { alias: 'startDate'; required: false };
        container: { alias: 'container'; required: false };
        positionTarget: { alias: 'positionTarget'; required: false };
        weekdays: { alias: 'weekdays'; required: false };
        disabled: { alias: 'disabled'; required: false };
    },
    { dateSelect: 'dateSelect'; navigate: 'navigate'; closed: 'closed' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property placement

placement: PlacementArray;

The preferred placement of the datepicker popup, 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: any) => any;

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

property positionTarget

positionTarget: string | HTMLElement;

A css selector or html element specifying the element the datepicker popup should be positioned against.
By default the input is used as a target.
4.2.0

property restoreFocus

restoreFocus: string | true | HTMLElement;

If true, when closing datepicker will focus element that was focused before datepicker was opened.
Alternatively you could provide a selector or an HTMLElement to focus. If the element doesn't exist or invalid, we'll fallback to focus document body.
5.2.0

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 weekdays

weekdays: boolean | 'narrow' | 'long' | 'short';

The way weekdays should be displayed.
* true - weekdays are displayed using default width * false - weekdays are not displayed * "short" | "long" | "narrow" - weekdays are displayed using specified width
9.1.0

method close

close: () => void;

Closes the datepicker popup.

method isOpen

isOpen: () => boolean;

method manualDateChange

manualDateChange: (value: string, updateView?: boolean) => void;

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 ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onBlur

onBlur: () => void;

method onFocus

onFocus: () => void;

method open

open: () => void;

Opens the datepicker popup.
If the related form control contains a valid date, the corresponding month will be opened.

method registerOnChange

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

method registerOnTouched

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

method registerOnValidatorChange

registerOnValidatorChange: (fn: () => void) => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method toggle

toggle: () => void;

Toggles the datepicker popup.

method validate

validate: (c: AbstractControl) => ValidationErrors | null;

method writeValue

writeValue: (value: any) => void;

class NgbInputDatepickerConfig

class NgbInputDatepickerConfig extends NgbDatepickerConfig {}

A configuration service for the [NgbDatepickerInput](#/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 datepicker inputs used in the application.
5.2.0

property autoClose

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

property container

container: string;

property ɵfac

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

property ɵprov

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

property placement

placement: PlacementArray;

property popperOptions

popperOptions: (options: Options) => Options;

property positionTarget

positionTarget: string | HTMLElement;

property restoreFocus

restoreFocus: string | true | HTMLElement;

class NgbModal

class NgbModal {}

A service for opening modal windows.
Creating a modal is straightforward: create a component or a template and pass it as an argument to the .open() method.

property activeInstances

readonly activeInstances: any;

Returns an observable that holds the active modal instances.

property ɵfac

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

property ɵprov

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

method dismissAll

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

Dismisses all currently displayed modal windows with the supplied reason.
3.1.0

method hasOpenModals

hasOpenModals: () => boolean;

Indicates if there are currently any open modal windows in the application.
3.3.0

method open

open: (content: any, options?: NgbModalOptions) => NgbModalRef;

Opens a new modal window with the specified content and supplied options.
Content can be provided as a TemplateRef or a component type. If you pass a component type as content, then instances of those components can be injected with an instance of the NgbActiveModal class. You can then use NgbActiveModal methods to close / dismiss modals from "inside" of your component.
Also see the [NgbModalOptions](#/components/modal/api#NgbModalOptions) for the list of supported options.

class NgbModalConfig

class NgbModalConfig implements Required<NgbModalOptions> {}

A configuration service for the [NgbModal](#/components/modal/api#NgbModal) service.
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 modals used in the application.
3.1.0

property animation

animation: boolean;

property ariaDescribedBy

ariaDescribedBy: string;

property ariaLabelledBy

ariaLabelledBy: string;

property backdrop

backdrop: boolean | 'static';

property backdropClass

backdropClass: string;

property beforeDismiss

beforeDismiss: () => boolean | Promise<boolean>;

property centered

centered: boolean;

property container

container: string | HTMLElement;

property fullscreen

fullscreen: string | boolean;

property injector

injector: Injector;

property keyboard

keyboard: boolean;

property modalDialogClass

modalDialogClass: string;

property ɵfac

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

property ɵprov

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

property scrollable

scrollable: boolean;

property size

size: string;

property windowClass

windowClass: string;

class NgbModalModule

class NgbModalModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbModalRef

class NgbModalRef {}

A reference to the newly opened modal returned by the NgbModal.open() method.

constructor

constructor(
    _windowCmptRef: ComponentRef<NgbModalWindow>,
    _contentRef: ContentRef,
    _backdropCmptRef?: any,
    _beforeDismiss?: () => boolean | Promise<boolean>
);

property closed

readonly closed: Observable<any>;

The observable that emits when the modal is closed via the .close() method.
It will emit the result passed to the .close() method.
8.0.0

property componentInstance

readonly componentInstance: any;

The instance of a component used for the modal content.
When a TemplateRef is used as the content or when the modal is closed, will return undefined.

property dismissed

readonly dismissed: Observable<any>;

The observable that emits when the modal is dismissed via the .dismiss() method.
It will emit the reason passed to the .dismissed() method by the user, or one of the internal reasons like backdrop click or ESC key press.
8.0.0

property hidden

readonly hidden: Observable<void>;

The observable that emits when both modal window and backdrop are closed and animations were finished. At this point modal and backdrop elements will be removed from the DOM tree.
This observable will be completed after emitting.
8.0.0

property result

result: Promise<any>;

The promise that is resolved when the modal is closed and rejected when the modal is dismissed.

property shown

readonly shown: Observable<void>;

The observable that emits when modal is fully visible and animation was finished. Modal DOM element is always available synchronously after calling 'modal.open()' service.
This observable will be completed after emitting. It will not emit, if modal is closed before open animation is finished.
8.0.0

method close

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

Closes the modal with an optional result value.
The NgbMobalRef.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 NgbModule

class NgbModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbModule,
    never,
    [
        typeof i1.NgbAccordionModule,
        typeof i2.NgbAlertModule,
        typeof i3.NgbCarouselModule,
        typeof i4.NgbCollapseModule,
        typeof i5.NgbDatepickerModule,
        typeof i6.NgbDropdownModule,
        typeof i7.NgbModalModule,
        typeof i8.NgbNavModule,
        typeof i9.NgbOffcanvasModule,
        typeof i10.NgbPaginationModule,
        typeof i11.NgbPopoverModule,
        typeof i12.NgbProgressbarModule,
        typeof i13.NgbRatingModule,
        typeof i14.NgbScrollSpyModule,
        typeof i15.NgbTimepickerModule,
        typeof i16.NgbToastModule,
        typeof i17.NgbTooltipModule,
        typeof i18.NgbTypeaheadModule
    ],
    [
        typeof i1.NgbAccordionModule,
        typeof i2.NgbAlertModule,
        typeof i3.NgbCarouselModule,
        typeof i4.NgbCollapseModule,
        typeof i5.NgbDatepickerModule,
        typeof i6.NgbDropdownModule,
        typeof i7.NgbModalModule,
        typeof i8.NgbNavModule,
        typeof i9.NgbOffcanvasModule,
        typeof i10.NgbPaginationModule,
        typeof i11.NgbPopoverModule,
        typeof i12.NgbProgressbarModule,
        typeof i13.NgbRatingModule,
        typeof i14.NgbScrollSpyModule,
        typeof i15.NgbTimepickerModule,
        typeof i16.NgbToastModule,
        typeof i17.NgbTooltipModule,
        typeof i18.NgbTypeaheadModule
    ]
>;

class NgbNav

class NgbNav implements AfterContentInit, OnChanges {}

A nav directive that helps with implementing tabbed navigation components.
5.2.0

constructor

constructor(role: string);

property activeId

activeId: any;

The id of the nav that should be active
You could also use the .select() method and the (navChange) event

property activeIdChange

activeIdChange: EventEmitter<any>;

The event emitted after the active nav changes The payload of the event is the newly active nav id
If you want to prevent nav change, you should use (navChange) event

property animation

animation: boolean;

If true, nav change will be animated.
8.0.0

property destroyOnHide

destroyOnHide: boolean;

If true, non-active nav content will be removed from DOM Otherwise it will just be hidden

property destroyRef

destroyRef: DestroyRef;

property hidden

hidden: EventEmitter<any>;

An event emitted when the fade out transition is finished for one of the items.
Payload of the event is the nav id that was just hidden.
8.0.0

property items

items: QueryList<NgbNavItem>;

property keyboard

keyboard: boolean | 'changeWithArrows';

Keyboard support for nav focus/selection using arrow keys.
* true - navs will be focused using keyboard arrow keys * false - no keyboard support * 'changeWithArrows' - nav will be selected using keyboard arrow keys
See the [list of available keyboard shortcuts](#/components/nav/overview#keyboard-shortcuts).
6.1.0

property links

links: QueryList<NgbNavLinkBase>;

property navChange

navChange: EventEmitter<NgbNavChangeEvent<any>>;

The nav change event emitted right before the nav change happens on user click.
This event won't be emitted if nav is changed programmatically via [activeId] or .select().
See [NgbNavChangeEvent](#/components/nav/api#NgbNavChangeEvent) for payload details.

property navItemChange$

navItemChange$: Subject<NgbNavItem>;

property ngAcceptInputType_orientation

static ngAcceptInputType_orientation: string;

property ngAcceptInputType_roles

static ngAcceptInputType_roles: string | boolean;

property orientation

orientation: 'horizontal' | 'vertical';

The orientation of navs.
Using vertical will also add the aria-orientation attribute

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbNav,
    '[ngbNav]',
    ['ngbNav'],
    {
        activeId: { alias: 'activeId'; required: false };
        animation: { alias: 'animation'; required: false };
        destroyOnHide: { alias: 'destroyOnHide'; required: false };
        orientation: { alias: 'orientation'; required: false };
        roles: { alias: 'roles'; required: false };
        keyboard: { alias: 'keyboard'; required: false };
    },
    {
        activeIdChange: 'activeIdChange';
        shown: 'shown';
        hidden: 'hidden';
        navChange: 'navChange';
    },
    ['items', 'links'],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgbNav, [{ attribute: 'role' }]>;

property role

role: string;

property roles

roles: false | 'tablist';

Role attribute generating strategy: - false - no role attributes will be generated - 'tablist' - 'tablist', 'tab' and 'tabpanel' will be generated (default)

property shown

shown: EventEmitter<any>;

An event emitted when the fade in transition is finished for one of the items.
Payload of the event is the nav id that was just shown.
8.0.0

method click

click: (item: NgbNavItem) => void;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnChanges

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

method onFocusout

onFocusout: ({ relatedTarget }: FocusEvent) => void;

method onKeyDown

onKeyDown: (event: KeyboardEvent) => void;

method select

select: (id: any) => void;

Selects the nav with the given id and shows its associated pane. Any other nav that was previously selected becomes unselected and its associated pane is hidden.

class NgbNavConfig

class NgbNavConfig {}

A configuration service for the [NgbNav](#/components/nav/api#NgbNav) 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 navs used in the application.
5.2.0

property animation

animation: boolean;

property destroyOnHide

destroyOnHide: boolean;

property keyboard

keyboard: boolean | 'changeWithArrows';

property orientation

orientation: 'horizontal' | 'vertical';

property ɵfac

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

property ɵprov

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

property roles

roles: false | 'tablist';

class NgbNavContent

class NgbNavContent {}

This directive must be used to wrap content to be displayed in the nav.
5.2.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbNavItem

class NgbNavItem implements OnInit {}

The directive used to group nav link and related nav content. As well as set nav identifier and some options.
5.2.0

property active

readonly active: boolean;

property contentTpl

contentTpl?: NgbNavContent;

property destroyOnHide

destroyOnHide: any;

If true, non-active current nav item content will be removed from DOM Otherwise it will just be hidden

property disabled

disabled: boolean;

If true, the current nav item is disabled and can't be toggled by user.
Nevertheless disabled nav can be selected programmatically via the .select() method and the [activeId] binding.

property domId

domId: string;

The id used for the DOM elements. Must be unique inside the document in case you have multiple ngbNavs on the page.
Autogenerated as ngb-nav-XXX if not provided.

property hidden

hidden: EventEmitter<void>;

An event emitted when the fade out transition is finished on the related nav content
8.0.0

property id

readonly id: any;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbNavItem,
    '[ngbNavItem]',
    ['ngbNavItem'],
    {
        destroyOnHide: { alias: 'destroyOnHide'; required: false };
        disabled: { alias: 'disabled'; required: false };
        domId: { alias: 'domId'; required: false };
        _id: { alias: 'ngbNavItem'; required: false };
    },
    { shown: 'shown'; hidden: 'hidden' },
    ['contentTpl'],
    never,
    true,
    never
>;

property ɵfac

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

property panelDomId

readonly panelDomId: string;

property shown

shown: EventEmitter<void>;

An event emitted when the fade in transition is finished on the related nav content
8.0.0

method isPanelInDom

isPanelInDom: () => boolean;

method ngOnInit

ngOnInit: () => void;

class NgbNavItemRole

class NgbNavItemRole {}

This directive applies a specific role on a non-container based ngbNavItem.
14.1.0

constructor

constructor(role: string);

property nav

nav: NgbNav;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbNavItemRole,
    '[ngbNavItem]:not(ng-container)',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavItemRole, [{ attribute: 'role' }]>;

property role

role: string;

class NgbNavLink

class NgbNavLink extends NgbNavLinkBase {}

A directive to mark the nav link when used on a link element.
5.2.0

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbNavLink,
    'a[ngbNavLink]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class NgbNavLinkBase

class NgbNavLinkBase {}

constructor

constructor(role: string);

property nativeElement

nativeElement: HTMLElement;

property nav

nav: NgbNav;

property navItem

navItem: NgbNavItem;

property ɵdir

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

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavLinkBase, [{ attribute: 'role' }]>;

property role

role: string;

property tabindex

readonly tabindex: number;

class NgbNavLinkButton

class NgbNavLinkButton extends NgbNavLinkBase {}

A directive to mark the nav link when used on a button element.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbNavLinkButton,
    'button[ngbNavLink]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class NgbNavModule

class NgbNavModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbNavModule,
    never,
    [
        typeof i1.NgbNavContent,
        typeof i1.NgbNav,
        typeof i1.NgbNavItem,
        typeof i1.NgbNavItemRole,
        typeof i1.NgbNavLink,
        typeof i1.NgbNavLinkButton,
        typeof i1.NgbNavLinkBase,
        typeof i2.NgbNavOutlet,
        typeof i2.NgbNavPane
    ],
    [
        typeof i1.NgbNavContent,
        typeof i1.NgbNav,
        typeof i1.NgbNavItem,
        typeof i1.NgbNavItemRole,
        typeof i1.NgbNavLink,
        typeof i1.NgbNavLinkButton,
        typeof i1.NgbNavLinkBase,
        typeof i2.NgbNavOutlet,
        typeof i2.NgbNavPane
    ]
>;

class NgbNavOutlet

class NgbNavOutlet implements AfterViewInit {}

The outlet where currently active nav content will be displayed.
5.2.0

property nav

nav: NgbNav;

Reference to the NgbNav

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbNavOutlet,
    '[ngbNavOutlet]',
    never,
    {
        paneRole: { alias: 'paneRole'; required: false };
        nav: { alias: 'ngbNavOutlet'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property paneRole

paneRole: any;

A role to set on the nav pane

method isPanelTransitioning

isPanelTransitioning: (item: NgbNavItem) => boolean;

method ngAfterViewInit

ngAfterViewInit: () => void;

class NgbNavPane

class NgbNavPane {}

property item

item: NgbNavItem;

property nativeElement

nativeElement: HTMLElement;

property nav

nav: NgbNav;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbNavPane,
    '[ngbNavPane]',
    never,
    {
        item: { alias: 'item'; required: false };
        nav: { alias: 'nav'; required: false };
        role: { alias: 'role'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property role

role: string;

class NgbOffcanvas

class NgbOffcanvas {}

A service for opening an offcanvas.
Creating an offcanvas is straightforward: create a component or a template and pass it as an argument to the .open() method.
12.1.0

property activeInstance

readonly activeInstance: any;

Returns an observable that holds the active offcanvas instance.

property ɵfac

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

property ɵprov

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

method dismiss

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

Dismisses the currently displayed offcanvas with the supplied reason.

method hasOpenOffcanvas

hasOpenOffcanvas: () => boolean;

Indicates if there is currently an open offcanvas in the application.

method open

open: (content: any, options?: NgbOffcanvasOptions) => NgbOffcanvasRef;

Opens a new offcanvas panel with the specified content and supplied options.
Content can be provided as a TemplateRef or a component type. If you pass a component type as content, then instances of those components can be injected with an instance of the NgbActiveOffcanvas class. You can then use NgbActiveOffcanvas methods to close / dismiss offcanvas from "inside" of your component.
Also see the [NgbOffcanvasOptions](#/components/offcanvas/api#NgbOffcanvasOptions) for the list of supported options.

class NgbOffcanvasConfig

class NgbOffcanvasConfig implements Required<NgbOffcanvasOptions> {}

A configuration service for the [NgbOffcanvas](#/components/offcanvas/api#NgbOffcanvas) service.
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 offcanvases used in the application.
12.1.0

property animation

animation: boolean;

property ariaDescribedBy

ariaDescribedBy: string;

property ariaLabelledBy

ariaLabelledBy: string;

property backdrop

backdrop: boolean | 'static';

property backdropClass

backdropClass: string;

property beforeDismiss

beforeDismiss: () => boolean | Promise<boolean>;

property container

container: string | HTMLElement;

property injector

injector: Injector;

property keyboard

keyboard: boolean;

property ɵfac

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

property ɵprov

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

property panelClass

panelClass: string;

property position

position: 'top' | 'bottom' | 'start' | 'end';

property scroll

scroll: boolean;

class NgbOffcanvasModule

class NgbOffcanvasModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbOffcanvasRef

class NgbOffcanvasRef {}

A reference to the newly opened offcanvas returned by the NgbOffcanvas.open() method.
12.1.0

constructor

constructor(
    _panelCmptRef: ComponentRef<NgbOffcanvasPanel>,
    _contentRef: ContentRef,
    _backdropCmptRef?: any,
    _beforeDismiss?: () => boolean | Promise<boolean>
);

property closed

readonly closed: Observable<any>;

The observable that emits when the offcanvas is closed via the .close() method.
It will emit the result passed to the .close() method.

property componentInstance

readonly componentInstance: any;

The instance of a component used for the offcanvas content.
When a TemplateRef is used as the content or when the offcanvas is closed, will return undefined.

property dismissed

readonly dismissed: Observable<any>;

The observable that emits when the offcanvas is dismissed via the .dismiss() method.
It will emit the reason passed to the .dismissed() method by the user, or one of the internal reasons like backdrop click or ESC key press.

property hidden

readonly hidden: Observable<void>;

The observable that emits when both offcanvas window and backdrop are closed and animations were finished. At this point offcanvas and backdrop elements will be removed from the DOM tree.
This observable will be completed after emitting.

property result

result: Promise<any>;

The promise that is resolved when the offcanvas is closed and rejected when the offcanvas is dismissed.

property shown

readonly shown: Observable<void>;

The observable that emits when offcanvas is fully visible and animation was finished. The offcanvas DOM element is always available synchronously after calling 'offcanvas.open()' service.
This observable will be completed after emitting. It will not emit, if offcanvas is closed before open animation is finished.

method close

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

Closes the offcanvas with an optional result value.
The NgbMobalRef.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 NgbPagination

class NgbPagination implements OnChanges {}

A component that displays page numbers and allows to customize them in several ways.

property boundaryLinks

boundaryLinks: boolean;

If true, the "First" and "Last" page links are shown.

property collectionSize

collectionSize: number;

The number of items in your paginated collection.
Note, that this is not the number of pages. Page numbers are calculated dynamically based on collectionSize and pageSize. Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.

property directionLinks

directionLinks: boolean;

If true, the "Next" and "Previous" page links are shown.

property disabled

disabled: boolean;

If true, pagination links will be disabled.

property ellipses

ellipses: boolean;

If true, the ellipsis symbols and first/last page numbers will be shown when maxSize > number of pages.

property maxSize

maxSize: number;

The maximum number of pages to display.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbPagination,
    'ngb-pagination',
    never,
    {
        disabled: { alias: 'disabled'; required: false };
        boundaryLinks: { alias: 'boundaryLinks'; required: false };
        directionLinks: { alias: 'directionLinks'; required: false };
        ellipses: { alias: 'ellipses'; required: false };
        rotate: { alias: 'rotate'; required: false };
        collectionSize: { alias: 'collectionSize'; required: true };
        maxSize: { alias: 'maxSize'; required: false };
        page: { alias: 'page'; required: false };
        pageSize: { alias: 'pageSize'; required: false };
        size: { alias: 'size'; required: false };
    },
    { pageChange: 'pageChange' },
    [
        'tplEllipsis',
        'tplFirst',
        'tplLast',
        'tplNext',
        'tplNumber',
        'tplPrevious',
        'tplPages'
    ],
    never,
    true,
    never
>;

property ɵfac

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

property page

page: number;

The current page.
Page numbers start with 1.

property pageChange

pageChange: EventEmitter<number>;

An event fired when the page is changed. Will fire only if collection size is set and all values are valid.
Event payload is the number of the newly selected page.
Page numbers start with 1.

property pageCount

pageCount: number;

property pages

pages: number[];

property pageSize

pageSize: number;

The number of items per page.

property rotate

rotate: boolean;

Whether to rotate pages when maxSize > number of pages.
The current page always stays in the middle if true.

property size

size: string;

The pagination display size.
Bootstrap currently supports small and large sizes.
If the passed value is a string (ex. 'custom'), it will just add the pagination-custom css class

property tplEllipsis

tplEllipsis?: NgbPaginationEllipsis;

property tplFirst

tplFirst?: NgbPaginationFirst;

property tplLast

tplLast?: NgbPaginationLast;

property tplNext

tplNext?: NgbPaginationNext;

property tplNumber

tplNumber?: NgbPaginationNumber;

property tplPages

tplPages?: NgbPaginationPages;

property tplPrevious

tplPrevious?: NgbPaginationPrevious;

method hasNext

hasNext: () => boolean;

method hasPrevious

hasPrevious: () => boolean;

method isEllipsis

isEllipsis: (pageNumber: any) => boolean;

method nextDisabled

nextDisabled: () => boolean;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method previousDisabled

previousDisabled: () => boolean;

method selectPage

selectPage: (pageNumber: number) => void;

class NgbPaginationConfig

class NgbPaginationConfig {}

A configuration service for the [NgbPagination](#/components/pagination/api#NgbPagination) 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 paginations used in the application.

property boundaryLinks

boundaryLinks: boolean;

property directionLinks

directionLinks: boolean;

property disabled

disabled: boolean;

property ellipses

ellipses: boolean;

property maxSize

maxSize: number;

property ɵfac

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

property ɵprov

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

property pageSize

pageSize: number;

property rotate

rotate: boolean;

property size

size: string;

class NgbPaginationEllipsis

class NgbPaginationEllipsis {}

A directive to match the 'ellipsis' link template
4.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPaginationFirst

class NgbPaginationFirst {}

A directive to match the 'first' link template
4.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPaginationLast

class NgbPaginationLast {}

A directive to match the 'last' link template
4.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPaginationModule

class NgbPaginationModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbPaginationModule,
    never,
    [
        typeof i1.NgbPagination,
        typeof i1.NgbPaginationEllipsis,
        typeof i1.NgbPaginationFirst,
        typeof i1.NgbPaginationLast,
        typeof i1.NgbPaginationNext,
        typeof i1.NgbPaginationNumber,
        typeof i1.NgbPaginationPrevious,
        typeof i1.NgbPaginationPages
    ],
    [
        typeof i1.NgbPagination,
        typeof i1.NgbPaginationEllipsis,
        typeof i1.NgbPaginationFirst,
        typeof i1.NgbPaginationLast,
        typeof i1.NgbPaginationNext,
        typeof i1.NgbPaginationNumber,
        typeof i1.NgbPaginationPrevious,
        typeof i1.NgbPaginationPages
    ]
>;

class NgbPaginationNext

class NgbPaginationNext {}

A directive to match the 'next' link template
4.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPaginationNumber

class NgbPaginationNumber {}

A directive to match the page 'number' link template
4.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPaginationPages

class NgbPaginationPages {}

A directive to match the 'pages' whole content
9.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPaginationPrevious

class NgbPaginationPrevious {}

A directive to match the 'previous' link template
4.1.0

property ɵdir

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

property ɵfac

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

property templateRef

templateRef: TemplateRef<any>;

class NgbPopover

class NgbPopover implements OnInit, OnDestroy, OnChanges {}

A lightweight and extensible directive for fancy popover creation.

property animation

animation: boolean;

If true, popover opening and closing will be animated.
8.0.0

property autoClose

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

Indicates whether the popover should be closed on Escape key and inside/outside clicks:
* true - closes on both outside and inside clicks as well as Escape presses * false - disables the autoClose feature (NB: triggers still apply) * "inside" - closes on inside clicks as well as Escape presses * "outside" - closes on outside clicks (sometimes also achievable through triggers) as well as Escape presses
3.0.0

property closeDelay

closeDelay: number;

The closing delay in ms. Works only for "non-manual" opening triggers defined by the triggers input.
4.1.0

property container

container: string;

A selector specifying the element the popover should be appended to.
Currently only supports body.

property disablePopover

disablePopover: boolean;

If true, popover is disabled and won't be displayed.
1.1.0

property hidden

hidden: EventEmitter<void>;

An event emitted when the popover closing animation has finished. Contains no payload.
At this point popover is not in the DOM anymore.

property ngAcceptInputType_autoClose

static ngAcceptInputType_autoClose: string | boolean;

property ngbPopover

ngbPopover: any;

The string content or a TemplateRef for the content to be displayed in the popover.
If the title and the content are falsy, the popover won't open.

property openDelay

openDelay: number;

The opening delay in ms. Works only for "non-manual" opening triggers defined by the triggers input.
4.1.0

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbPopover,
    '[ngbPopover]',
    ['ngbPopover'],
    {
        animation: { alias: 'animation'; required: false };
        autoClose: { alias: 'autoClose'; required: false };
        ngbPopover: { alias: 'ngbPopover'; required: false };
        popoverTitle: { alias: 'popoverTitle'; required: false };
        placement: { alias: 'placement'; required: false };
        popperOptions: { alias: 'popperOptions'; required: false };
        triggers: { alias: 'triggers'; required: false };
        positionTarget: { alias: 'positionTarget'; required: false };
        container: { alias: 'container'; required: false };
        disablePopover: { alias: 'disablePopover'; required: false };
        popoverClass: { alias: 'popoverClass'; required: false };
        popoverContext: { alias: 'popoverContext'; required: false };
        openDelay: { alias: 'openDelay'; required: false };
        closeDelay: { alias: 'closeDelay'; required: false };
    },
    { shown: 'shown'; hidden: 'hidden' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property placement

placement: PlacementArray;

The preferred placement of the popover, among the [possible values](#/guides/positioning#api).
The default order of preference is "auto".
Please see the [positioning overview](#/positioning) for more details.

property popoverClass

popoverClass: string;

An optional class applied to the popover window element.
2.2.0

property popoverContext

popoverContext: any;

Default template context for TemplateRef, can be overridden with open method.
15.1.0

property popoverTitle

popoverTitle: any;

The title of the popover.
If the title and the content are falsy, the popover won't open.

property popperOptions

popperOptions: (options: any) => any;

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

property positionTarget

positionTarget?: string | HTMLElement;

A css selector or html element specifying the element the popover should be positioned against. By default, the element ngbPopover directive is applied to will be set as a target.
13.1.0

property shown

shown: EventEmitter<void>;

An event emitted when the popover opening animation has finished. Contains no payload.

property triggers

triggers: string;

Specifies events that should trigger the tooltip.
Supports a space separated list of event names. For more details see the [triggers demo](#/components/popover/examples#triggers).

method close

close: (animation?: boolean) => void;

Closes the popover.
This is considered to be a "manual" triggering of the popover.

method isOpen

isOpen: () => boolean;

Returns true, if the popover is currently shown.

method ngOnChanges

ngOnChanges: ({
    ngbPopover,
    popoverTitle,
    disablePopover,
    popoverClass,
}: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method open

open: (context?: any) => void;

Opens the popover.
This is considered to be a "manual" triggering. The context is an optional value to be injected into the popover template when it is created.

method toggle

toggle: () => void;

Toggles the popover.
This is considered to be a "manual" triggering of the popover.

class NgbPopoverConfig

class NgbPopoverConfig {}

A configuration service for the [NgbPopover](#/components/popover/api#NgbPopover) 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 popovers used in the application.

property animation

animation: boolean;

property autoClose

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

property closeDelay

closeDelay: number;

property container

container: string;

property disablePopover

disablePopover: boolean;

property openDelay

openDelay: number;

property ɵfac

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

property ɵprov

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

property placement

placement: PlacementArray;

property popoverClass

popoverClass: string;

property popperOptions

popperOptions: (options: Options) => Options;

property triggers

triggers: string;

class NgbPopoverModule

class NgbPopoverModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbProgressbar

class NgbProgressbar {}

A directive that provides feedback on the progress of a workflow or an action.

constructor

constructor();

property animated

animated: boolean;

If true, the stripes on the progress bar are animated.
Takes effect only for browsers supporting CSS3 animations, and if striped is true.

property ariaLabel

ariaLabel: string;

The accessible progress bar name.
13.1.0

property height

height: string;

The height of the progress bar.
Accepts any valid CSS height values, ex. "2rem"

property max

max: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbProgressbar,
    'ngb-progressbar',
    never,
    {
        max: { alias: 'max'; required: false };
        animated: { alias: 'animated'; required: false };
        ariaLabel: { alias: 'ariaLabel'; required: false };
        striped: { alias: 'striped'; required: false };
        showValue: { alias: 'showValue'; required: false };
        textType: { alias: 'textType'; required: false };
        type: { alias: 'type'; required: false };
        value: { alias: 'value'; required: true };
        height: { alias: 'height'; required: false };
    },
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property showValue

showValue: boolean;

If true, the current percentage will be shown in the xx% format.

property stacked

stacked: NgbProgressbarStacked;

property striped

striped: boolean;

If true, the progress bars will be displayed as striped.

property textType

textType: string;

Optional text variant type of the progress bar.
Supports types based on Bootstrap background color variants, like: "success", "info", "warning", "danger", "primary", "secondary", "dark" and so on.
5.2.0

property type

type: string;

The type of the progress bar.
Supports types based on Bootstrap background color variants, like: "success", "info", "warning", "danger", "primary", "secondary", "dark" and so on.

property value

value: number;

The current value for the progress bar.
Should be in the [0, max] range.

method getPercentValue

getPercentValue: () => number;

method getValue

getValue: () => number;

class NgbProgressbarConfig

class NgbProgressbarConfig {}

A configuration service for the [NgbProgressbar](#/components/progressbar/api#NgbProgressbar) 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 progress bars used in the application.

property animated

animated: boolean;

property ariaLabel

ariaLabel: string;

property height

height: string;

property max

max: number;

property ɵfac

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

property ɵprov

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

property showValue

showValue: boolean;

property striped

striped: boolean;

property textType

textType: string;

property type

type: string;

class NgbProgressbarModule

class NgbProgressbarModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbProgressbarModule,
    never,
    [typeof i1.NgbProgressbar, typeof i1.NgbProgressbarStacked],
    [typeof i1.NgbProgressbar, typeof i1.NgbProgressbarStacked]
>;

class NgbProgressbarStacked

class NgbProgressbarStacked {}

A directive that allow to stack progress bars.
16.0.0

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbProgressbarStacked,
    'ngb-progressbar-stacked',
    never,
    {},
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

class NgbRating

class NgbRating implements ControlValueAccessor, OnInit, OnChanges {}

A directive that helps visualising and interacting with a star rating bar.

property contexts

contexts: StarTemplateContext[];

property disabled

disabled: boolean;

If true, the rating can't be changed or focused.

property hover

hover: EventEmitter<number>;

An event emitted when the user is hovering over a given rating.
Event payload equals to the rating being hovered over.

property leave

leave: EventEmitter<number>;

An event emitted when the user stops hovering over a given rating.
Event payload equals to the rating of the last item being hovered over.

property max

max: number;

The maximal rating that can be given.

property nextRate

nextRate: number;

property onChange

onChange: (_: any) => void;

property onTouched

onTouched: () => void;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbRating,
    'ngb-rating',
    never,
    {
        disabled: { alias: 'disabled'; required: false };
        max: { alias: 'max'; required: false };
        rate: { alias: 'rate'; required: false };
        readonly: { alias: 'readonly'; required: false };
        resettable: { alias: 'resettable'; required: false };
        starTemplate: { alias: 'starTemplate'; required: false };
        tabindex: { alias: 'tabindex'; required: false };
        ariaValueText: { alias: 'ariaValueText'; required: false };
    },
    { hover: 'hover'; leave: 'leave'; rateChange: 'rateChange' },
    ['starTemplateFromContent'],
    never,
    true,
    never
>;

property ɵfac

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

property rate

rate: number;

The current rating. Could be a decimal value like 3.75.

property rateChange

rateChange: EventEmitter<number>;

An event emitted when the rating is changed.
Event payload equals to the newly selected rating.

property readonly

readonly: boolean;

If true, the rating can't be changed.

property resettable

resettable: boolean;

If true, the rating can be reset to 0 by mouse clicking currently set rating.

property starTemplate

starTemplate: TemplateRef<StarTemplateContext>;

The template to override the way each star is displayed.
Alternatively put an <ng-template> as the only child of your <ngb-rating> element

property starTemplateFromContent

starTemplateFromContent: TemplateRef<StarTemplateContext>;

property tabindex

tabindex: string | number;

Allows setting a custom rating tabindex. If the component is disabled, tabindex will still be set to -1.
13.1.0

method ariaValueText

ariaValueText: (current: number, max: number) => string;

Allows to provide a function to set a custom aria-valuetext
14.1.0

method enter

enter: (value: number) => void;

method handleBlur

handleBlur: () => void;

method handleClick

handleClick: (value: number) => void;

method handleKeyDown

handleKeyDown: (event: KeyboardEvent) => void;

method isInteractive

isInteractive: () => boolean;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

method registerOnChange

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

method registerOnTouched

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

method reset

reset: () => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method update

update: (value: number, internalChange?: boolean) => void;

method writeValue

writeValue: (value: any) => void;

class NgbRatingConfig

class NgbRatingConfig {}

A configuration service for the [NgbRating](#/components/rating/api#NgbRating) 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 ratings used in the application.

property max

max: number;

property ɵfac

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

property ɵprov

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

property readonly

readonly: boolean;

property resettable

resettable: boolean;

property tabindex

tabindex: string | number;

class NgbRatingModule

class NgbRatingModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbScrollSpy

class NgbScrollSpy implements NgbScrollSpyRef, AfterViewInit {}

A directive to put on a scrollable container.
It will instantiate a [NgbScrollSpyService](#/components/scrollspy/api#NgbScrollSpyService).
15.1.0

property active

active: string;

Getter/setter for the currently active fragment id.

property active$

readonly active$: Observable<string>;

Returns an observable that emits currently active section id.

property activeChange

activeChange: Observable<string>;

An event raised when the active section changes.
Payload is the id of the new active section, empty string if none.

property ngAcceptInputType_scrollBehavior

static ngAcceptInputType_scrollBehavior: string;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbScrollSpy,
    '[ngbScrollSpy]',
    ['ngbScrollSpy'],
    {
        processChanges: { alias: 'processChanges'; required: false };
        rootMargin: { alias: 'rootMargin'; required: false };
        scrollBehavior: { alias: 'scrollBehavior'; required: false };
        threshold: { alias: 'threshold'; required: false };
        active: { alias: 'active'; required: false };
    },
    { activeChange: 'activeChange' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property processChanges

processChanges: NgbScrollSpyProcessChanges;

A function that is called when the IntersectionObserver detects a change.
See [NgbScrollSpyOptions](#/components/scrollspy/api#NgbScrollSpyOptions) for more details.

property rootMargin

rootMargin: string;

An IntersectionObserver root margin.

property scrollBehavior

scrollBehavior: 'auto' | 'smooth';

The scroll behavior for the .scrollTo() method.

property threshold

threshold: number | number[];

An IntersectionObserver threshold.

method ngAfterViewInit

ngAfterViewInit: () => void;

method scrollTo

scrollTo: (fragment: string | HTMLElement, options?: NgbScrollToOptions) => void;

Scrolls to a fragment that is identified by the ngbScrollSpyFragment directive. An id or an element reference can be passed.

class NgbScrollSpyConfig

class NgbScrollSpyConfig {}

A configuration service for the [NgbScrollSpyService](#/components/scrollspy/api#NgbScrollSpyService).
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 scrollspies used in the application.
15.1.0

property ɵfac

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

property ɵprov

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

property processChanges

processChanges: NgbScrollSpyProcessChanges;

property scrollBehavior

scrollBehavior: 'auto' | 'smooth';

class NgbScrollSpyFragment

class NgbScrollSpyFragment implements AfterViewInit {}

A directive to put on a fragment observed inside a scrollspy container.
15.1.0

property id

id: string;

The unique id of the fragment. It must be a string unique to the document, as it will be set as the id of the element.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbScrollSpyFragment,
    '[ngbScrollSpyFragment]',
    never,
    { id: { alias: 'ngbScrollSpyFragment'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

method ngAfterViewInit

ngAfterViewInit: () => void;

class NgbScrollSpyItem

class NgbScrollSpyItem implements OnInit {}

A helper directive to that links menu items and fragments together.
It will automatically add the .active class to the menu item when the associated fragment becomes active.
15.1.0

property fragment

fragment: string;

The id of the associated fragment.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbScrollSpyItem,
    '[ngbScrollSpyItem]',
    ['ngbScrollSpyItem'],
    {
        data: { alias: 'ngbScrollSpyItem'; required: false };
        fragment: { alias: 'fragment'; required: false };
        parent: { alias: 'parent'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property parent

parent: string;

The id of the parent scroll spy menu item.

method isActive

isActive: () => boolean;

Returns true, if the associated fragment is active.

method ngOnInit

ngOnInit: () => void;

method scrollTo

scrollTo: (options?: NgbScrollToOptions) => void;

Scrolls to the associated fragment.

class NgbScrollSpyMenu

class NgbScrollSpyMenu implements NgbScrollSpyRef, AfterViewInit {}

An optional scroll spy menu directive to build hierarchical menus and simplify the [NgbScrollSpyItem](#/components/scrollspy/api#NgbScrollSpyItem) configuration.
15.1.0

property active

readonly active: string;

property active$

readonly active$: Observable<string>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbScrollSpyMenu,
    '[ngbScrollSpyMenu]',
    never,
    { scrollSpy: { alias: 'ngbScrollSpyMenu'; required: false } },
    {},
    ['_items'],
    never,
    true,
    never
>;

property ɵfac

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

method getItem

getItem: (id: string) => NgbScrollSpyItem | undefined;

method ngAfterViewInit

ngAfterViewInit: () => void;

method scrollTo

scrollTo: (fragment: string, options?: NgbScrollToOptions) => void;

class NgbScrollSpyModule

class NgbScrollSpyModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbScrollSpyModule,
    never,
    [
        typeof i1.NgbScrollSpy,
        typeof i1.NgbScrollSpyItem,
        typeof i1.NgbScrollSpyFragment,
        typeof i1.NgbScrollSpyMenu
    ],
    [
        typeof i1.NgbScrollSpy,
        typeof i1.NgbScrollSpyItem,
        typeof i1.NgbScrollSpyFragment,
        typeof i1.NgbScrollSpyMenu
    ]
>;

class NgbScrollSpyService

class NgbScrollSpyService implements NgbScrollSpyRef, OnDestroy {}

A scrollspy service that allows tracking of elements scrolling in and out of view.
It can be instantiated manually, or automatically by the ngbScrollSpy directive.
15.1.0

constructor

constructor();

property active

readonly active: string;

Getter for the currently active fragment id. Returns empty string if none.

property active$

readonly active$: Observable<string>;

An observable emitting the currently active fragment. Emits empty string if none.

property ɵfac

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

property ɵprov

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

method ngOnDestroy

ngOnDestroy: () => void;

method observe

observe: (fragment: string | HTMLElement) => void;

Adds a fragment to observe. It must be contained in the root element. An id or an element reference can be passed.

method scrollTo

scrollTo: (fragment: string | HTMLElement, options?: NgbScrollToOptions) => void;

Scrolls to a fragment, it must be known to the service and contained in the root element. An id or an element reference can be passed.
[NgbScrollToOptions](#/components/scrollspy/api#NgbScrollToOptions) can be passed.

method start

start: (options?: NgbScrollSpyOptions) => void;

Starts the scrollspy service and observes specified fragments.
You can specify a list of options to pass, like the root element, initial fragment, scroll behavior, etc. See the [NgbScrollSpyOptions](#/components/scrollspy/api#NgbScrollSpyOptions) interface for more details.

method stop

stop: () => void;

Stops the service and unobserves all fragments.

method unobserve

unobserve: (fragment: string | HTMLElement) => void;

Unobserves a fragment. An id or an element reference can be passed.

class NgbSlide

class NgbSlide {}

A directive that wraps the individual carousel slide.

property id

id: string;

Slide id that must be unique for the entire document.
If not provided, will be generated in the ngb-slide-xx format.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbSlide,
    'ng-template[ngbSlide]',
    never,
    { id: { alias: 'id'; required: false } },
    { slid: 'slid' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property slid

slid: EventEmitter<NgbSingleSlideEvent>;

An event emitted when the slide transition is finished
8.0.0

property templateRef

templateRef: TemplateRef<any>;

class NgbTimeAdapter

abstract class NgbTimeAdapter<T> {}

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

property ɵfac

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

property ɵprov

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

method fromModel

abstract fromModel: (value: T | null) => NgbTimeStruct | null;

Converts a user-model time of type T to an NgbTimeStruct for internal use.

method toModel

abstract toModel: (time: NgbTimeStruct | null) => T | null;

Converts an internal NgbTimeStruct time to a user-model time of type T.

class NgbTimepicker

class NgbTimepicker implements ControlValueAccessor, OnChanges {}

A directive that helps with wth picking hours, minutes and seconds.

constructor

constructor(
    _config: NgbTimepickerConfig,
    _ngbTimeAdapter: NgbTimeAdapter<any>,
    _cd: ChangeDetectorRef,
    i18n: NgbTimepickerI18n
);

property disabled

disabled: boolean;

property hourStep

hourStep: number;

property i18n

i18n: NgbTimepickerI18n;

property isLargeSize

readonly isLargeSize: boolean;

property isSmallSize

readonly isSmallSize: boolean;

property meridian

meridian: boolean;

Whether to display 12H or 24H mode.

property minuteStep

minuteStep: number;

property model

model?: NgbTime;

property ngAcceptInputType_size

static ngAcceptInputType_size: string;

property onChange

onChange: (_: any) => void;

property onTouched

onTouched: () => void;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbTimepicker,
    'ngb-timepicker',
    ['ngbTimepicker'],
    {
        meridian: { alias: 'meridian'; required: false };
        spinners: { alias: 'spinners'; required: false };
        seconds: { alias: 'seconds'; required: false };
        hourStep: { alias: 'hourStep'; required: false };
        minuteStep: { alias: 'minuteStep'; required: false };
        secondStep: { alias: 'secondStep'; required: false };
        readonlyInputs: { alias: 'readonlyInputs'; required: false };
        size: { alias: 'size'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property readonlyInputs

readonlyInputs: boolean;

If true, the timepicker is readonly and can't be changed.

property seconds

seconds: boolean;

If true, it is possible to select seconds.

property secondStep

secondStep: number;

property size

size: 'small' | 'medium' | 'large';

The size of inputs and buttons.

property spinners

spinners: boolean;

If true, the spinners above and below inputs are visible.

method changeHour

changeHour: (step: number) => void;

Increments the hours by the given step.

method changeMinute

changeMinute: (step: number) => void;

Increments the minutes by the given step.

method changeSecond

changeSecond: (step: number) => void;

Increments the seconds by the given step.

method formatHour

formatHour: (value?: number) => string;

method formatInput

formatInput: (input: HTMLInputElement) => void;

method formatMinSec

formatMinSec: (value?: number) => string;

method handleBlur

handleBlur: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method registerOnChange

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

method registerOnTouched

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

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method toggleMeridian

toggleMeridian: () => void;

method updateHour

updateHour: (newVal: string) => void;

Update hours with the new value.

method updateMinute

updateMinute: (newVal: string) => void;

Update minutes with the new value.

method updateSecond

updateSecond: (newVal: string) => void;

Update seconds with the new value.

method writeValue

writeValue: (value: any) => void;

class NgbTimepickerConfig

class NgbTimepickerConfig {}

A configuration service for the [NgbTimepicker](#/components/timepicker/api#NgbTimepicker) 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 timepickers used in the application.

property disabled

disabled: boolean;

property hourStep

hourStep: number;

property meridian

meridian: boolean;

property minuteStep

minuteStep: number;

property ɵfac

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

property ɵprov

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

property readonlyInputs

readonlyInputs: boolean;

property seconds

seconds: boolean;

property secondStep

secondStep: number;

property size

size: 'small' | 'medium' | 'large';

property spinners

spinners: boolean;

class NgbTimepickerI18n

abstract class NgbTimepickerI18n {}

Type of the service supplying day periods (for example, 'AM' and 'PM') to NgbTimepicker component. The default implementation of this service honors the Angular locale, and uses the registered locale data, as explained in the Angular i18n guide.

property ɵfac

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

property ɵprov

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

method getAfternoonPeriod

abstract getAfternoonPeriod: () => string;

Returns the name for the period after midday.

method getMorningPeriod

abstract getMorningPeriod: () => string;

Returns the name for the period before midday.

class NgbTimepickerModule

class NgbTimepickerModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbToast

class NgbToast implements AfterContentInit, OnChanges {}

Toasts provide feedback messages as notifications to the user. Goal is to mimic the push notifications available both on mobile and desktop operating systems.
5.0.0

constructor

constructor(ariaLive: string);

property animation

animation: boolean;

If true, toast opening and closing will be animated.
Animation is triggered only when the .hide() or .show() functions are called
8.0.0

property ariaLive

ariaLive: string;

property autohide

autohide: boolean;

Auto hide the toast after a delay in ms. default: true (inherited from NgbToastConfig)

property contentHeaderTpl

contentHeaderTpl: any;

A template like <ng-template ngbToastHeader></ng-template> can be used in the projected content to allow markup usage.

property delay

delay: number;

Delay after which the toast will hide (ms). default: 500 (ms) (inherited from NgbToastConfig)

header: string;

Text to be used as toast's header. Ignored if a ContentChild template is specified at the same time.

property hidden

hidden: EventEmitter<void>;

An event fired after the animation triggered by calling .hide() method has finished.
It can only occur in 2 different scenarios: - autohide timeout fires - user clicks on a closing cross
Additionally this output is purely informative. The toast won't be removed from DOM automatically, it's up to the user to take care of that.
8.0.0

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    NgbToast,
    'ngb-toast',
    ['ngbToast'],
    {
        animation: { alias: 'animation'; required: false };
        delay: { alias: 'delay'; required: false };
        autohide: { alias: 'autohide'; required: false };
        header: { alias: 'header'; required: false };
    },
    { shown: 'shown'; hidden: 'hidden' },
    ['contentHeaderTpl'],
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgbToast, [{ attribute: 'aria-live' }]>;

property shown

shown: EventEmitter<void>;

An event fired after the animation triggered by calling .show() method has finished.
8.0.0

method hide

hide: () => Observable<void>;

Triggers toast closing programmatically.
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 (hidden) output
8.0.0

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method show

show: () => Observable<void>;

Triggers toast opening programmatically.
The returned observable will emit and be completed once the opening transition has finished. If the animations are turned off this happens synchronously.
Alternatively you could listen or subscribe to the (shown) output
8.0.0

class NgbToastConfig

class NgbToastConfig implements NgbToastOptions {}

Configuration service for the NgbToast 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 toasts used in the application.
5.0.0

property animation

animation: boolean;

property ariaLive

ariaLive: 'polite' | 'alert';

property autohide

autohide: boolean;

property delay

delay: number;

property ɵfac

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

property ɵprov

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

class NgbToastHeader

class NgbToastHeader {}

This directive allows the usage of HTML markup or other directives inside of the toast's header.
5.0.0

property ɵdir

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

property ɵfac

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

class NgbToastModule

class NgbToastModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbToastModule,
    never,
    [typeof i1.NgbToast, typeof i1.NgbToastHeader],
    [typeof i1.NgbToast, typeof i1.NgbToastHeader]
>;

class NgbTooltip

class NgbTooltip implements OnInit, OnDestroy, OnChanges {}

A lightweight and extensible directive for fancy tooltip creation.

property animation

animation: boolean;

If true, tooltip opening and closing will be animated.
8.0.0

property autoClose

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

Indicates whether the tooltip should be closed on Escape key and inside/outside clicks:
* true - closes on both outside and inside clicks as well as Escape presses * false - disables the autoClose feature (NB: triggers still apply) * "inside" - closes on inside clicks as well as Escape presses * "outside" - closes on outside clicks (sometimes also achievable through triggers) as well as Escape presses
3.0.0

property closeDelay

closeDelay: number;

The closing delay in ms. Works only for "non-manual" opening triggers defined by the triggers input.
4.1.0

property container

container: string;

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

property disableTooltip

disableTooltip: boolean;

If true, tooltip is disabled and won't be displayed.
1.1.0

property hidden

hidden: EventEmitter<any>;

An event emitted when the tooltip closing animation has finished. Contains no payload.

property ngAcceptInputType_autoClose

static ngAcceptInputType_autoClose: string | boolean;

property ngbTooltip

ngbTooltip: any;

property openDelay

openDelay: number;

The opening delay in ms. Works only for "non-manual" opening triggers defined by the triggers input.
4.1.0

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbTooltip,
    '[ngbTooltip]',
    ['ngbTooltip'],
    {
        animation: { alias: 'animation'; required: false };
        autoClose: { alias: 'autoClose'; required: false };
        placement: { alias: 'placement'; required: false };
        popperOptions: { alias: 'popperOptions'; required: false };
        triggers: { alias: 'triggers'; required: false };
        positionTarget: { alias: 'positionTarget'; required: false };
        container: { alias: 'container'; required: false };
        disableTooltip: { alias: 'disableTooltip'; required: false };
        tooltipClass: { alias: 'tooltipClass'; required: false };
        tooltipContext: { alias: 'tooltipContext'; required: false };
        openDelay: { alias: 'openDelay'; required: false };
        closeDelay: { alias: 'closeDelay'; required: false };
        ngbTooltip: { alias: 'ngbTooltip'; required: false };
    },
    { shown: 'shown'; hidden: 'hidden' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property placement

placement: PlacementArray;

The preferred placement of the tooltip, among the [possible values](#/guides/positioning#api).
The default order of preference is "auto".
Please see the [positioning overview](#/positioning) for more details.

property popperOptions

popperOptions: (options: any) => any;

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

property positionTarget

positionTarget?: string | HTMLElement;

A css selector or html element specifying the element the tooltip should be positioned against. By default, the element ngbTooltip directive is applied to will be set as a target.
13.1.0

property shown

shown: EventEmitter<any>;

An event emitted when the tooltip opening animation has finished. Contains no payload.

property tooltipClass

tooltipClass: string;

An optional class applied to the tooltip window element.
3.2.0

property tooltipContext

tooltipContext: any;

Default template context for TemplateRef, can be overridden with open method.
15.1.0

property triggers

triggers: string;

Specifies events that should trigger the tooltip.
Supports a space separated list of event names. For more details see the [triggers demo](#/components/tooltip/examples#triggers).

method close

close: (animation?: boolean) => void;

Closes the tooltip.
This is considered to be a "manual" triggering of the tooltip.

method isOpen

isOpen: () => boolean;

Returns true, if the popover is currently shown.

method ngOnChanges

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

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method open

open: (context?: any) => void;

Opens the tooltip.
This is considered to be a "manual" triggering. The context is an optional value to be injected into the tooltip template when it is created.

method toggle

toggle: () => void;

Toggles the tooltip.
This is considered to be a "manual" triggering of the tooltip.

class NgbTooltipConfig

class NgbTooltipConfig {}

A configuration service for the [NgbTooltip](#/components/tooltip/api#NgbTooltip) 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 tooltips used in the application.

property animation

animation: boolean;

property autoClose

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

property closeDelay

closeDelay: number;

property container

container: string;

property disableTooltip

disableTooltip: boolean;

property openDelay

openDelay: number;

property ɵfac

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

property ɵprov

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

property placement

placement: PlacementArray;

property popperOptions

popperOptions: (options: Options) => Options;

property tooltipClass

tooltipClass: string;

property triggers

triggers: string;

class NgbTooltipModule

class NgbTooltipModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

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

class NgbTypeahead

class NgbTypeahead implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {}

A directive providing a simple way of creating powerful typeaheads from any text input.

property activeDescendant

activeDescendant: string;

property autocomplete

autocomplete: string;

The value for the autocomplete attribute for the <input> element.
Defaults to "off" to disable the native browser autocomplete, but you can override it if necessary.
2.1.0

property container

container: any;

A selector specifying the element the typeahead popup will be appended to.
Currently only supports "body".

property editable

editable: boolean;

If true, model values will not be restricted only to items selected from the popup.

property focusFirst

focusFirst: boolean;

If true, the first item in the result list will always stay focused while typing.

property inputFormatter

inputFormatter: (item: any) => string;

The function that converts an item from the result list to a string to display in the <input> field.
It is called when the user selects something in the popup or the model value changes, so the input needs to be updated.

property ngbTypeahead

ngbTypeahead: any;

The function that converts a stream of text values from the <input> element to the stream of the array of items to display in the typeahead popup.
If the resulting observable emits a non-empty array - the popup will be shown. If it emits an empty array - the popup will be closed.
See the [basic example](#/components/typeahead/examples#basic) for more details.
Note that the this argument is undefined so you need to explicitly bind it to a desired "this" target.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgbTypeahead,
    'input[ngbTypeahead]',
    ['ngbTypeahead'],
    {
        autocomplete: { alias: 'autocomplete'; required: false };
        container: { alias: 'container'; required: false };
        editable: { alias: 'editable'; required: false };
        focusFirst: { alias: 'focusFirst'; required: false };
        inputFormatter: { alias: 'inputFormatter'; required: false };
        ngbTypeahead: { alias: 'ngbTypeahead'; required: false };
        resultFormatter: { alias: 'resultFormatter'; required: false };
        resultTemplate: { alias: 'resultTemplate'; required: false };
        selectOnExact: { alias: 'selectOnExact'; required: false };
        showHint: { alias: 'showHint'; required: false };
        placement: { alias: 'placement'; required: false };
        popperOptions: { alias: 'popperOptions'; required: false };
        popupClass: { alias: 'popupClass'; required: false };
    },
    { selectItem: 'selectItem' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property placement

placement: PlacementArray;

The preferred placement of the typeahead, 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: any) => any;

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

property popupClass

popupClass: string;

A custom class to append to the typeahead popup window
Accepts a string containing CSS class to be applied on the ngb-typeahead-window.
This can be used to provide instance-specific styling, ex. you can override popup window z-index
9.1.0

property popupId

popupId: string;

property resultFormatter

resultFormatter: (item: any) => string;

The function that converts an item from the result list to a string to display in the popup.
Must be provided, if your ngbTypeahead returns something other than Observable<string[]>.
Alternatively for more complex markup in the popup you should use resultTemplate.

property resultTemplate

resultTemplate: TemplateRef<ResultTemplateContext>;

The template to override the way resulting items are displayed in the popup.
See the [ResultTemplateContext](#/components/typeahead/api#ResultTemplateContext) for the template context.
Also see the [template for results demo](#/components/typeahead/examples#template) for more details.

property selectItem

selectItem: EventEmitter<NgbTypeaheadSelectItemEvent<any>>;

An event emitted right before an item is selected from the result list.
Event payload is of type [NgbTypeaheadSelectItemEvent](#/components/typeahead/api#NgbTypeaheadSelectItemEvent).

property selectOnExact

selectOnExact: boolean;

If true, automatically selects the item when it is the only one that exactly matches the user input
14.2.0

property showHint

showHint: boolean;

If true, will show the hint in the <input> when an item in the result list matches.

method dismissPopup

dismissPopup: () => void;

Dismisses typeahead popup window

method handleBlur

handleBlur: () => void;

method handleKeyDown

handleKeyDown: (event: KeyboardEvent) => void;

method isPopupOpen

isPopupOpen: () => boolean;

Returns true if the typeahead popup window is displayed

method ngOnChanges

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

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method registerOnChange

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

method registerOnTouched

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

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method writeValue

writeValue: (value: any) => void;

class NgbTypeaheadConfig

class NgbTypeaheadConfig {}

A configuration service for the [NgbTypeahead](#/components/typeahead/api#NgbTypeahead) 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 typeaheads used in the application.

property container

container: any;

property editable

editable: boolean;

property focusFirst

focusFirst: boolean;

property ɵfac

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

property ɵprov

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

property placement

placement: PlacementArray;

property popperOptions

popperOptions: (options: Options) => Options;

property selectOnExact

selectOnExact: boolean;

property showHint

showHint: boolean;

class NgbTypeaheadModule

class NgbTypeaheadModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgbTypeaheadModule,
    never,
    [typeof i1.NgbHighlight, typeof i2.NgbTypeahead],
    [typeof i1.NgbHighlight, typeof i2.NgbTypeahead]
>;

Interfaces

interface NgbDatepickerNavigateEvent

interface NgbDatepickerNavigateEvent {}

An event emitted right before the navigation happens and the month displayed by the datepicker changes.

property current

current: {
    year: number;
    month: number;
} | null;

The currently displayed month.

property next

next: {
    year: number;
    month: number;
};

The month we're navigating to.

property preventDefault

preventDefault: () => void;

Calling this function will prevent navigation from happening.
4.1.0

interface NgbDatepickerState

interface NgbDatepickerState {}

An interface that represents the readonly public state of the datepicker.
Accessible via the datepicker.state getter
5.2.0

property firstDate

readonly firstDate: NgbDate;

The first visible date of currently displayed months

property focusedDate

readonly focusedDate: NgbDate;

The date currently focused by the datepicker

property lastDate

readonly lastDate: NgbDate;

The last visible date of currently displayed months

property maxDate

readonly maxDate: NgbDate | null;

The latest date that can be displayed or selected

property minDate

readonly minDate: NgbDate | null;

The earliest date that can be displayed or selected

property months

readonly months: NgbDate[];

First dates of months currently displayed by the datepicker
5.3.0

interface NgbDateStruct

interface NgbDateStruct {}

An interface of the date model used by the datepicker.
All datepicker APIs consume NgbDateStruct, but return NgbDate.
See the [date format overview](#/components/datepicker/overview#date-model) for more details.

property day

day: number;

The day of month, starting at 1

property month

month: number;

The month, for example 1=Jan ... 12=Dec

property year

year: number;

The year, for example 2016

interface NgbModalOptions

interface NgbModalOptions {}

Options available when opening new modal windows with NgbModal.open() method.

property animation

animation?: boolean;

If true, modal opening and closing will be animated.
8.0.0

property ariaDescribedBy

ariaDescribedBy?: string;

aria-describedby attribute value to set on the modal window.
6.1.0

property ariaLabelledBy

ariaLabelledBy?: string;

aria-labelledby attribute value to set on the modal window.
2.2.0

property backdrop

backdrop?: boolean | 'static';

If true, the backdrop element will be created for a given modal.
Alternatively, specify 'static' for a backdrop which doesn't close the modal on click.
Default value is true.

property backdropClass

backdropClass?: string;

A custom class to append to the modal backdrop.
1.1.0

property beforeDismiss

beforeDismiss?: () => boolean | Promise<boolean>;

Callback right before the modal will be dismissed.
If this function returns: * false * a promise resolved with false * a promise that is rejected
then the modal won't be dismissed.

property centered

centered?: boolean;

If true, the modal will be centered vertically.
Default value is false.
1.1.0

property container

container?: string | HTMLElement;

A selector specifying the element all new modal windows should be appended to. Since v5.3.0 it is also possible to pass the reference to an HTMLElement.
If not specified, will be body.

property fullscreen

fullscreen?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | boolean | string;

If true modal will always be displayed in fullscreen mode.
For values like 'md' it means that modal will be displayed in fullscreen mode only if the viewport width is below 'md'. For custom strings (ex. when passing 'mysize') it will add a 'modal-fullscreen-mysize-down' class.
If not specified will be false.
12.1.0

property injector

injector?: Injector;

The Injector to use for modal content.

property keyboard

keyboard?: boolean;

If true, the modal will be closed when Escape key is pressed
Default value is true.

property modalDialogClass

modalDialogClass?: string;

A custom class to append to the modal dialog.
9.1.0

property scrollable

scrollable?: boolean;

Scrollable modal content (false by default).
5.0.0

property size

size?: 'sm' | 'lg' | 'xl' | string;

Size of a new modal window.

property windowClass

windowClass?: string;

A custom class to append to the modal window.

interface NgbNavChangeEvent

interface NgbNavChangeEvent<T = any> {}

The payload of the change event emitted right before the nav change happens on user click.
This event won't be emitted if nav is changed programmatically via [activeId] or .select().
5.2.0

property activeId

activeId: T;

Id of the currently active nav.

property nextId

nextId: T;

Id of the newly selected nav.

property preventDefault

preventDefault: () => void;

Function that will prevent nav change if called.

interface NgbNavContentContext

interface NgbNavContentContext {}

Context passed to the nav content template.
See [this demo](#/components/nav/examples#keep-content) as the example.
5.2.0

property $implicit

$implicit: boolean;

If true, current nav content is visible and active

interface NgbOffcanvasOptions

interface NgbOffcanvasOptions {}

Options available when opening new offcanvas windows with NgbOffcanvas.open() method.
12.1.0

property animation

animation?: boolean;

If true, opening and closing will be animated.

property ariaDescribedBy

ariaDescribedBy?: string;

aria-describedby attribute value to set on the offcanvas panel.

property ariaLabelledBy

ariaLabelledBy?: string;

aria-labelledby attribute value to set on the offcanvas panel.

property backdrop

backdrop?: boolean | 'static';

If true, the backdrop element will be created for a given offcanvas. If 'static', clicking the backdrop won't close the offcanvas (available since 13.1.0).
Default value is true.

property backdropClass

backdropClass?: string;

A custom class to append to the offcanvas backdrop.

property beforeDismiss

beforeDismiss?: () => boolean | Promise<boolean>;

Callback right before the offcanvas will be dismissed.
If this function returns: * false * a promise resolved with false * a promise that is rejected
then the offcanvas won't be dismissed.

property container

container?: string | HTMLElement;

A selector specifying the element all new offcanvas panels and backdrops should be appended to.
If not specified, will be body.

property injector

injector?: Injector;

The Injector to use for offcanvas content.

property keyboard

keyboard?: boolean;

If true, the offcanvas will be closed when Escape key is pressed
Default value is true.

property panelClass

panelClass?: string;

A custom class to append to the offcanvas panel.

property position

position?: 'start' | 'end' | 'top' | 'bottom';

The position of the offcanvas

property scroll

scroll?: boolean;

Scroll content while offcanvas is open (false by default).

interface NgbSlideEvent

interface NgbSlideEvent {}

A slide change event emitted right after the slide transition is completed.

property current

current: string;

The current slide id.

property direction

direction: NgbSlideEventDirection;

The slide event direction.
since 12.0.0 Possible values are 'start' | 'end'.
before 12.0.0 Possible values were 'left' | 'right'.

property paused

paused: boolean;

Whether the pause() method was called (and no cycle() call was done afterwards).
5.1.0

property prev

prev: string;

The previous slide id.

property source

source?: NgbSlideEventSource;

Source triggering the slide change event.
Possible values are 'timer' | 'arrowLeft' | 'arrowRight' | 'indicator'
5.1.0

interface NgbTimeStruct

interface NgbTimeStruct {}

An interface for the time model used by the timepicker.

property hour

hour: number;

The hour in the [0, 23] range.

property minute

minute: number;

The minute in the [0, 59] range.

property second

second: number;

The second in the [0, 59] range.

interface NgbTypeaheadSelectItemEvent

interface NgbTypeaheadSelectItemEvent<T = any> {}

An event emitted right before an item is selected from the result list.

property item

item: T;

The item from the result list about to be selected.

property preventDefault

preventDefault: () => void;

Calling this function will prevent item selection from happening.

Enums

enum ModalDismissReasons

enum ModalDismissReasons {
    BACKDROP_CLICK = 0,
    ESC = 1,
}

member BACKDROP_CLICK

BACKDROP_CLICK = 0

member ESC

ESC = 1

enum NgbSlideEventDirection

enum NgbSlideEventDirection {
    START = 'start',
    END = 'end',
}

Defines the carousel slide transition direction.

member END

END = 'end'

member START

START = 'start'

enum NgbSlideEventSource

enum NgbSlideEventSource {
    TIMER = 'timer',
    ARROW_LEFT = 'arrowLeft',
    ARROW_RIGHT = 'arrowRight',
    INDICATOR = 'indicator',
}

member ARROW_LEFT

ARROW_LEFT = 'arrowLeft'

member ARROW_RIGHT

ARROW_RIGHT = 'arrowRight'

member INDICATOR

INDICATOR = 'indicator'

member TIMER

TIMER = 'timer'

enum OffcanvasDismissReasons

enum OffcanvasDismissReasons {
    BACKDROP_CLICK = 0,
    ESC = 1,
}

member BACKDROP_CLICK

BACKDROP_CLICK = 0

member ESC

ESC = 1

Type Aliases

type NgbModalUpdatableOptions

type NgbModalUpdatableOptions = Pick<
    NgbModalOptions,
    | 'ariaLabelledBy'
    | 'ariaDescribedBy'
    | 'centered'
    | 'fullscreen'
    | 'backdropClass'
    | 'size'
    | 'windowClass'
    | 'modalDialogClass'
>;

Options that can be changed on an opened modal with NgbModalRef.update() and NgbActiveModal.update() methods.
14.2.0

type NgbPeriod

type NgbPeriod = 'y' | 'm' | 'd';

type NgbScrollSpyProcessChanges

type NgbScrollSpyProcessChanges = (
    state: {
        entries: IntersectionObserverEntry[];
        rootElement: HTMLElement;
        fragments: Set<Element>;
        scrollSpy: NgbScrollSpyService;
        options: NgbScrollSpyOptions;
    },
    changeActive: (active: string) => void,
    context: object
) => void;

type Placement

type Placement =
    | 'auto'
    | 'top'
    | 'bottom'
    | 'start'
    | 'left'
    | 'end'
    | 'right'
    | 'top-start'
    | 'top-left'
    | 'top-end'
    | 'top-right'
    | 'bottom-start'
    | 'bottom-left'
    | 'bottom-end'
    | 'bottom-right'
    | 'start-top'
    | 'left-top'
    | 'start-bottom'
    | 'left-bottom'
    | 'end-top'
    | 'right-top'
    | 'end-bottom'
    | 'right-bottom';

Package Files (87)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (6)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ng-bootstrap/ng-bootstrap.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@ng-bootstrap/ng-bootstrap)

HTML

<a href="https://www.jsdocs.io/package/@ng-bootstrap/ng-bootstrap"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 months ago.
Package analyzed in 12285 ms.
Missing or incorrect documentation? Open an issue for this package.

@ng-bootstrap/ng-bootstrap

Install

Overview

Index

Classes

Interfaces

Enums

Type Aliases

Classes

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 destroyOnHide

property ɵfac

property ɵprov

class NgbAccordionDirective

property animation

property closeOthers

property destroyOnHide

property hidden

property hide

property ɵdir

property ɵfac

property show

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 collapsed

property collapseId

property destroyOnHide

property disabled

property hidden

property hide

property id

property ɵdir

property ɵfac

property show

property shown

property toggleId

method collapse

method expand

method ngAfterContentInit

method toggle

class NgbAccordionModule

property ɵfac

property ɵinj

property ɵmod

class NgbAccordionToggle

property accordion

property item

property ɵdir

property ɵfac

class NgbActiveModal