Adding Anchor link to plain text without using innerHTML in Angular

Question

How do I add anchor link to a string without using innerHTML in Angular ?

This is my text I agree with the {{terms_policy}}. I wanted to replace {{terms_policy}} to link without using innerHTML ?

If I use, innerHTML, links are working. but without innerHTML, it is printing the html code.

in Component.ts

this.policy_placeholder = `<a class='privacy_policy' href= ${link} target='_blank'> ${link_text} </a>`;

https://stackoverflow.com/questions/39857858/angular-2-domsanitizer-bypasssecuritytrusthtml-svg — Øystein Amundsen, Nov 04 '20 at 19:41

Øystein Amundsen · Answer 1 · 2020-11-04T20:59:03.110

2

How about using a pipe? This must be used with innerHtml though, which goes against the requirement of the SO, but I don't know how strong that requirement is. So, for what it's worth:

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

@Pipe({ name: 'link', })
export class ToLinkPipe implements PipeTransform {
  constructor(private sanitize: DomSanitizer) {}

  transform(value: any, type?: string): any {
    return this.textToLinks(value);
  }

  textToLinks(value: string): SafeHtml {
    const linkRegex = /https?:\/\/\S+/gm;
    return this.sanitize
      .bypassSecurityTrustHtml(value.replace(linkRegex, (m, $1) => `<a href="${m}">${m}</a>`));
  }
}

Usage

export class AppComponent  {
  termsPolicy = 'http://terms.policy.com';
  get text() { return `I agree with the ${this.termsPolicy}`; }
}

<span [innerHtml]="text | link"></span>

https://stackblitz.com/edit/to-link-pipe

edited Nov 04 '20 at 20:59

answered Nov 04 '20 at 20:51

Øystein Amundsen

3,993
8
44
63

If this answer helped you, feel free to mark it as a solution. – Øystein Amundsen Jan 07 '21 at 12:16
how can I get the link to open in a new window? window.open before the link gives "null" – Siobhan Holubicka Nov 16 '22 at 13:04
1

Why would you run window.open anywhere here? Just customize the ToLinkPipe and make it output – Øystein Amundsen Nov 16 '22 at 19:44

score 0 · Answer 2 · edited Nov 04 '20 at 20:06

0

In angular, there is a renderer service that allows you to create some HTML elements, define some props, and append then to the DOM. You can use the service with ElementRef which helps catch some existing elements and replace them, for example. Simple demo here! :)

edited Nov 04 '20 at 20:06

react_or_angluar

1,568
2
13
20

answered Nov 04 '20 at 19:38

ravciok

71
3

Adding Anchor link to plain text without using innerHTML in Angular

2 Answers2