showing encoded emoji in Angular2

Question

I am performing a loop on angular2 with dynamic emoji values encoded with org.apache.commons:commons-lang3 library in android like \uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5. I need to decode them in angular2 frontend. In itemsArr[index]['Posted Content'] = item[0]['document']['post_content']; I get the encoded content from backend. And this is how I am trying to show them

Code as follows

    ngOnInit() {
    this.loading = true;
    var itemsArr = [];

    var reporterPromiseArr = [];
    var postPromiseArr = [];
    var posts = this._cb.getRelationalDataFromTable('reportPost').then(res => {
      res.forEach(item => {
        itemsArr.push({ 'Reported On': item.document.createdAt, 'Posted By': '', 'Posted On': '', 'postId': item.document.post_id });
        postPromiseArr.push(this._cb.getRelationalDataFromTableNew('userActivityStream', [{ key: '_id', value: item.document.post_id }], ['product_id', 'user_id']));
        reporterPromiseArr.push(this._cb.getRelationalDataFromTable('registration', [{ key: '_id', value: item.document.user_id }]));
      });

      return Promise.all(postPromiseArr);
    }).then(res => {
      res.forEach((item, index) => {

        itemsArr[index]['Posted By'] = (item[0]['document']['user_id'] !== null) ? item[0]['document']['user_id']['document']['user_name'] : '';
        itemsArr[index]['Posted On'] = item[0]['document']['createdAt'];
        itemsArr[index]['Posted Type'] = item[0]['document']['type'];
        itemsArr[index]['Total Likes'] = item[0]['document']['total_like'];
        itemsArr[index]['Posted Content'] = item[0]['document']['post_content'];

        itemsArr[index]['Image'] = decodeURI(item[0]['document']['image']);

      });

      //console.log(reporterPromiseArr);
      return Promise.all(reporterPromiseArr);
    }).then(res => {
      res.forEach((item, index) => {
        itemsArr[index]['Reported By'] = item[0]['document']['user_name'];
      });

      this.listingArr = itemsArr;
      this.loading = false;

    }).catch(err => {
      this.loading = false;
      console.log(err)
    });
    console.log(itemsArr);
    //return Promise.all(reporterPromiseArr);


  }

   html as follows where i tried to show them in innerHTML but not working

<form class="tr" #requestData="ngForm" (ngSubmit)="onSubmit(requestData)" *ngFor="let item of listingArr; let i = index">
                                            <div class="td">{{i + 1}}</div>
                                            <div class="td">{{ item['Reported By'] }}</div>
                                            <div class="td">{{item['Reported On'] | date: yMMMdjms }}</div>
                                            <div class="td">{{ item['Posted By'] }}</div>
                                            <div class="td">{{ item['Posted On'] | date: yMMMdjms }}</div>
                                            <div class="td">{{ (item['Total Likes'] == null)?0:item['Total Likes'] }}</div>
                                            <div class="td">{{ item['Posted Type'] }}</div>
                                            <div [innerHTML]="item['Posted Content']"></div>


                                            </div>
                                        </form>  

Answer 1

If you need them to be displayed properly on the page, you need to bind them with innerHTML in Angular2

<div [innerHTML]="the.path.to.property"></div>