Awesome

ng2-emojis

An Angular 2 plugin for emojis support for text inputs and textareas

Installation

npm install ng2-emojis --save

In your app.module.ts, include EmojisModule into the imports array as

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { EmojisModule } from 'ng2-emojis';

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    EmojisModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Wrap your input or textarea element into an emojify-holder container element. And use the emojiInput attribute directive on the input element you want to "emojify" while passing the ngModel value into emojiInputValue property. That ngModel value is supposed to be changed by capturing the emojiAdded event on emojify-holder wrapper element.

<emojify-holder (emojiAdded)="emojiAdded($event)">
    <input type="text" emojiInput [emojiInputValue]="val" [(ngModel)]="val" />
</emojify-holder>

The ts file goes like this

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss']
})
export class AppComponent {
	val: string = '🐘';
	title = 'app works!';
	emojiAdded(v) {
		this.val = v;
	}
}