angularemoticons

How to remove a boundary from a emoticon in Angular. Tried it with ngx-emoji

I want to show emoticons in my Angular app, but without a boundary or border just only the emoticon.

Normal HTML code in an Angular template like this doesn't show an emoticon:

<p style="font-size:100px">&#128540;</p>
<p>I will display &#128540;</p>

I have tried to install the @ctrl/ngx-emoji-mart from npm.

After successful installation I tried this:

<ngx-emoji [emoji]="{ id: 'face_with_rolling_eyes', skin: 2, native: true }" size="24"></ngx-emoji>

This shows an emoticon but with a border. I don't want the border, how to remove it?

By the way I don't need an extra library like ngx-emoi-mart in my app. I only need to show a smiley emoticon and a sad emoticon. How to do this in Angular?

I have added a stackblitz https://stackblitz.com/edit/angular-3gmd9q

Solution

  • ngx-emoji adds button tag to your html. You need to add css to remove button styling. Try using this.

    button.emoji-mart-emoji {
    background: white;
    border: 0;
}