README
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. |