0.0.10 • Published 5 years ago
ngx-emoji-picker-lagily v0.0.10
Ngx-Emoji-Picker
This project was forked from the ionic3-emoji-picker project created by danielehrhardt
What's New
- Fixed the AOT (Ahead Of Time) Compile error or simply put the ---prod build compile error.
- Upgraded the library from a Ng2 project to a Ng7 project.
- Upgraded the library RxJs from v5 to v6 to make it support new angular versions.
Now compatible with Ng2 - Ng7 projects and as well as Ionic 3/4.
Installation
Install the module via NPM
npm i ngx-emoji-picker --save
Import it in your app's module(s)
Import EmojiPickerModule.forRoot()
in your app's main module
app.module.ts
import { NgxEmojiPickerModule } from 'ngx-emoji-picker';
@NgModule({
...
imports: [
...
NgxEmojiPickerModule.forRoot()
],
...
})
export class AppModule {}
If your app uses lazy loading, you need to import EmojiPickerModule
in your shared module or child modules:
import { NgxEmojiPickerModule } from 'ngx-emoji-picker';
@NgModule({
...
imports: [
...
NgxEmojiPickerModule
],
...
})
export class SharedModule {}
Sample
Angular Example
<i
(click)="toggled = !toggled"
[(emojiPickerIf)]="toggled"
[emojiPickerDirection]="'bottom' || 'top' || 'left' || 'right'"
(emojiPickerSelect)="handleSelection($event)">😄</i>
toggled: boolean = false;
handleSelection(event) {
console.log(event.char);
}
Ionic 3 Example
<ion-textarea [(ngModel)]="message"></ion-textarea>
<button ion-button clear icon-only (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'top'"
(emojiPickerSelect)="handleSelection($event)">
<ion-icon name="md-happy"></ion-icon>
</button>
toggled: boolean = false;
message: string;
handleSelection(event) {
this.message += event.char;
}
Directive API:
<button ion-button
(click)="toggled = !toggled"
[(emojiPickerIf)]="toggled"
[emojiPickerDirection]="'bottom' || 'top' || 'left' || 'right'"
(emojiPickerSelect)="handleSelection($event)">
<ion-icon name="md-happy"></ion-icon>
</button>
Emitter (emojiPickerSelect)="handleSelection($event)"
$event = EmojiEvent{ char : "😌", label : "relieved" }
EmojiPickerCaretEmitter
added for your convenience, emits information regarding a contenteditable enabled element
Emitter (emojiPickerCaretEmitter)="handleCaretChange($event)"
$event = CaretEvent{ caretOffset: 13, caretRange: Range{...}, textContent: 'content of div or input' }
Emoji Picker will get placed relative the element chosen via the directive api, centered and within window borders