Angular6+ pipe based on the library @ctrl/ngx-emoji-mart to transform HTML containing unicode emojis to HTML containing emoji image elements
For a demo either just checkout this project and run npm install && npm run start
or visit the StackBlitz demo page.
For use in an existing angular project run npm install --save ng-utf8-emojis-to-images @ctrl/ngx-emoji-mart
Then add the installed module to your app.module.ts
:
import { Utf8EmojisToImagesModule } from 'ng-utf8-emojis-to-images';
// ...
@NgModule({
// ...
imports: [
// ...
Utf8EmojisToImagesModule
]
// ...
})
export class AppModule {}
Anywhere in your template:
<div [innerHTML]="'<a title=\'Ang🧛♀️ular\'>Hello</a> 👌 Ang🧛♀️ular 👌!' | utf8EmojisToImages"></div>
By default the pipe will use the apple sheet (hosted at https://unpkg.com/[email protected]/img/apple/sheets-256/64.png) - for other available sheets see https://missive.github.io/emoji-mart/
<div [innerHTML]="html | utf8EmojisToImages:set:size:sheetSize:backgroundImageFn:sheetRows:sheetColumns"></div>
As with any pipe you can also use this one directly from your component if you follow those steps:
- Add the pipe to you components/modules providers:
providers: [ Utf8EmojisToImagesPipe ]
- Simply inject it in the component's constructor - e.g.:
constructor(pipe: Utf8EmojisToImagesPipe) {
const convertedHTML = pipe.emojisToImages('<a title="Ang🧛♀️ular">Hello</a> 👌 Ang🧛♀️ular 👌!');
console.log('Converted HTML: ', convertedHTML);
}
parameter | meaning |
---|---|
set | emoji mart set to use for image representation |
size | size of an emoji image in px |
sheetSize | size of each original image - will be resized to size |
backgroundImageFn | function to retrieve bg URL or path (see docs at https://github.com/TypeCtrl/ngx-emoji-mart) |
sheetRows | number of emoji rows in image provided by backgroundImageFn |
sheetColumns | number of emoji columns in image provided by backgroundImageFn |
Alternatively you can pass a callback function for emoji replacement as single paramerter:
<div [innerHTML]="html | utf8EmojisToImages:replaceFn"></div>
... and in the component:
replaceFn = (unicodeEmoji: string, element: CharacterData, position: number): HTMLElement => {
// Create and return a HTMLElement that should substitute the unicode emoji
// Parameters passed to this function:
// `unicodeEmoji` -> the emoji
// `element` -> the text node element in which the emoji is contained
// `position` -> the offset within the text element
}
In case you want to contribute/fork:
- Adept version and author in
./projects/ng-utf8-emojis-to-images/package.json
and commit to your forked repository. - Run
npm install
. - Run
npm run build-lib
which outputs the build to./dist/ng-utf8-emojis-to-images
. - Copy README.md to
./dist/ng-utf8-emojis-to-images
and modify it accordingly. - Run
cd ./dist/ng-utf8-emojis-to-images && npm publish
.
- ... Scott Cooper for writing the ngx-emoji-mart package which is internally used by this module.
- ... Etienne Lemay for writing the emoji-mart package which provides the base of
ngx-emoji-mart
.
MIT