Ng-emoji-picker-material NPM

Angular 5 Emoji Picker for Material

Important / Credits

This package is based on https://github.com/lbertenasco/ng-emoji-picker I've started to adapt it for material

Usage

Install through npm

npm install ng-emoji-picker-material --save # Angular >= 5

In your module file for your angular project.

import {EmojiPickerModule} from 'ng-emoji-picker-material';

@NgModule({
  ...
  imports: [
      EmojiPickerModule
  ],
  ...
})

Components

<emoji-input>

  <emoji-input></emoji-input>

Parameters

[popupAnchor] : 'top' (default) : 'bottom' Where to anchor the emoji popup

[onEnter] : method to run when users presses enter key. If you want to use your parent scope inside the function make sure to bind the function ([onEnter]="onEnterFunction.bind(this)")

[group] : assign FormGroup

[autofocus] : autofocus on the textarea/input right after the component is created.

[(model)] : model value to two-way bind to input fields ngModel

[inputClass] : assigns a class name to the emoji input or textArea.

[searchClass] : assigns a class name to the search input

[closeAfterSelection] : boolean: defaults true. If true closes the emoji popup after selecting an emoji.

(setPopupAction) : outputs a binding function to this.openPopup(status: boolean = null). Call the function without parameters to toggle the picker popup.

(keyup) : outputs the keyup event on the textarea/input.

(focus) : outputs the event when focus on the textarea/input.

(blur) : outputs the event when blur outside the textarea/input.

(emojiClick) : outputs the emoji character clicked.

Example

@Component({})

export class ExampleComponent {

    public openPopup: Function;
    public form: FormGroup;

    setPopupAction(fn: any) {
        this.openPopup = fn;
    }
}

<emoji-input
  [(model)]="bindedVariable"
  [group]="form"
  [onEnter]="onEnterFunction"
  [popupAnchor]="'bottom'"
  (setPopupAction)="setPopupAction($event)">
</emoji-input>

Submitting an Issue

If you're confident that you've found a bug in ng-emoji-picker-material, please open an issue, but check to make sure it hasn't already been submitted. When submitting a bug report, please include a Gist that includes a stack trace and any details that may be necessary to reproduce the bug, including your browser, version of ng-emoji-picker-material, and operating system. Ideally, a bug report should include a pull request with failing specs.