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?

duplicate to stackoverflow.com/questions/44949958/… Essentially just do a click listener for your whole innerHtml and check for your routerLink attribute — r3mark
– r3mark, Commented Sep 13, 2021 at 2:57

Dom · Accepted Answer · 2017-06-11 14:42:09Z

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!

edited Jun 11, 2017 at 14:42

answered Jun 11, 2017 at 14:34

Dom

6681 gold badge7 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Drenai Over a year ago

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

Dom Over a year ago

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

Tomasz Błachut Over a year ago

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

Dom Over a year ago

@tomaszBlachut: yes

rjv · Accepted Answer · 2018-04-17 07:03:19Z

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>

edited Apr 17, 2018 at 7:03

answered Mar 22, 2018 at 17:56

rjv

6,9365 gold badges31 silver badges53 bronze badges

4 Comments

rjv Over a year ago

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.

Cédric Belin Over a year ago

The simplest and best solution I have seen.

Mvin Over a year ago

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

Wojciech Owczarczyk Over a year ago

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

Community · Accepted Answer · 2017-05-23 11:46:48Z

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.

Collectives™ on Stack Overflow

Angular2 Dynamic HTML with functional RouterLink

3 Answers 3

4 Comments

UPDATE 1

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

UPDATE 1

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related