Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Emoji Picker

Emoji Picker is an overlay picker for choosing one Unicode emoji from a categorized list. Open it from a button or toolbar action with [ngsEmojiPickerTriggerFor], then use emojiSelected to receive the selected emoji string.

Use it in comments, chats, quick messages, reactions, comment/editor toolbars, social features, and any text entry flow where users need to insert or choose an emoji. Do not use it for interface icons, action menus, complete text editing, stickers, GIFs, or media pickers.

Key Features:
  • Categorized emoji list: Users can browse emoji grouped by category.
  • Language support: Uses the current locale or a specific language input.
  • Trigger positioning: Opens relative to the trigger and closes after selection.
  • Hover preview: Shows the hovered emoji and label before selection.
PropTypeDefault
language
The language to use for emoji category names and descriptions.
stringen
selectEmojiLabel
Placeholder text displayed when no emoji is hovered.
stringSelect an emoji...
position
Position of the emoji picker relative to the trigger (for directive).
PopoverPositionbelow-start
EventDescription
emojiSelectedEmits when an emoji is selected from the picker.
openedEmits when the emoji picker is opened (for directive).
closedEmits when the emoji picker is closed (for directive).