In this tutorial, I am going to show you how to integrate Owl Carousel 2 in your Angular app. The ngx-owl-carousel-o library is going to help us create an Image slider in Angular. You can see a preview of this slider from here.

Prerequisites

  • Angular CLI installed on our system

    • To continue with this tutorial you should have installed Angular CLI in your pc. If not run below command in your terminal

    1
    npm install -g @angular/cli

    Create Angular Project

    I am going to implement this carousel in a new project. So, to create new Angular project run below command in your terminal 
    1
    ng new angular-owl-carousel-example

    Now get in to the newly created Angualr application by running below command in your terminal:

    1
    cd angular-owl-carousel-example

    Start your app in the browser with below command:

    1
    ng serve --open

    Install Owl Carousel Plugin

    Now we need to install the owl carousel package in Angular application. So head over to your command prompt and execute the following command: 
    1
    npm install ngx-owl-carousel-o

    Add Carousel Module & BrowserAnimations Module

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

    CarouselModeule allow you to 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.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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

    Next we need to add carousel styles to the styles arrays. To add it, Open the angular.json file and move to styles array and add the following owl carousel styling CSS paths 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ...
    ...
    ...
    "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"
    ],
    ...
    ...
    ...

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

    1
    2
    @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

    In here I am using a default app component; however, you can generate a separate component and use it for implementing the carousel if you want.

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    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
      }

    }

    Now open your app.component.html file and paste below code in it.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <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>

    Creating Dynamic Slides in Angular

    Prevously I showed you a simple example. Let’s see a bit of an advanced example. We will use *ngFor directive to generate slides in angular dynamically.

    To create our Slides Dymnamic, we need to refactor our app.component.ts according to below way.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    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
      }
    }

    Then open your app.component.html and paste below code in it.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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>

    Summary

    In this tutorial, I showed you how to intergrade Owl Carousel in Angular. To knowing more about the owl carousel, you can check out their documentation here. You can find the source code of this application from here.