Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 23, 2023

 

 

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

 

 

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

 

 

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

 

 

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

 

 

TypeScript
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
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

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme