picker.component.html

<div class="emoji-mart"
  [style.width.px]="perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar"
  [ngStyle]="style">
  <div class="emoji-mart-bar">
    <emoji-mart-anchors
      [categories]="categories"
      (anchorClick)="handleAnchorClick($event)"
      [color]="color"
      [selected]="selected"
      [i18n]="i18n"
      [icons]="categoriesIcons"
    ></emoji-mart-anchors>
  </div>
  <emoji-search
    #searchRef
    [i18n]="i18n"
    (search)="handleSearch($event)"
    (enterKey)="handleEnterKey($event)"
    [include]="include"
    [exclude]="exclude"
    [custom]="custom"
    [autoFocus]="autoFocus"
    [icons]="searchIcons"
    [emojisToShowFilter]="emojisToShowFilter"
  ></emoji-search>
  <div #scrollRef class="emoji-mart-scroll" (scroll)="handleScroll()">
    <emoji-category
      *ngFor="let category of activeCategories; let idx = index; trackBy: categoryTrack"
      #categoryRef
      [id]="category.id"
      [name]="category.name"
      [emojis]="category.emojis"
      [perLine]="perLine"
      [totalFrequentLines]="totalFrequentLines"
      [hasStickyPosition]="isNative"
      [i18n]="i18n"
      [hideObsolete]="hideObsolete"
      [notFoundEmoji]="notFoundEmoji"
      [custom]="category.id == RECENT_CATEGORY.id ? CUSTOM_CATEGORY.emojis : undefined"
      [recent]="category.id == RECENT_CATEGORY.id ? recent : undefined"
      [emojiIsNative]="isNative"
      [emojiSkin]="skin"
      [emojiSize]="emojiSize"
      [emojiSet]="set"
      [emojiSheetSize]="sheetSize"
      [emojiForceSize]="isNative"
      [emojiTooltip]="emojiTooltip"
      [emojiBackgroundImageFn]="backgroundImageFn"
      (emojiOver)="handleEmojiOver($event)"
      (emojiLeave)="handleEmojiLeave()"
      (emojiClick)="handleEmojiClick($event)"
    ></emoji-category>
  </div>
  <div class="emoji-mart-bar" *ngIf="showPreview">
    <emoji-preview
      #previewRef
      [title]="title"
      [emoji]="previewEmoji"
      [idleEmoji]="emoji"
      [emojiIsNative]="isNative"
      [emojiSize]="38"
      [emojiSkin]="skin"
      [emojiSet]="set"
      [emojiSheetSize]="sheetSize"
      [emojiBackgroundImageFn]="backgroundImageFn"
      (skinChange)="handleSkinChange($event)"
    ></emoji-preview>
  </div>
</div>