Is there a way to fetch html content from array of object?

Issue

I want to add click functionality to anchor tag which needs to be fetched from array of objects. Is there any way to fetch only the html content from array of object?

This is an example of sample response I get. From here I want to fetch "faq_answer" from each object and from each "faq_answer", I want to fetch the anchor tag and add an onclick functionality to that anchor tag.

{
 "result_status": true,
 "data": [
   {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
 ]
}

faq.html

This is my template file where I'm displaying it.

<ion-list *ngIf="item.faq_answer && item.open" no-lines class="faq_lst" [ngClass]="{'rtl': item.language!='0', 'ltr': item.language=='0'}">
  <div>
    <p [innerHTML]="item.faq_answer | safeHtml"></p>
  </div>
</ion-list>

Solution

HTML Code:-

<div (click)="elementClicked($event)" id="dataContainer">
  <div *ngFor="let item of values.data" [innerHTML]="item.faq_answer | safeHtml"></div>
</div>

TypeScript code :-

import { Component } from '@angular/core';
import sdk from '@stackblitz/sdk';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public values = {
 "result_status": true,
 "data": [
   {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
 ]
}

public elementClicked(event) {
  var elem = event.target;
  alert(elem);
  if(elem.tagName.toLowerCase() === 'a') {
    //perform your logic
  }
}
}

Answered By - Aakash Garg