{"id":13497100,"url":"https://github.com/johnbwoodruff/angular-emojione","last_synced_at":"2025-03-28T21:32:02.661Z","repository":{"id":57178353,"uuid":"88008114","full_name":"johnbwoodruff/angular-emojione","owner":"johnbwoodruff","description":"EmojiOne for Angular","archived":true,"fork":false,"pushed_at":"2020-10-27T00:46:05.000Z","size":30,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-16T00:33:08.763Z","etag":null,"topics":["angular","emoji","emojione","hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnbwoodruff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-12T04:00:13.000Z","updated_at":"2023-01-28T12:10:12.000Z","dependencies_parsed_at":"2022-08-30T11:02:10.245Z","dependency_job_id":null,"html_url":"https://github.com/johnbwoodruff/angular-emojione","commit_stats":null,"previous_names":["jbw91/angular-emojione"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnbwoodruff%2Fangular-emojione","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnbwoodruff%2Fangular-emojione/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnbwoodruff%2Fangular-emojione/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnbwoodruff%2Fangular-emojione/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnbwoodruff","download_url":"https://codeload.github.com/johnbwoodruff/angular-emojione/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245823298,"owners_count":20678172,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","emoji","emojione","hacktoberfest"],"created_at":"2024-07-31T20:00:23.352Z","updated_at":"2025-03-28T21:32:02.385Z","avatar_url":"https://github.com/johnbwoodruff.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Angular EmojiOne\n\n[![Build Status](https://travis-ci.org/jbw91/angular-emojione.svg?branch=master)](https://travis-ci.org/jbw91/angular-emojione) [![npm](https://img.shields.io/npm/dm/angular-emojione.svg)](https://www.npmjs.com/package/angular-emojione) [![npm](https://img.shields.io/npm/dt/angular-emojione.svg)](https://www.npmjs.com/package/angular-emojione) [![npm](https://img.shields.io/npm/v/angular-emojione.svg)](https://www.npmjs.com/package/angular-emojione)\n\n[EmojiOne](https://github.com/Ranks/emojione) for Angular.\n\n**Angular Version:** 4+\n\n# Project Archived\n\n**THIS PROJECT IS NO LONGER MAINTAINED.** EmojiOne is no longer maintained as used in this library, and has been replaced by JoyPixels. Please use [ngx-joypixels](https://github.com/johnbwoodruff/ngx-joypixels) instead.\n\n# Usage\n\nTo use this library, install both emojione and this library, angular-emojione, from npm.\n\n```shell\n$ npm install --save emojione angular-emojione\n```\n\nIt is highly recommended you include the EmojiOne stylesheet to properly size the emoji in your app. Include the following `\u003clink\u003e` tag in your `index.html`.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/emojione/2.2.7/assets/css/emojione.min.css\"/\u003e\n```\n\nImport the `EmojiModule` into your `app.module.ts` and add it to your `imports` array:\n\n```ts\n//...\nimport { EmojiModule } from 'angular-emojione';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    //...\n    EmojiModule\n  ]\n})\nexport class AppModule {}\n```\n\nYou're now ready to go! Check out the documentation below for using the various pieces of this library.\n\n## Component\n\nYou can use the component for a single shortcode-to-emoji rendering. Simply use the markup below:\n\n```html\n\u003cemoji [shortname]=\"myVar\"\u003e\u003c/emoji\u003e\n```\n\nWhere `myVar` is bound to a string with a single shortcode, such as `:poop:`. That component will then render the emoji.\n\n## Pipe\n\nUsing the pipe is simple. Below is a sample component that makes use of the EmojiPipe.\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cdiv [innerHTML]=\"text | emoji\"\u003e\u003c/div\u003e\n  `\n})\nexport class AppComponent {\n  text: string;\n\n  constructor() {\n    this.text = `This will be converted to EmojiOne emojis! :thumbsup: ❤️`;\n  }\n}\n```\n\nThe pipe will then convert the text and the output will look like the following:\n\n![Pipe](https://lh3.googleusercontent.com/MdOvXFu5CfxMkI4Oe_H-ty15zz79Mxn7M7zpQHMZ0zsrNO_0VYGzPKSz8FlpXJx5dg-tZl7XvA-qdNffAE79znXw_qp7B6f8CbCNPVadAOVMSufVq-eMl-q2y24SfBj6zxd6KJcVrk4xIomOvU_pKAGXDmBdQGSAvnIEkbXus07SJdnZsRucnDmUz_eUMHD16ShOKsblLyPw9EVXnZ-2rag9YDeakB8NBehTBLcQ-7VWNLyAVloz2VA56bZorskJyNz3VbWsctoKyAALVHq6gUBF530wTNTGB3kO0J8RGdwL9NcB5kTuF9xWN8aRXPVW1PhPVZmwbPIS-1mDMc3PlnNAXGFT1o1kErdhmYY3XkYz1LmlRD0XPYFVeS08vllKfeNedoARWgM74WbfbWB3FzfU775M1FCl4BuVIUvqtdYTSGOVDGilYt9N6DaMbSrnznTglmwc0qMnazsymIRcRqCmsCKm1pPVglqRVJy2gXZGVJiEE10ewGYBt1Tzcspp4Dw3r0pB2f-BjD_gkQZWkAy1DwvrC3wEPAMDfeA3s_OWQyw1WLBCljN6aehVgMGBNfUe_XQ-CTlob7-OSXXiOLhOlH85nim55NQbDvSu0vy_57P4vC-lO0Gkd-RF5aYKphiQLjXNZIDmvbS0TJVFhlQkeTyqtrLxCftbK8WGAQ=w728-h84-no)\n\nAs EmojiOne simply replaces shortcodes and native unicode emoji, you will need to bind your output to the `innerHTML` attribute, as is shown in the example above.\n\n## Service\n\nIf you'd rather do conversions yourself, this library provides an easy to use service with various methods for managing your emoji! Simply import `EmojiService` where you wish to use it, like the example below:\n\n```ts\nimport { Component } from '@angular/core';\n\nimport { EmojiService } from 'angular-emojione';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cdiv\u003eHello World!\u003c/div\u003e\n  `\n})\nexport class AppComponent {\n\n  constructor(public emojiService: EmojiService) {\n    // Emoji Service methods are available to use!\n  }\n}\n```\n\n### shortnameToImage()\n\nThis function takes a shortname, such as `:thumbsup:`, and returns an `\u003cimg\u003e` tag with the corresponding EmojiOne emoji.\n\n### unicodeToShortname()\n\nThis function takes a native unicode emoji, like `❤️`, and returns a the corresponding shortname, in this case, `:heart:`.\n\n### unicodeToImage()\n\nThis function takes a native unicode emoji, like `❤️`, and returns an `\u003cimg\u003e` tag with the corresponding EmojiOne emoji.\n\n### convertText()\n\nThis function takes a string and replaces all instances of native unicode emoji and shortnames with `\u003cimg\u003e` tags with their corresponding EmojiOne emoji. This is what the angular-emojione library uses for its EmojiPipe.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnbwoodruff%2Fangular-emojione","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnbwoodruff%2Fangular-emojione","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnbwoodruff%2Fangular-emojione/lists"}