CODEWITHSUNDEEP
angulartypescriptsanitization
Jonathan Anctil
Jonathan Anctil

Reputation: 1037

The using of bypassSecurityTrustHtml seems to break hyperlink

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>

Upvotes: 1

Views: 941

Answers (1)

Jonathan Anctil
Jonathan Anctil

Reputation: 1037

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,
    ...
}

Upvotes: 4

Related Questions