Since 8.0.0

Animations are turned on by default and available on all standard bootstrap components.

They are implemented with CSS Transitions that use classes defined in Bootstrap specifications. You could use your own theme or simply override default styles to customize them (ex. you could change the transition duration). Same as with Bootstrap, all animations respect the Reduced Motion setting.

Playing with animations has been a lot of work, as we had to introduce asynchronous transitions and new APIs, while keeping synchronous code without the animations. This is an important point, as it allows to keep existing tests (unit and e2e tests) unchanged.

Animations are enabled by default. You can opt-out and disable them with a simple flag and everything will run synchronously as before (ex. for unit tests). You can disable animations at different levels:

To turn off animations globally, inject NgbConfig at your application root and change the animation flag:

You can also choose to disable them by component type, by changing the component configuration:

The last option is to activate/deactivate animations at the component instance ievel:

  1. Animations don't work with structural directives like ngIf or ngFor. Unfortunately Angular doesn't provide any APIs to delay DOM removal.

    The most impacted widgets are Alert and Toast. For example, to animate alert closing, you will need to use the imperative API, then toggle some flag at the animation end actually remove the element from the DOM.

  2. The second limitation concerns the router integration with the Nav component. As the router-outlet is not directly connected to the Nav, no animation will run either. Two workarounds are available:

    • Do it yourself the Angular way
    • Set the nav panels the usual way, and use the ActivatedRoute to initialise the active nav with the url information.

You don't have anything special to do to handle animations apart from alert and toast. But you have some new APIs available to be notified when transitions finish. Here is a quick overview.

Accordion

New (shown) and (hidden) outputs at accordion and panel levels. See API docs for payload details.

Alert

New (closed) output that notifies that transition has finished.

New .close() method that triggers closing transition and returns an observable to be notified when it is done.

Carousel

New (slid) output at both carousel and slide levels. See API docs for payload details.

Collapse

New (shown) and (hidden) outputs and a new .toggle() method.

Modal

New .shown and .hidden observable APIs.

Nav

New (shown) and (hidden) outputs at nav and item levels. See API docs for payload details.

Popover / Tooltip

They both have new (shown) and (hidden) outputs.

Toast

New (shown) and hidden outputs.

New .show() and .hide() methods that trigger transitions and return an observable to be notified when it is done.