@ngodings/ngx-image-tagger

Simple Image Tagger like instagram, easy to put stuff/item information in x/y position from image, easy configuration in Angular

Demo - Angular v15

https://npm.ngodings.com/packages/ngx-image-tagger

Support Me

If you like this package I will be happy that you support me on Buy me a coffee :)
Buy me coffee: https://www.buymeacoffee.com/alidihaw
Indonesia People: https://sociabuzz.com/dihaw

Getting Started

Installing and Importing

Install the package by command:

 npm install @ngodings/ngx-image-tagger --save

Import the module

import { NgxImageTaggerModule } from "@ngodings/ngx-image-tagger";

@NgModule({
    imports: [
        ...
        NgxImageTaggerModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

Usage

Image Tag - Like Instagram - On Hover

<ngx-image-tagger 
    [tagger]="data.taggerHover" 
    [isShowShop]="true" 
    [isShowPrice]="true" 
    [isShowLink]="true" 
    [isShowThumbnail]="true" 
    [isAllowCreate]="false" 
    [placeholderCreateTitle]="'Tag your product!'"
    [placeholderLink]="'Link'"
    [placeholderPrice]="'Price'"
    [onShowTagMode]="'Hover'"
    [imageClassList]="''"
    [inputClassList]="''"
    [backgroundColor]="'#03a9f4'"
    [borderColor]="'#007ac1'"
    [textColor]="'#ffffff'"
    (taggerChange)="data.taggerHover = $event">
</ngx-image-tagger>

Image Tag - Like Instagram - Click Shop

<ngx-image-tagger 
    [tagger]="data.tagger" 
    [isShowShop]="true" 
    [isShowPrice]="true" 
    [isShowLink]="true" 
    [isShowThumbnail]="true" 
    [isAllowCreate]="false" 
    [placeholderCreateTitle]="'Tag your product!'"
    [placeholderLink]="'Link'"
    [placeholderPrice]="'Price'"
    [onShowTagMode]="'IconClick'"
    [imageClassList]="''"
    [inputClassList]="''"
    [backgroundColor]="'#03a9f4'"
    [borderColor]="'#007ac1'"
    [textColor]="'#ffffff'"
    (taggerChange)="data.tagger = $event">
</ngx-image-tagger>

Image Tag - Like Instagram - Create Tag

<ngx-image-tagger 
    [tagger]="data.taggerCreate" 
    [isShowShop]="false" 
    [isShowPrice]="true" 
    [isShowLink]="true" 
    [isShowThumbnail]="true" 
    [isAllowCreate]="true" 
    [placeholderCreateTitle]="'Tag your product!'"
    [placeholderLink]="'Link'"
    [placeholderPrice]="'Price'"
    [onShowTagMode]="'IconClick'"
    [imageClassList]="''"
    [inputClassList]="''"
    [backgroundColor]="'#03a9f4'"
    [borderColor]="'#007ac1'"
    [textColor]="'#ffffff'"
    (taggerChange)="data.taggerCreate = $event">
</ngx-image-tagger>

Image Tag - Like Instagram - On Click Pin

<ngx-image-tagger 
    [tagger]="data.taggerClick" 
    [isShowShop]="true" 
    [isShowPrice]="true" 
    [isShowLink]="true" 
    [isShowThumbnail]="true" 
    [isAllowCreate]="false" 
    [placeholderCreateTitle]="'Tag your product!'"
    [placeholderLink]="'Link'"
    [placeholderPrice]="'Price'"
    [onShowTagMode]="'Click'"
    [imageClassList]="''"
    [inputClassList]="''"
    [backgroundColor]="'#03a9f4'"
    [borderColor]="'#007ac1'"
    [textColor]="'#ffffff'"
    (taggerChange)="data.taggerClick = $event">
</ngx-image-tagger>

Option (Input & Output)

name	description	default value
tagger	Value of the tagger.	refer TaggerModel
isShowShop	Configuration Show/Hide Shop	false
isShowPrice	Configuration Show/Hide Price	true
isShowLink	Configuration Show/Hide Link	true
isShowThumbnail	Configuration Show/Hide Thumbnail	true
isAllowCreate	Configuration for Enabled Create Mode	false
placeholderCreateTitle	Title Modal Create	Tag your product!
placeholderLink	Placeholder for Link	Link
placeholderPrice	Placeholder for Price	Price
onShowTagMode	Mode for Tag (Hover, Click, IconClick)	Hover
imageClassList	Custom class Image
inputClassList	Custom Class Input
backgroundColor	Background color	#03a9f4
borderColor	Border color	#007ac1
textColor	Text color	#ffffff
taggerChange	Output for tag	refer TaggerModel

Development

Prepare your environment

• Install Node.js and NPM
• Install local dev dependencies: npm install while current directory is this repo

License

MIT @ Ali Abdul Wahid