title: Angular Render link
body: <p>I am using a library called <code>ag-grid</code> which allows me to create a table of data. In this table, I am including a link to a user profile via a <code>routerLink</code>.</p>
  
  <p>My problem is that if the user is invalid in the search, the link would take you to an invalid profile so I am trying to use a different link for that situation.</p>
  
  <p>I created a component that is generating the link like I need it but its just printing the HTML to the page.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    template: "{{ link }}"
  })
  
  export class ViewLinkComponent {
  
    params: any;
    link: any;
  
    agInit(params: any): void {
  
      this.params = params;
  
      // If we don't have an NTID, we can assume this is an invalid record
      if (this.params.data.QID == '-') {
  
        // Loop over our data object
        for (var key in this.params.data) {
  
          if (this.params.data.hasOwnProperty(key)) {
            // If we are not looking at order and our values are not empty
            if (key != 'order' &amp;&amp; this.params.data[key] != '-') {
              this.link = this.createLink(this.params.data[key]);
              return;
            }
  
          }
  
        }
  
      }else{
        this.link = '&lt;a routerLink="/profile/'+ params.data.NTID +'"&gt;View Profile&lt;/a&gt;'
      }
  
    }
  
    createLink(query){
      return '&lt;a href="https://external.com/search?q='+query+'" target="_blank"&gt;Search&lt;/a&gt;';
    }
  
  }
  </code></pre>
  
  <p><strong>End Result:</strong></p>
  
  <p>The below image is showing the correct link, but not rendering it as an actual clickable link.</p>
  
  <p><a href="https://i.stack.imgur.com/zHS2D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zHS2D.png" alt="enter image description here"></a></p>
  
  <p>However, if I were to do the following it renders fine:</p>
  
  <pre><code>@Component({
    template: "&lt;a routerLink='/profile/{{ params.data.NTID }}'&gt;View Profile&lt;/a&gt;"
  })
  </code></pre>
  
  <p>Problem with this is that I need to use some logic to determine if its an internal link using a route or an external link.</p>
  
  <p>Is there a way for me to tell this component that its okay to render that HTML, assuming its a security thing?</p>