https://github.com/johnbwoodruff/angular-emojione
EmojiOne for Angular
https://github.com/johnbwoodruff/angular-emojione
angular emoji emojione hacktoberfest
Last synced: 22 days ago
JSON representation
EmojiOne for Angular
- Host: GitHub
- URL: https://github.com/johnbwoodruff/angular-emojione
- Owner: johnbwoodruff
- License: mit
- Archived: true
- Created: 2017-04-12T04:00:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-27T00:46:05.000Z (over 4 years ago)
- Last Synced: 2024-05-16T00:33:08.763Z (11 months ago)
- Topics: angular, emoji, emojione, hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 29.3 KB
- Stars: 13
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-emojione - EmojiOne for Angular. (Uncategorized / Uncategorized)
README
# Angular EmojiOne
[](https://travis-ci.org/jbw91/angular-emojione) [](https://www.npmjs.com/package/angular-emojione) [](https://www.npmjs.com/package/angular-emojione) [](https://www.npmjs.com/package/angular-emojione)
[EmojiOne](https://github.com/Ranks/emojione) for Angular.
**Angular Version:** 4+
# Project Archived
**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.
# Usage
To use this library, install both emojione and this library, angular-emojione, from npm.
```shell
$ npm install --save emojione angular-emojione
```
It is highly recommended you include the EmojiOne stylesheet to properly size the emoji in your app. Include the following `` tag in your `index.html`.
```html
```
Import the `EmojiModule` into your `app.module.ts` and add it to your `imports` array:
```ts
//...
import { EmojiModule } from 'angular-emojione';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
//...
EmojiModule
]
})
export class AppModule {}
```
You're now ready to go! Check out the documentation below for using the various pieces of this library.
## 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 EmojiOne emojis! :thumbsup: ❤️`;
}
}
```
The pipe will then convert the text and the output will look like the following:
As 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.
## 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 'angular-emojione';
@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 EmojiOne 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 EmojiOne emoji.
### convertText()
This function takes a string and replaces all instances of native unicode emoji and shortnames with `![]()
` tags with their corresponding EmojiOne emoji. This is what the angular-emojione library uses for its EmojiPipe.