https://github.com/johnbwoodruff/ngx-joypixels
An Angular library for easily using JoyPixels' Emoji library in your app
https://github.com/johnbwoodruff/ngx-joypixels
angular emoji hacktoberfest joypixels
Last synced: 2 months ago
JSON representation
An Angular library for easily using JoyPixels' Emoji library in your app
- Host: GitHub
- URL: https://github.com/johnbwoodruff/ngx-joypixels
- Owner: johnbwoodruff
- License: mit
- Created: 2020-10-26T21:25:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-28T22:30:27.000Z (about 5 years ago)
- Last Synced: 2025-10-23T10:56:13.015Z (8 months ago)
- Topics: angular, emoji, hacktoberfest, joypixels
- Language: TypeScript
- Homepage:
- Size: 559 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ngx-joypixels
 [](https://www.npmjs.com/package/ngx-joypixels) [](https://www.npmjs.com/package/ngx-joypixels) [](https://www.npmjs.com/package/ngx-joypixels)
[JoyPixels](https://www.joypixels.com/) for Angular.
## Usage
To use this library, install both JoyPixels' emoji-toolkit and this library, ngx-joypixels, from npm.
```shell
# With yarn
$ yarn add emoji-toolkit ngx-joypixels
# With npm
$ npm install --save emoji-toolkit ngx-joypixels
```
Import the `EmojiModule` into your `app.module.ts` and add it to your `imports` array:
```ts
//...
import { NgxJoypixelsModule } from 'ngx-joypixels';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
//...
NgxJoypixelsModule
]
})
export class AppModule {}
```
You're now ready to go! Check out the documentation below for using the various pieces of this library. You can also look at this [StackBlitz](https://stackblitz.com/edit/ngx-joypixels-example?file=src/app/app.component.ts) for actual example usage of some of the features.
## Component
You can use the component for a single shortcode-to-emoji rendering. Simply use the markup below:
```html
```
Where `myVar` is bound to a string with a single shortcode, such as `:poop:`. That component will then render the emoji.
## Pipe
Using the pipe is simple. Below is a sample component that makes use of the EmojiPipe.
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
text: string;
constructor() {
this.text = `This will be converted to JoyPixels emojis! :thumbsup: ❤️`;
}
}
```
The pipe will then convert the text and the output will correctly have the JoyPixels emoji in place of the shortcode and unicode emoji.
As JoyPixels 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.
## Service
If 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:
```ts
import { Component } from '@angular/core';
import { EmojiService } from 'ngx-joypixels';
@Component({
selector: 'app-root',
template: `
Hello World! `
})
export class AppComponent {
constructor(public emojiService: EmojiService) {
// Emoji Service methods are available to use!
}
}
```
### shortnameToImage()
This function takes a shortname, such as `:thumbsup:`, and returns an `![]()
` tag with the corresponding JoyPixels emoji.
### unicodeToShortname()
This function takes a native unicode emoji, like `❤️`, and returns a the corresponding shortname, in this case, `:heart:`.
### unicodeToImage()
This function takes a native unicode emoji, like `❤️`, and returns an `![]()
` tag with the corresponding JoyPixels emoji.
### convertText()
This function takes a string and replaces all instances of native unicode emoji and shortnames with `![]()
` tags with their corresponding JoyPixels emoji. This is what we use internally for the EmojiPipe.