Angular 14 Draggable Image Carousel Project Using ngx-owl-carousel-o Library in TypeScript

Welcome folks today in this blog post we will be showing the list of images coming from jsonplaceholder api in the form of a carousel animation using the ngx-owl-carousel-o library in browser using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create a new angular project using the below command as shown below

ng new sampleapp

cd sampleapp

And after that you need to install the below libraries using the below command as shown below

npm i ngx-owl-carousel-o

After that you will see the below directory structure of the angular app as shown below

Now we need to go to app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

// Import the library
import { CarouselModule } from 'ngx-owl-carousel-o';
// Needs to import the BrowserAnimationsModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    CarouselModule,
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

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

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

// Import the library

import { CarouselModule } from 'ngx-owl-carousel-o';

// Needs to import the BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

imports: [

BrowserModule,

HttpClientModule,

FormsModule,

BrowserAnimationsModule,

CarouselModule,

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

As you can see we are including the HttpClient and BrowserAnimations Module which is required for this web app and lastly we are including the carousel library as well in the imports array.

Now we need to go to app.component.html file and copy paste the following code

app.component.html

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

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

  </owl-carousel-o>  
</div>

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

<ng-container *ngFor="let slide of apiData">

<ng-template class="slide" carouselSlide [id]="slide.id">

</ng-template>

</ng-container>

</owl-carousel-o>

</div>

As you can see we are attaching the carousel element inside the html and inside it we are attaching the customOptions as well. Now we need to define the options inside the app.component.ts file as shown below

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { throwError } from 'rxjs';

import { OwlOptions } from 'ngx-owl-carousel-o';

export interface PhotosApi {
  albumId?: number;
  id?: number;
  title?: string;
  url?: string;
  thumbnailUrl?: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  apiData: PhotosApi;
  limit: number = 10; // <==== Edit this number to limit API results
  customOptions: OwlOptions = {
    loop: true,
    autoplay: true,
    center: true,
    dots: false,
    autoHeight: true,
    autoWidth: true,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 1,
      },
      1000: {
        items: 1,
      }
    }
  }
  
  constructor(
    private readonly http: HttpClient,
  ) {}

  ngOnInit() {
    this.fetch()
  }


  fetch() {
    const api = `https://jsonplaceholder.typicode.com/albums/1/photos?_start=0&_limit=${this.limit}`;
    const http$ = this.http.get<PhotosApi>(api);

    http$.subscribe(
      res => this.apiData = res,
      err => throwError(err)
    )
  }
}

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { throwError } from 'rxjs';

import { OwlOptions } from 'ngx-owl-carousel-o';

export interface PhotosApi {

albumId?: number;

id?: number;

title?: string;

url?: string;

thumbnailUrl?: string;

}

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent implements OnInit {

apiData: PhotosApi;

limit: number = 10; // <==== Edit this number to limit API results

customOptions: OwlOptions = {

loop: true,

autoplay: true,

center: true,

dots: false,

autoHeight: true,

autoWidth: true,

responsive: {

0: {

items: 1,

600: {

items: 1,

1000: {

items: 1,

}

constructor(

private readonly http: HttpClient,

) {}

ngOnInit() {

this.fetch()

}

fetch() {

const api = `https://jsonplaceholder.typicode.com/albums/1/photos?_start=0&_limit=${this.limit}`;

const http$ = this.http.get<PhotosApi>(api);

http$.subscribe(

res => this.apiData = res,

err => throwError(err)

)

}

As you can see we are making the http get request to the jsonplaceholder api to get the placeholder photos using the fetch api and then we are passing this info to the html template as shown below