Estoy tratando de crear una directiva que modifique el elementoinnerHTML agregando enlaces a esas subcadenas que comienzan con@ símbolo.

Esto es lo que he intentado hasta ahora

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));
  }

y lo estoy usando así

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

Mientras depuraba, hice las siguientes observaciones:

this.elementRef.nativeElement.innerHTML siempre tiene una cadena vacía.this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', 'something'); esanexando something al comienzo del texto del elemento en lugar de reemplazarlo.

Pregunta 1: Cómo acceder ainnerHTML de un elemento?

Pregunta 2: ¿Cómo establecer el innerHTML de un elemento desde una directiva?

Stackblitz demostrando el problema

Probé la documentación paraRenderer2, pero no me sirve de nada.