npm i ngx-emoji-picker
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; import { NgxEmojiPickerModule } from 'ngx-emoji-picker'; @NgModule({ imports: [ BrowserModule, FormsModule, NgxEmojiPickerModule ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { toggled: boolean = false; message: string = ''; handleSelection(event) { console.log(event.char); this.message += event.char; } } |
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="colinput"> <input [(ngModel)]="message" [ngModelOptions]="{ standalone: true }" (keypress)="IsTyping()" type="text" placeholder="Write your message..." /> <i class="attachment" (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'top'" (emojiPickerSelect)="handleSelection($event)" >😄</i > <button class="submit"> Send <i class="fa fa-paper-plane" aria-hidden="true"></i> </button> </div> |
FULL SOURCE CODE