Angular2 Dynamic HTML with functional RouterLink

Question

Long time user, first time question asker! I've been trying to figure this out for the better part of two days to no avail, so here we go.

Dynamic compiled templates from external sources in Angular2?

I am using http to get page content in the form of HTML from the WordPress API. So I have a template like this:

    <div [innerHTML]="contentHTML"> </div>

and "contentHTML" is a string variable in the component and assigned a value asynchronously via the API call to something like this:

    <a routerLink="/help/faq.html"> </a>

and I want that routerLink to work. Of course routerLink could be anything that's valid in a template.

If the above is not possible

If the above isn't going to work, what about a way to interpret the incoming HTML and add routerLinks on the fly to replace standard hrefs?

Answer 1

I came across the same issue, I followed this answer, but added a simple modification in the code where you import DynamicComponentModule, but added imports: [RouterModule]

So the steps would be as following install ng-dynamic:

npm install --save ng-dynamic

Then use the following import and code:

import { DynamicComponentModule } from 'ng-dynamic';

@NgModule({
   imports: [
       ...
       DynamicComponentModule.forRoot({imports: [RouterModule]}),
       ...
   ],
   ...
})
export class AppModule {} 

Then instead of:

<div [innerHTML]="contentHTML"> </div>

Use:

<div *dynamicComponent="contentHTML"></div>

hope this helps!