What is sg-image-viewer?
An "image viewer component" is used to view multiple images in a gallery-like format, allowing users to easily switch between related pictures.
The image viewer component seamlessly integrates with the rest of the application, it directly access the data from the application's in JSON format.
Overall, the tight integration of the image viewer component with the application's core infrastructure ensures a fast, reliable, and scalable solution for image rendering and management.
In this article we will go over how to integrating sg-image-viewer component with Angular, React and Vue Applications in detail.
Getting Started
Use the below command to add your package in your application
npm i sg-image-viewer
You can consume it in your application as shown below:
<sg-image-viewer imageList='IMAGE_JSON_DATA_LIST' ></sg-image-viewer>
Please note your can provide your list of images as the imageList value which returns as JSON Array. Your JSON Array looks something like this. It has 3 properties url, title and description.
[
{
"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg",
"title": "Butterfly",
"description":"Butterfly"
},
{
"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg",
"title": "Coffee with Milk",
"description":"Coffee with Milk"
},
];
Options :
Please find the complete options avaliable for the user to configure it based on their needs.
Pagniation will be added at the bottom as default. Default page size is 10 per page
Examples:
1. Integrating with Angular Application
Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.
npm i sg-image-viewer
Your package.json will be updated with the component as shown below.
Step 2: Adding the Custom Elements in main.js
Add an import to main.ts
import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';
And somewhere near the bottom we’ll call this function.
defineCustomElements();
your main.js file looks like this
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';
platformBrowserDynamic().bootstrapModule(AppModule, {
ngZoneEventCoalescing: true
})
.catch(err => console.error(err));
defineCustomElements();
Step 3: Adding the Custom Elements Schema in your module
Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.
import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;
and then
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
Your app.module.ts should look like this:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.
Step 4: Declare the imageList data
In your Angular component's TypeScript file, declare the arrayData that you are passing. I am adding it in app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'angular-webcomponent';
arrayData =[{"url": "https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg","title": "Horse", "description": "Horse"},
{"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
{"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
{"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
{"url": "https://i.ibb.co/L1m1NxP/girl.jpg", "title": "Mountain Girl", "description":"Mountain Girl"},
{"url": "https://images.pexels.com/photos/1559117/pexels-photo-1559117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "title": "Winter", "description":"Winter"},
{"url": "https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg", "title": "Koi Fish", "description":"Koi Fish"},
{"url": "https://i.ibb.co/dBCHzXQ/paris.jpg", "title": "Paris Eiffel", "description":"Paris Eiffel"},
{"url": "https://i.ibb.co/JKB0KPk/pizza.jpg", "title": "Pizza Time", "description":"Pizza Time"},
{"url": "https://i.ibb.co/VYYPZGk/salmon.jpg", "title": "Salmon ", "description":"Salmon"},
{"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"}
];
imageList =this.arrayData ;
}
Step 5: Consume it in your Html file.
Now, in app.component.html add the sg-image-viewer component.
<sg-image-viewer [imageList]="arrayData" mode="carousel" gallery-style="frame"></sg-image-viewer>
your output will be like this
2. Integrating with React Application
Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.
npm i sg-image-viewer
Step 2: Now we'll add an import to _index.js
import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';
And somewhere near the bottom we'll call this function.
defineCustomElements();
Step 3: Next, in app.js Pass the json array and utilize the new custom element,
function App() {
const arrayData =[{"url":
{"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
{"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
{"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
];
return (
<div className="App">
<sg-image-viewer imageList={arrayData}></sg-image-viewer>
</div>
);
}
your output will be like this
3. Integrating with Vue Application
Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.
npm i sg-image-viewer
Step 2: Add defineCustomElements to one of our main files. Specifically main.js for Vue.
import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';
And somewhere near the bottom we'll call this function.
defineCustomElements();
Step 3: Next, in App.Vue you consume the custom element.
<template>
<div>
<sg-image-viewer :image-list="JSON.stringify(arrayData)"
gallery-style="flexbox" header="true" header-title="sg-image-
viewer" isvue></sg-image-viewer>
</div>
</template>
<script>
export default {
data() {
return {
arrayData:[{"url": "https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg","title": "Horse", "description": "Horse"},
{"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
{"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
{"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
{"url": "https://i.ibb.co/L1m1NxP/girl.jpg", "title": "Mountain Girl", "description":"Mountain Girl"},
{"url": "https://images.pexels.com/photos/1559117/pexels-photo-1559117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "title": "Winter", "description":"Winter"},
{"url": "https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg", "title": "Koi Fish", "description":"Koi Fish"},
{"url": "https://i.ibb.co/dBCHzXQ/paris.jpg", "title": "Paris Eiffel", "description":"Paris Eiffel"},
{"url": "https://i.ibb.co/JKB0KPk/pizza.jpg", "title": "Pizza Time", "description":"Pizza Time"},
{"url": "https://i.ibb.co/VYYPZGk/salmon.jpg", "title": "Salmon ", "description":"Salmon"},
{"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"}
],
myArray: [
{ "url": "https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg", "title": "Horse" , "description": "Horse"},
{"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
],
}
}
};
</script>
your output will be like this
Click Here for Vue application live demo.
Hope this article is useful to you and your project, If you like this article, like & share it with your friends.
Follow Me for more articles.
Top comments (0)