How to make input field or textarea with emoji-picker in angular?

Question

new-status.component.ts

<mat-form-field>
  <textarea matInput placeholder="Status Content" style="height: 200px;"></textarea>
  <emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
</mat-form-field>

i follow this link for solution(https://github.com/TypeCtrl/ngx-emoji-mart), now i want put emoji picker in input field or textarea.

Answer 1

let's begin by

npm install @ctrl/ngx-emoji-mart

then,

import { PickerModule } from '@ctrl/ngx-emoji-mart'

add the stylesheet in angular.json:

"styles": [
          "src/styles.css",
          "../node_modules/@ctrl/ngx-emoji-mart/picker.css"
        ],

add the module in the imports array of app.module.ts:

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

finally add for testing to see if all work in app.component.html :

<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>  

That's it :-)

https://stackblitz.com/edit/angular-rxanqx?file=src%2Fapp%2Fapp.component.html

EDIT

There is a raw approach you need to stylisize.

https://stackblitz.com/edit/angular-rxanqx

you have a textarea a button to add an emoticon to your text.

let me know if it's a good way for you to start :-)

Answer 2

I know its late but maybe someone else could use it.

I have improved those available solutions. emoji should be inserted on carrot position, and we should be able to undo ,redo on message box here is solution.

HTML

 <textarea #input [formControl]="message" (keydown.enter)="send()"> </textarea>
    
    <emoji-mart
       title="Pick your emoji…"
       (emojiSelect)="addEmoji($event)"
       [hideObsolete]="true"
       [isNative]="true">
    </emoji-mart>

TS

    addEmoji(selected: Emoji) {
            const emoji: string = (selected.emoji as any).native;
            const input = this.input.nativeElement;
            input.focus();
        
            if (document.execCommand){ // document.execCommand is absolute but it //add support for undo redo and insert emoji at carrot position
//any one has better solution ?
    
              var event = new Event('input');
              document.execCommand('insertText', false, emoji);
              return; 
            }
               // insert emoji on carrot position
            const [start, end] = [input.selectionStart, input.selectionEnd]; 
            input.setRangeText(emoji, start, end, 'end');
          }