https://github.com/paramsinghvc/ng2-emojis

An Angular 2 plugin for emojis support for text inputs and textareas
https://github.com/paramsinghvc/ng2-emojis

angular angular-2 angular2 emoji emoticons plugin rollup textarea typescript unicode

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/paramsinghvc/ng2-emojis
• Owner: paramsinghvc
• License: mit
• Created: 2017-02-26T17:24:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-02-26T17:55:36.000Z (over 7 years ago)
• Last Synced: 2024-07-05T13:54:32.618Z (2 months ago)
• Topics: angular, angular-2, angular2, emoji, emoticons, plugin, rollup, textarea, typescript, unicode
• Language: TypeScript
• Size: 47.9 KB
• Stars: 4
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng2-emojis - An Angular 2 plugin for emojis support for text inputs and textareas. (Uncategorized / Uncategorized)

README

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

```

    

```

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;

	}

}

```