@standuply/ng2-emoji

Installation

To install this library, run:

$ npm install @standuply/ng2-emoji --save

Usage

VERY IMPORTANT In one of your css/scss files. include these styles:

.emoji{
    display:inline-block;
}

In your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { Ng2EmojiModule } from '@standuply/ng2-emoji';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Include the awesome
    Ng2EmojiModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your index.html:

<link href="./node_modules/@standuply/ng2-emoji/css/ng2-emoji.css" rel="stylesheet">

OR if using angular-cli.json, use:

 "apps": [
    {
      ...
      "styles": [
        "styles.css",
        "../node_modules/ng2-emoji/css/ng2-emoji.css"
      ],
      ...
  ]

In your component where you want to use ng2-emoji, just use:

 <div class="message-container" [innerHTML]="myMessageString | emojis">
 </div>

where the model myMessageString inside your @Component will be:

...
export class MyComponent {
    public messageString: String = "";
    constructor() {
        this.myMessageString = 'Hello, how are you? :smile: It was fun at the bowling game the other day :joy:';
    }
}