In this article, we discuss How To Use Owl Carousel In Angular 8

How To Use Owl Carousel In Angular 8

How To Use Owl Carousel In Angular 8
How To Use Owl Carousel In Angular 8

How To Use Owl Carousel In Angular 8

ngx-owl-carousel-o

ngx-owl-carousel-o is built for Angular >=6.0.0. It doesn’t use jQuery.

Compatibility

ngx-owl-carousel-oAngular
6.x.x12.x.x
5.x.x (latest 5.1.0)11.x.x
4.x.x (latest 4.1.0)10.x.x
3.x.x (latest 3.1.1)9.x.x
2.x.x (latest 2.1.1)8.x.x
1.x.x (latest 1.2.1)7.x.x
0.x.x (latest 0.1.2)6.x.x
How To Use Owl Carousel In Angular 8

Note: Must Install Comparability Version

Get started

  1. Run yarn add ngx-owl-carousel-o or npm install ngx-owl-carousel-o or ng add ngx-owl-carousel-o.
  2. Add styles (one of these variants).
    • angular.json:
"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.sass" or "src/styles.css"
  ],

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';
  1. Import RouterModule and Routes into AppModule unless they are imported.
  2. Import BrowserAnimationsModule into AppModule unless it is imported.
  3. Import CarouselModule into a module which declares a component intended to have a carousel.
import { CarouselModule } from 'ngx-owl-carousel-o';
@NgModule({
  imports: [ CarouselModule ],
  declarations: [ CarouselHolderComponent ]
})
export class SomeModule { }

Add to needed component customOptions or named in different way object with options for the carousel:

import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  selector: '....',
  templateUrl: 'carousel-holder.component.html'
})
export class CarouselHolderComponent {
  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}

Add html-markup to the template of the component (in this case, add it to carousel-holder.component.html):

 <div>Some tags before</div>
  <owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide>Slide 1</ng-template>  
    <ng-template carouselSlide>Slide 2</ng-template>  
    <ng-template carouselSlide>Slide 3</ng-template>  
  </owl-carousel-o>
  <div>Some tags after</div>

or

 <div>Some tags before</div>
  <owl-carousel-o [options]="customOptions">

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

  </owl-carousel-o>
  <div>Some tags after</div>

How To Use Owl Carousel In Angular 8

NOTE: Each slide has an id. If it isn’t supplied like in the first example given to p. 7, the code generates it automatically and expose one when the event translated fires. Info about this event is below. Follow the link event translated.

NOTE: Custom id must have the type string.

NOTE: Using ngx-owl-carousel-o with options animateOut and animateIn requires adding animate.css. Steps are the following:

  1. yarn add animate.css or npm install animate.css.
  2. Add styles to angular.json:
"styles": [
    "node_modules/animate.css/animate.min.css"
  ],

Setting custom slides ids

It’s possible to set own id to every slide.

Every id must have the type string. Otherwise, slides won’t get ids what will cause one problem, which appears when the developer uses the option responsive. Slides won’t be shown when the width of the screen changes and the carousel has to apply new settings according to the defined breakpoint. This is because the code uses ids of slides in order to assign new data to slides. So if you change the width of the screen and slides disappear, there could be the problem with setting id.

If ids aren’t set explicitly, they will be created automatically.

The example of setting ids:

<div>Some tags before</div>
  <owl-carousel-o [options]="customOptions">

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

  </owl-carousel-o>
  <div>Some tags after</div>

How To Use Owl Carousel In Angular 8

Options

ngx-owl-carousel-o uses the same options as Owl Carousel. Explanations of meanings and the usage of options are in Owl Carousel Documentation.

NOTEngx-owl-carousel-o has the different usage of some of them. Mostly this is about options which require setting data- attributes to DOM-elements and which set names of classes and tags in the HTML-markup. The usage of these options is explained below.

Options which require setting data- attributes are:

merge

The original Owl Carousel requires setting data-merge to each slide besides setting merge=true. In this lib data-merge is changed to dataMerge , which is the @Input property of the <ng-template[carouselSlide]> directive. The way of setting it is:

<ng-template carouselSlide [dataMerge]="number">Slide text or HTML markup</ng-template>

the number must be 1, 2, 3 or any other integer numbers. If dataMerge isn’t provided, its value will be 1 (this is the default value).

How To Use Owl Carousel In Angular 8

autoWidth

The option autoWidth=true is working if user sets the @Input prop width to <ng-template[carouselSlide]> directive. The example:

<ng-template carouselSlide [width]="number">Slide text or html markup</ng-template>

When the width isn’t provided for a certain slide and is provided for other slides, firstly it will be 0 (this is the default value). At the end it will be calculated as (width of carousel)/(items) (e.g. carouselWidth=1200 and items=4, the width of the slide will be 1200/4=300).

In other words, the width of the slide with unprovided width will be set according to how much space in visible carousel window the slide must take. E.g. if there must be 2 visible slides, the width of the item will be half of the carousel window.

responsiveBaseElement

The option responsiveBaseElement doesn’t work. In the original Owl Carousel, all responsive breakpoints are corresponding to window width. Here they are corresponding to the width of the element <div class="owl-carousel"> which takes 100% of its parent element width.

fallbackEasing

The option fallbackEasing doesn’t work because it’s being used by $.animate() in Owl Carousel created by means of jQuery. There’s no such function in Angular.

info

The option info doesn’t work.

How To Use Owl Carousel In Angular 8

