Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

ng-emoji-score

1.0.3 • Public • Published

Angular Emoji Score

An enjoyable package for your readers to explain their reactions with emojis.


Demo

Click here for a live demo.

Installation

You can use npm to install the package.

NPM
npm install --save ng-emoji-score

Use

Follow the steps below to add the ng-emoji-score package to your project.

1. Import NgEmojiScoreModule Import NgEmojiScoreModule in the module you want to use in your application.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
/* Import the module */
import {NgEmojiScoreModule} from 'ng-emoji-score';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgEmojiScoreModule // Import here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

2. Use within HTML In your HTML: Use the <emoji-score> tag where you want to use your project.

<emoji-score
   [customEmojiItems]="emojis"
   [scores]="scores"
   [selectableEmojiCount]="4"
   [selectableLimitMessage]="'You can select up to 4 emoji.'"
   [customClass]="'custom-emoji-score'"
   (emojiSelect)="selectEmoji($event)"></emoji-score>

3. Structure of the array to display emojis Make sure the structure of the array resembles the array shown below; -- Also be sure to include the Emoji model. import {Emoji} from 'ng-emoji-score/lib/emoji.model';

  emojis: Emoji[] = [
    {
      "name": "Çok iyi",
      "label": "cokIyi",
      "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/emojione/211/face-with-tears-of-joy_1f602.png"
    },
    {
      "name": "Yerim",
      "label": "yerim",
      "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/emojione/211/smiling-face-with-heart-shaped-eyes_1f60d.png"
    },
    {
      "name": "Yok artık",
      "label": "yokArtik",
      "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/emojione/211/face-screaming-in-fear_1f631.png"
    },
    {
      "name": "Hoş değil",
      "label": "hosDegil",
      "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/emojione/211/thumbs-down-sign_1f44e.png"
    },
    {
      "name": "Kızgın",
      "label": "kizgin",
      "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/emojione/211/face-with-look-of-triumph_1f624.png"
    },
  ];

4. Structure of the index to display scores Make sure the structure of the array resembles the array shown below; -- Also make sure to include the Score model. import {Score} from 'ng-emoji-score/lib/score.model';

 scores: Score[] = [
    { "label": "cokIyi", "value": 30, "selected": false },
    { "label": "yerim", "value": 49, "selected": true },
    { "label": "yokArtik", "value": 14, "selected": true },
    { "label": "hosDegil", "value": 49, "selected": false },
    { "label": "kizgin", "value": 14, "selected": false }
  ];

5. Method that will work when emoji is selected In your Typescript file;

  selectEmoji(event) {
    console.log(event);
  }

Features

Name Type Required Default Description
customEmojiItems Emoji No - For creating your own emojis.
scores Score Yes - Scores previously given to the article.
selectableEmojiCount number No 3 The maximum number of selectable emoji.
selectableLimitMessage string No You can select up to {{selectableEmojiCount}} emoji. If you want to select more emoji than "selectableEmojiCount", this message will be displayed.
customClass string No - It allows you to give your own style class.

Events

Name Parameters Description
emojiSelect $event To specify the method that will run when the emoji is selected.

Author

Mehmet Sert

Install

npm i ng-emoji-score

DownloadsWeekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

167 kB

Total Files

32

Last publish

Collaborators

  • avatar