Integrate Emoji in Angular 6 chat application

Question

I am trying to integrate Emoji in my Angular 6 Chat application using the library called ngx-emoji-mart

below is my code

My template file - chat.component.html

<div #emojiDiv class="emojiInput" contentEditable="true" [innerHTML]="input"  >
</div>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart> 

My component class - chat.component.ts

import { Component, OnInit, ViewEncapsulation, ElementRef } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css'],
  encapsulation: ViewEncapsulation.None,
})


export class ChatComponent implements OnInit {

constructor() { }
ngOnInit() {

}

public addEmoji(){
    if(this.input) {
      this.input = this.input + "<ngx-emoji emoji='point_up'></ngx-emoji>";
     } else{
      this.input = "<ngx-emoji emoji='point_up'></ngx-emoji>";
     }
 }
}

But is not appending to div.

Is there something else I need to add? Thanks in advance

Answer 1

npm install @ctrl/ngx-emoji-mart

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 this app.module.ts:

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

Add this in app.component.html

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

Hola !!