Angular 8/9 Owl Carousel 2 Using ngx-owl-carousel-o Tutorial by Example

Owl Carousel 2 is one of the most popular images and content slider library. It provides a number of feature which makes it compatible and fully controlled and customizable carousel plugin. Moreover, its awsome support for the responsive environment makes it a better choice.

In this tutorial, we will discuss how to add Owl Carousel 2 in Angular’s latest version 9 using the ngx-owl-carousel-o package.

Here we will discuss all features, options, and events to fully customize and control the view of Owl Carousel 2.

Let’s begin!

Install the latest version of Angular using the below command,

or update it to the latest version 9 by following steps explained here.

1) Install Owl Carousel

To install Owl Carousel in Angular project, open terminal at project root and run following NPM command:

2) Update App Module

For using Owl Carousel component in project, open the app.module.ts file them import CarouselModule and also BrowserAnimationsModule to enable an animation on carousel slide.

Note: For demo purpose, we created a new component OwlCarouselDemoComponent, just run $ ng generate component components/owl-carousel-demo   to quickly create one.

3) Adding CSS/ SCSS for Carousel

There two methods to add stylings in the project for carousel

Update the angular.json file’s styles property:

Or by adding imports in src/styles.sass or src/styles.scss:

4) Adding Simple Owl Carousel

The simplest implementation of Owl Carousel starts by importing OwlOptions in component class which is used to configure the carousel properties:

In the owl-carousel-demo.component.html file add an owl-carousel-o directive component to wrap multiple carouselSlide directive for each slide as shown below:

This will create Owl carousel which looks like this:

Using Dynamic Object of Slides

Slides in an Owl Carousel can be generated by looping over an object using *ngFor directive as shown below:

with an object slidesStore with a local or server-side response:

Event & Methods

Let’s check some events available for the carousel.


This is fired after the carousel finishes the slide event or transitional animations. It returns the starting slide and set of visible slides.


This is fired after the user starts or stops dragging the carousel, return true on start and false when stops.


This is fired when the carousel initialized after page loads.


It fires after each change in the carousel (click on dots, nav buttons).


It fires when the user clicks dots or nav buttons and new data about active slides becomes known.


Leave a Reply

Notify of