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

• Github/MehmetSert
• Linkedin/mehmet-sert
• Twitter/mehmetsert_11
• Instagram/mehmetsert_11
• Kodumunblogu/mehmet-sert-11