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