Angular 10 OWL Carousel 2: How to Integrate Owl Carousel 2 in Angular

Last updated on by Digamber

In this tutorial, we will understand the profound technique to integrate Owl Carousel 2 in the Angular app. The ngx-owl-carousel-o library is going to help us create an Image slider in Angular.

Read more: Add Custom Next and Previous Arrows in Owl Carousel 2

Create Angular Project

The first step invokes with installing a fresh new angular application installation, but for that, we must have angular CLI installed on our system.

npm install -g @angular/cli

Execute the command to install the angular application:

ng new angular-owl-carousel-example

Get into the project root:

cd angular-owl-carousel-example

Start the app in the browser with below command:

ng serve --open

Intall Owl Carousel Plugin

Additionally, install the owl carousel package in Angular application. So head over to the command prompt and execute the following command.

npm install ngx-owl-carousel-o

Add CarouselModule & BrowserAnimationsModule in AppModule

In order to bring Owl Carousel in action in Angular, we need to import and register CarouselModule and BrowserAnimationsModule services in the main app module class.

CarouselModeul lets you use the Owl Carousel in Angular whereas BrowserAnimationsModule profoundly enables the animation service for you.

Add the following code in the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CarouselModule } from 'ngx-owl-carousel-o';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CarouselModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Add Carousel Styles

Open the angular.json file and move to styles array and add the following owl carousel styling CSS paths.

...
...
...
"styles": [
  "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
  "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",              
  "src/styles.css"
],
...
...
...

Additionally you can add the following imports in src/styles.sass or src/styles.scss:

@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

Creating Owl Carousel in Angular 10

Let’s profoundly have a look; it is as simple as applying butter on bread.

We are using a default app component; however, you can generate a separate component and start implementing the carousel if you want.

Place the below code in the app.component.ts file.

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  constructor() { }

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '›'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      760: {
        items: 3
      },
      1000: {
        items: 4
      }
    },
    nav: true
  }

}

Next up, we have to add the HTML code into the angular HTML template; it is the carousel’s skeleton. So, without further ado, add the code in the app.component.html file.

<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/92c952" alt="img 1">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/771796" alt="img 2">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/24f355" alt="img 3">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/d32776" alt="img 4">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/f66b97" alt="img 5">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/56a8c2" alt="img 6">
    </div>
  </ng-template>
</owl-carousel-o>

Here is the output that you will see in the browser:

Angular 10 Owl Carousel 2 Demo

Creating Dynamic Slides in Angular

Prevously i showed you a simple example, It has has been in practice from the primordial time. Let’s see a bit of an advanced example. We will use *ngFor directive to generate slides in angular dynamically.

Define the dynamic slides array and add the images with id and image alt.

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  dynamicSlides = [
     {
       id: 1,
       src:'https://via.placeholder.com/600/92c952',
       alt:'Side 1',
       title:'Side 1'
     },
     {
       id: 2,
       src:'https://via.placeholder.com/600/771796',
       alt:'Side 2',
       title:'Side 2'
     },
     {
       id: 3,
       src:'https://via.placeholder.com/600/24f355',
       alt:'Side 3',
       title:'Side 3'
     },
     {
       id: 4,
       src:'https://via.placeholder.com/600/d32776',
       alt:'Side 4',
       title:'Side 4'
     },
     {
       id: 5,
       src:'https://via.placeholder.com/600/f66b97',
       alt:'Side 5',
       title:'Side 5'
     }
   ]
 
   constructor() { }

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      760: {
        items: 3
      },
      1000: {
        items: 4
      }
    },
    nav: true
  }

}

Subsequently, add the owl-carousel-o directive to initialize the image slides. You can see ngFor directive iterates over the image array. The sense of profoundness and easiness is there to implement the image slider in angular with owl carousel.

<owl-carousel-o [options]="customOptions">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

Owl Carousel Custom Events

There are couple of events and methods that spruce up the Angular owl carousel functinality.

translated

The translated event triggers right after the carousel completes the translating and exposes the object of the type SlidesOutputData.

<owl-carousel-o [options]="customOptions" (translated)="getPassedData($event)">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

The code for adding translated event is the following:

import { Component } from '@angular/core';
import { SlidesOutputData, OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  activeSlides: SlidesOutputData;

  getPassedData(data: SlidesOutputData) {
    this.activeSlides = data;
    console.log(this.activeSlides);
  }

  dynamicSlides = [
     {
       id: 1,
       src:'https://via.placeholder.com/600/92c952',
       alt:'Side 1',
       title:'Side 1'
     },
     {
       id: 2,
       src:'https://via.placeholder.com/600/771796',
       alt:'Side 2',
       title:'Side 2'
     },
     {
       id: 3,
       src:'https://via.placeholder.com/600/24f355',
       alt:'Side 3',
       title:'Side 3'
     },
     {
       id: 4,
       src:'https://via.placeholder.com/600/d32776',
       alt:'Side 4',
       title:'Side 4'
     },
     {
       id: 5,
       src:'https://via.placeholder.com/600/f66b97',
       alt:'Side 5',
       title:'Side 5'
     }
  ]
 
  constructor() { }

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      760: {
        items: 3
      },
      1000: {
        items: 4
      }
    },
    nav: true
  }

}

dragging

The event dragging is called right after the user begins dragging the carousel.

<owl-carousel-o [options]="customOptions" (dragging)="startDragging($event.dragging)">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>
...
...
...
  startDragging(event){
    console.log(event);
  }
...
...
...

initialized

It is called right after the carousel gets initialized and reveals the object of the type SlidesOutputData.

<owl-carousel-o [options]="customOptions" (initialized)="getData($event)">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>
import { SlidesOutputData, OwlOptions } from 'ngx-owl-carousel-o';

...
...
...
getData(data: SlidesOutputData) {
    console.log(data);
}
...
...
...

Summary

Eventually, we have completed the Angular 10/9 Owl Carousel tutorial. In this tutorial, we saw how to implement a simple and dynamic carousel in Angular 10. We also threw light on the owl carousel events and methods for knowing more about the owl carousel; you can check out their documentation here.