navElement, navContainer, navContainerClass, navClass, dotContainer, dotClass and dotsClass

These options don’t work.

OptionExplanation
navElement: ‘div’this tag is set explicitly in the View of CarouselComponent
navContainer: falseis removed
navContainerClass: ‘owl-nav’this css-class is set explicitly in the View of CarouselComponent
navClass: [ ‘owl-prev’, ‘owl-next’ ]this css-class is set explicitly in the View of CarouselComponent
dotClass: ‘owl-dot’this css-class is set explicitly in the View of CarouselComponent
dotsClass: ‘owl-dots’this css-class is set explicitly in the View of CarouselComponent
dotsContainer: falseis removed
How To Use Owl Carousel In Angular 8

nestedItemSelector

The option nestedItemSelector doesn’t work.

itemElement, itemClass, stageElement, stageOuterClass, stageClass, refreshClass, loadedClass, loadingClass, rtlClass, responsiveClass, dragClass and grabClass

These options don’t work.

OptionExplanation
itemElement: ‘div’this tag is set explicitly in the View
itemClass: ‘owl-item’this css-class is set explicitly in the View
stageElement: ‘div’this tag is set explicitly in the View
stageClass: ‘owl-stage’this css-class is set explicitly in the View
stageOuterClass: ‘owl-stage-outer’this css-class is set explicitly in the View
refreshClass: ‘owl-refresh’this css-class is removed. Class ‘owl-refreshed’ is used instead. It’s set explicitly in the View and reflected by OwlDOMData.isRefreshed
loadedClass: ‘owl-loaded’this css-class is set explicitly in the View and reflected by OwlDOMData.isLoaded
loadingClass: ‘owl-loading’this css-class is set explicitly in the View and reflected by OwlDOMData.isLoading
rtlClass: ‘owl-rtl’this css-class is set explicitly in the View and reflected by OwlDOMData.rtl
responsiveClass: ‘owl-responsive’this css-class is set explicitly in the View and reflected by OwlDOMData.isResponsive
dragClass: ‘owl-drag’this css-class is set explicitly in the View and reflected by OwlDOMData.isDragable
grabClass: ‘owl-grab’this css-class is set explicitly in the View and reflected by OwlDOMData.isGrab
How To Use Owl Carousel In Angular 8

How To Use Owl Carousel In Angular 8

lazyLoad

There’s no need to set to <img> attributes data-src and data-src-retina because Angular has its own realization for <img>. In Angular it’s better to write <img [src]="someURL">src is the data-binding, which means Angular will set the value to the native attribute src of <img> after loading its core code. Original Owl Carousel reads data-src and sets the native attribute src at needed moment. Of course, ngx-owl-carousel-o has additional tricks for lazy loading images (better to say the content of slides) put into slides.

skip_validateItems

By default, this option is set to false. This option changes the number of visible slides in the case, when the number of slides is less than the value of the option items. For example, when the items=4 and there’re just 3 slides, the carousel will reassign the value of items to 3.

When the option skip_validateItems is true, the carousel won’t reassign the items. So, in the example above items will remain 4. But there will be 3 slides and one empty place. This for the case when the option loop=false. When loop=true, the empty place will be populated by the copy of the first slide.

How To Use Owl Carousel In Angular 8

owlRouterLink

The directive owlRouterLink is introduced for making impossible the navigating between components while the carousel is dragging.

This directive has the same features as the native routerLink directive. One exception is the property stopLink. It prevents the navigating to another component.

This directive is included into CarouselModule, which must be imported into a needed module before using the ngx-owl-carousel-o. So, to use this directive, you just need to write it inside the needed slide.

Example of usage this directive:

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

    <ng-container *ngFor="let item of carouselData">
      <ng-template carouselSlide>
        <div class="slider">
          <a [owlRouterLink]="['/present']" [stopLink]="isDragging">{{item.text}}</a>
          <a class="outer-link" href="https://www.google.com">
            <span>{{item.text}}</span>
          </a>

        </div>
      </ng-template>
    </ng-container>

  </owl-carousel-o>

<a [owlRouterLink]="['/present']" [stopLink]="isDragging">{{item.text}}</a> contains owlRouterLink directive and its @Input property stopLink.

<a owlRouterLink="'/present'" [stopLink]="isDragging">{{item.text}}</a> is also possible way of using this directive.

In the example above, we see the usage of dragging event, owlRouterLink, and stopLink. When the dragging of the carousel starts, the dragging event notifies about it by passing object

{
  dragging: true,
  data: {}
}

The value of the prop dragging is assigned to the isDraggable property. Then this property is passed into owlRouterLink through stopLink. Directive gets aware of dragging the carousel and prevents any navigations.

When the dragging of the carousel is finished, dragging passes object

{
  dragging: false,
  data: {}
}

isDraggable gets updated, which causes the change of stopLink. Now its value is false. This enables navigating during the next simple click on <a> locating in the slide unless new dragging starts.

So, to use <a> in any slide, it’s recommended to:

  • use dragging event and property isDragging (or named differently);
  • use owlRouterLink directive;
  • use stopLink property of owlRouterLink. It’s needed to pass to this prop isDragging. Using of stopLink is required.

The real example is here.

The <a href="someUrl"> has the automatic preventing navigation during dragging.

Also Check out Angular 8 REST API and HttpClient Examples

Owl Carousel, Owl Carousel in Angular, Angular 8, how we can use the Owl Carousel in Angular 8, Owl Slider in Angular, Owl Installation in Angular, npm Owl Corousel,

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice