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?

Argyll

duplicate to #44950458 Essentially just do a click listener for your whole innerHtml and check for your routerLink attribute – Hermit

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!

Octennial

ng-dynamic has a good few open issues. Is it still viable for prod build with Angular v5+ ? – Extenuate

Sorry for late reply, I am using it with Angular 5+ just fine, at first I needed to updated it to the latest version when I upgraded my angular – Octennial

@AdhamSabry I'm curious did you manage to use AOT compiler as well in your setup? – Preview

@tomaszBlachut: yes – Octennial

Answer 2

One possible solution without using Dynamic runtime compilation when using hash location strategy is to use the following HTML

<a onclick="window.location.reload()" href="#/pages/Home">Click</a>

where /pages/Home is an angular route. This will be set into a div as follows

<ng-container *ngIf='content'>
  <div [innerHTML]="content.text"></div>
</ng-container>

This will trigger a reload on the destination, hence handing over stuff to angular router.

UPDATE 1

I used a neater workaround for this using custom events. I added a custom js as follows

function navigate_in_primary(url) {
    var evt = new CustomEvent('content_navigate', { detail: { url: url, primary: true } });
    window.dispatchEvent(evt);
}

I listen to this event using RxJs, in constructor of a custom service injected into app.module

Observable.fromEvent<Event>(window, 'content_navigate')
.subscribe((event)=>{
    this.router.navigateByUrl(event.detail.url);
})

Finally, my HTML

<a onclick="navigate_in_primary('/pages/home.aspx')" class="grey-button">SIGN IN</a>

Downdraft

Agreed. But I had a lot of other scenarios where I had to use hash as my app was a cordova based mobile app. I will reword my answer to reflect the same. – Downdraft

The simplest and best solution I have seen. – Deliquesce

Using browser events as a mediator between dynamic content and the compiled Angular code is really clever. Kudos. – Selmore

If you want to be IE11 compliant, then the creation of CutomEvent needs to be done using this approach: document.createEvent('CustomEvent') – Dymoke

Answer 3

After much digging, I found the answer to Angular 2.1.0 create child component on the fly, dynamically very useful in getting things working!

THE SECRET SAUCE!!!

Checkout the complete Plunker example by yurzui for details, but in a nutshell, make sure that the DynamicHtmlModule class which creates the runtime compiled component has a reference to the RouterModule module. Otherwise routerLink directives used in the dynamic template will not work. I've bolded the key piece of code below.

@NgModule({
  imports: [CommonModule, <strong>RouterModule</strong>],
  declarations: [decoratedCmp]}) class DynamicHtmlModule { }

  return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
   .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => {
     return moduleWithComponentFactory.componentFactories
      .find(x => x.componentType === decoratedCmp);
  });
}

The same is going to be true for any other directive or component your template might use. You have to make sure your DynamicHtmlModule properly references them to get them to work.

Argyll