The using of bypassSecurityTrustHtml seems to break hyperlink

Question

I try to detect an Url or plain text in a string value. If it's an Url, the function return a HTML hyperlink using bypassSecurityTrustHtml. The hyperlink is displayed, but when I click on it, nothing happen. However, Chrome recognize it as a link and when I right click, I can select «Open in a new window» and it works.

Angular code:

public formatReservedField(value: string) {
  let pattern = /(http|https|ftp|ftps)\:\/\//gm;

  if (pattern.test(value)) {
    return this._sanitizer.bypassSecurityTrustHtml("<a href='" + value + "' target='_blank'>" + value + "</a>");
  }

  return value;
}

HTML code:

<div [innerHTML]="formatReservedField(reservedField)"></div>

Jonathan Anctil · Accepted Answer · 2017-10-25 19:11:34Z

4

Ok, I've found it!

I've set the change detection of my component to OnPush strategy and it works now:

@Component( {
    ...
    changeDetection: ChangeDetectionStrategy.OnPush,
    ...
}

answered Oct 25, 2017 at 19:11

Jonathan Anctil

1,0574 gold badges23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omzig Over a year ago

What on earth, why does this work? After using pipes all day to fix my user content... This is the key to the entire clickable hyperlink issue. <div [innerHTML]="Value | safeHtml"></div>

Bibby Chung Over a year ago

why??????? who can tell me why...

Collectives™ on Stack Overflow

The using of bypassSecurityTrustHtml seems to break hyperlink

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related