Search code examples
htmlangularemoji

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

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.

Solution

  • 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 :-)