Angular: how to avoid stripping innerHtml?

Question

I want to show @ctrl/ngx-emoji-mart, emoji's in a chat component. But I have to set data using innerHtml as in following.

<div [innerHtml]="message"></div>
message = "<ngx-emoji [emoji]="{ id: 'santa', skin: 3 }" size="16"></ngx-emoji>"

So as mentioned in here, Angular 2: sanitizing HTML stripped some content on css style. I used following pipe,

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

Now angular doesn't stripping messages like <h2>Hello</h2>, but if message contain ngx-emoji tags, angular still stripping. So how can I prevent this and show emoji tags in chat messages?