To install this library, run:

$ npm install ng2-emoji --save

See the live example (Angular4 project) here

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 '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/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:';
    }
}

Clone the repository:

git clone https://github.com/AhsanAyaz/ng2-emoji

Install dependencies

npm install

To build the library:

npm run build

To generate the spritesheet :

gulp sprite

To lint all *.ts files:

npm run lint

Perform the following steps to serve the Angular example locally. Navigate to http://localhost:4200 after that.

cd example
npm install
ng serve

Feel free to contribute to this repo by:

• Adding Examples
• Resolving open issues

Thanks to Juan Carlos for the amazing Angular example

MIT © Ahsan Ayaz