Display the <a> from response as HYPERLINK in my web page in angular-CodePudding

I'm working with an angular project, i'm getting a link as shown below in the response of api and i'm iterating it in the html.

<a class="test" href="https://www.google.com/" target="_blank">click here</a>

I want to show the href i'm getting in response as an hyperlink in my output and it should navigate to the appropriate link. As of now it is showing in output as a plain text. Please help me achieve this functionality.

I have updated my code in the stackblitz. working stackblitz:

https://stackblitz.com/edit/angular-ivy-qxfftw?file=src/app/app.component.ts

Response from api:

  apiresponse: any = {
    message: 'message',
    response: [
      {
        hrefmessages:
          'i need this link to be shown as hyperlink <a  href="https://www.google.com/" target="_blank">click here</a>. ',
        icons: [
          {
            icon1: 'hello',
            name: 'hello',
            age: 'hello',
          },
        ],
      },
      {
        hrefmessages: 'This is also a href test message',
        icons: [
          {
            icon1: 'test',
            name: 'test',
            age: 'test',
          },
        ],
      },
    ],
  };

CodePudding user response：

You need to set the inner HTML of the tag you'd like to bind the HTML from the response to. Example:

<div [innerHTML]="response[0].hrefmessages"></div>

StackBlitz: https://stackblitz.com/edit/angular-ivy-8ydusb?file=src/app/app.component.html