@sedeh/tagger v3.0.0

Welcome to tagger!

Have you ever been in need of a tagger that can tag a product or show a product as a favourite or some other purpose without writing much of a code? Tagger will tag items in the order being tagged. But wait. What if your user tag items in different days and you care about segregating them by date when displaying them back in a seperate page. No worries, you can set the tagger to remember dates of entry as well!

Live Demo | NPM | Comments/Requests

MODULE:     TaggerModule
DIRECTIVE:  TaggerDirective
INTERFACE:  TagInfo
SERVICE:    TaggerService

DEPENDENCIES: 
	"font-awesome": "^4.7.0", 
	"@sedeh/wizard-storage": "^1.2.5"

Functionalities

Interfaces

interface TagInfo {
    tagDate: Date,
    taggedItem: any
}

Events

Attributes

Service methods

Recommend to only use hasTaggedItem, indexOfTaggedItem, getTaggedItems, and setTaggedItems unless if you are bypassing the tagger directive.

Sample usage

how to use it on any html node?

Use tagger directive on a node
<span 
    tagger="image-box" 
    taggableClass="fa fa-tag" 
    taggedClass="fa fa-minus-square" 
    position="bottom:right" 
    [sticky]="true" 
    [dateEnabled]="true" 
    [taggerTag]="myImageUrl"
	(taggerChanged)="itemTagUpdate($event)">
	<img [src]="myImageUrl" height="100px" />
</span>

how to use it in conjunction with into-pipes?

Use both into and tagger directive.
<span 
    rawContent="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" 
    into="video:auto:100px:alt text"
    intoName="video 1" intoId="video1" 

    tagger="video-box"
    taggerTag="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
    (taggerChanged)="itemTagUpdate($event)">
</span>

Once you receive the taggerChanged notification, use the TaggerService to retrieve the data for the tagger id sent to you as the event to save it in data base of your choice.

itemTagUpdate(event) {
    if (event.taggedItem) { // when tagger dateEnabled is set
        const list = this.taggerService.getTaggedItems(event.tagger);
        // save the list in database here..
    } else {
        const list = this.taggerService.getTaggedItems(event);
        // save the list in database here..
    }
}

Revision History