9

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?

Reza Kajbaf
  • 457
  • 5
  • 9
  • duplicate to https://stackoverflow.com/questions/44949958/how-do-i-dynamically-load-and-display-html-which-contains-routerlink-directives Essentially just do a click listener for your whole innerHtml and check for your routerLink attribute – r3mark Sep 13 '21 at 02:57

3 Answers3

4

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!

Dom
  • 580
  • 4
  • 26
3

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>
rjv
  • 6,058
  • 5
  • 27
  • 49
  • Changing to hash location strategy just to solve this issue is not a good idea – Drenai Apr 16 '18 at 15:05
  • 1
    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. – rjv Apr 17 '18 at 08:42
  • Nice use of CustomEvent.... saves a lot of events one component at a time or using a service! – Drenai Apr 17 '18 at 17:46
  • The simplest and best solution I have seen. – CedX Apr 04 '19 at 09:34
  • Using browser events as a mediator between dynamic content and the compiled Angular code is really clever. Kudos. – Mvin Oct 03 '19 at 12:56
  • If you want to be IE11 compliant, then the creation of CutomEvent needs to be done using this approach: `document.createEvent('CustomEvent')` – Wojciech Owczarczyk Jul 03 '20 at 10:06
1

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.

Community
  • 1
  • 1
Reza Kajbaf
  • 457
  • 5
  • 9