6

I am trying to create a directive that modifies the element's innerHTML by adding links to those substrings which start with @ symbol.

This is what I have tried so far,

linkify.directive.ts

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
      let elementText = this.elementRef.nativeElement.innerHTML;
      // elementText = '@user mentioned you';
      console.log(`Element Text: ${elementText}`);
      this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', this.stylize(elementText));
  }

and I'm using it like this

<p linkify> Hey @user check this out! </p>

While debugging I have made the following observations,

  • this.elementRef.nativeElement.innerHTML always has an empty string.
  • this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', 'something'); is appending something to the beginning of the element's text instead of replacing.

Question 1: How to access the innerHTML of an element?

Question 2: How to set the innerHTML of an element from a directive?

Stackblitz demonstrating the problem

I tried the documentation for Renderer2, but it's of no help for me.

cyberpirate92
  • 3,076
  • 4
  • 28
  • 46

1 Answers1

5

As @bryan60 suggested, The ideal way to do this is to create a pipe instead of a directive.

This is the pipe I ended up creating,

linkify.pipe.ts

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

@Pipe({
  name: 'linkify'
})
export class LinkifyPipe implements PipeTransform {

  constructor(private _domSanitizer: DomSanitizer) {}

  transform(value: any, args?: any): any {
    return this._domSanitizer.bypassSecurityTrustHtml(this.stylize(value));
  }

  private stylize(text: string): string {
    let stylizedText: string = '';
    if (text && text.length > 0) {
      for (let t of text.split(" ")) {
        if (t.startsWith("@") && t.length>1)
          stylizedText += `<a href="#${t.substring(1)}">${t}</a> `;
        else
          stylizedText += t + " ";
      }
      return stylizedText;
    }
    else return text;
  }

}

Usage:

<p [innerHTML]="sample | linkify"></p>

Demo Stackblitz

cyberpirate92
  • 3,076
  • 4
  • 28
  • 46
  • glad it worked out. I'm surprised you need to access the inner HTML directly though using the dom sanitizer. i thought

    {{ text | linkify }}

    would just work like normal. I had to do soemthing very close to this and that's the syntax I got working eventually. Don't remember how though.     – bryan60 Jan 25 '18 at 21:07
  • @bryan60 I initially tried using just that, but was getting [this](https://stackoverflow.com/questions/45351434/safe-value-must-use-property-binding-after-bypass-security-with-domsanitizer) issue, turns out strings sanitized using the DomSanitizer should be bound to `innerHTML`, else they'll end up rendering the sanitized markup as plain text. – cyberpirate92 Jan 25 '18 at 21:14