0

So I have this (shortened/condensed for example purposes) InnerHtml string...

public get Description(): string {
  if (this.Description.length > 50) {
     return this.Description.substring(0, 50) + this.DescriptionToggle;
  } else {
     return this.Description;
  }
}

public get DescriptionToggle(): string {
  return "<a [routerLink]='' (click)='ExpandDescription(Item)'>(show more)</a>"
}

And then in my HTML...

<small [innerHtml]="Item.Description | safe: 'html'"></small>

Which joins the two together like I want when the length is > 50, but it doesn't seem to actually add the a tag functionality/styling (clicking on it does nothing, no blue text, etc.)

What am I doing wrong here? Is it possible to concat an existing innerHtml element with another?

Vigilant
  • 103
  • 4
  • 3
    I don't think you can dynamically inject Angular template stuff like that (`routerLink` and `(click)`). – Zircon May 25 '22 at 17:37
  • I removed those to test and just added a standard href and it's still acting up. – Vigilant May 25 '22 at 17:46
  • Angular not "compile at time", so you can not use innerHtml to add components or links to functions. If you're looking for a "more", check this [SO](https://stackoverflow.com/questions/70382245/show-more-show-less-text-but-hide-option-if-text-does-not-overflow-angular/70386107#70386107) if you want to create a "link" check this another [SO](https://stackoverflow.com/questions/71220617/angular-12-d3-tree-displaying-a-routerlink/) or [this one](https://stackoverflow.com/questions/71479471/execute-angular-innerhtml-as-normal-angular-code/71480844#71480844) – Eliseo May 25 '22 at 23:12

0 Answers0