Estoy agregando contenido dinámico a la página, consideremos el siguiente ejemplo:

 const dataArray = [ {id: 1, innerHtml: `Some plain Txt`}, {id: 2, innerHtml: `Some plain Txt`}, {id: 3, innerHtml: `Some plain Txt`}, ]

Y dentro de la plantilla del componente:

 <div *ngFor="let e of dataArray"> <p [innerHTML]="e.innerHtml"></p> </div>

Todo funciona bien, hasta que necesito un enlace de propiedad anidado, como el siguiente:

 ... {id: 2, innerHtml = `Some plain Txt with anchor: <a [href]="'most/plain/url/link'" >Link</a>`}, ...

Estoy pasando valores a través de una tubería de derivación de seguridad:

 @Pipe({name: 'safeHtml'}) export class Safe implements PipeTransform { constructor(private sanitizer: DomSanitizer){} transform(style) { return this.sanitizer.bypassSecurityTrustHtml(style); } }

Pero siempre resultando con: propiedad href vacía de a etiqueta cuando no se usa una tubería de derivación de seguridad o con una versión copiada y no interpolada de la misma (por ejemplo <a [href]="'non/interpolated'"></a> )