0

I have a component which gets some content after the page has been loaded. The content sometimes contains hyperlinks, which I change to replace the href attribute with the Angular [routerLink].

The problem that I am having is that when this is displayed on the page, it doesn't get compiled by Angular and therefore is just useless html.

I have taken a look at [innerHtml] which works with plain html but it doesn't seem to compile the [routerLink]. The following is what I tried to test it:

TS:

public addHtml() {
    this.html = "<a [routerLink]=\"['Route']\">Route</a>";
}

HTML:

<button (click)="addHtml()">Add html</button>
<div [innerHtml]="html"></div>

Output HTML:

<div _ngcontent-oli-5=""><a [routerlink]="['Route']">Route</a></div>

The anchor tag doesn't get rendered as a hyperlink.

It would be great if someone could point me into the right direction. Thanks

Shahzad
  • 473
  • 1
  • 5
  • 12
  • @Günter Zöchbauer I'm trying to use the `ViewContainerRef.createComponent(factory)` example that you have given in [this](https://plnkr.co/edit/Vt9WA3bieeaFMn759ZL1?p=preview) plunk. Everything seems to be fine apart from `cmp: ComponentRef` in the wrapper component. I am getting a compile error which says `Generic type 'ComponentRef' requires 1 type argument(s)`. Can you tell me which type am I meant to supply to it? – Shahzad Jun 07 '16 at 15:30
  • I guess it needs to be the type of the component that was added. I don't use TS locally (only Dart) and I am not familiar with this TS errors from static checks. – Günter Zöchbauer Jun 07 '16 at 15:33
  • @GünterZöchbauer What I am trying to add is a chunk of html as a string which has some anchor tags with `[routerLink]` properties. Could you please recommend the best way of doing this? I have tried to change your example as much as possible, but I don't fully understand what the `ComponentResolver` and `ComponentRef` are doing, and there isn't really any helpful documentation. – Shahzad Jun 07 '16 at 15:40
  • It's just adding a component imperatively. The component is added to the DOM but is otherwise isolated. Inputs and outputs can't be wired using `()`, or `[]` bindings. I don't know what Information I should provide. The `dcl-wrapper` from my example needs the type of a component and then adds that component. – Günter Zöchbauer Jun 07 '16 at 15:45
  • @GünterZöchbauer Ah, so I would need an additional component which will contain the string html? If that is the case then I think I understand. Thank you – Shahzad Jun 07 '16 at 15:54

1 Answers1

0

Have you tried to use a flag instead (with *ngIf) ? The html is not processed since you bypass angular templating. You also need to import the router directives.

import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
...
@Component({
    directives: [ROUTER_DIRECTIVES],
...

You should have a look at a small demonstration of your use case on Plunker https://plnkr.co/edit/ekkB3F?p=preview.

Nicolas Henneaux
  • 11,507
  • 11
  • 57
  • 82
  • the import or the *ngIf ? – Nicolas Henneaux Jun 07 '16 at 10:41
  • I don't think `ROUTER_DIRECTIVES` makes a difference as far as the `[routerLink]` is concerned. But I have the `*ngIf` flag along with import and adding `ROUTER_DIRECTIVES` into the `directives` array. This produces the same output as i mentioned in my question – Shahzad Jun 07 '16 at 10:48
  • In your example you already have the anchor tag within the template, which is fine for everything that's on the page when the page loads. The anchor tag i'm supplying is through a string which gets added to the DOM after the page has loaded. – Shahzad Jun 07 '16 at 11:22
  • If you want to change the anchor text, you should use a public field. If you want to change the route than you should remove the single quote in the attribute value.The Plunker has been edited with both cases. – Nicolas Henneaux Jun 07 '16 at 11:35
  • I think you misunderstood what my problem is, please try reading the question again. – Shahzad Jun 07 '16 at 11:48
  • see the duplicate link to inject HTML code directly but as I have said in the answer " The html is not processed since you bypass angular templating". – Nicolas Henneaux Jun 07 '16 at 11:56
  • The whole point of the question was to get an answer which explains how to parse the html into the angular renderer AFTER the page has already loaded. – Shahzad Jun 07 '16 at 14:44