Angular use Fontawesome directive in dynamic module

Question

I am getting a string contains fontawesome directive("fa-icon") from the server side and i need to display the corresponding fontawesome icon in the frontend.

I have taken a reference with a working example of creating dynamic module: https://stackoverflow.com/a/52455638/2636272 However, if i try to compile the template with fontawesome directive, it throws error...see my sample code: https://stackblitz.com/edit/dynamic-module-with-fontawesome

Really appreciated your help!

score 0 · Answer 1 · answered Jan 18 '20 at 14:36

0

When executing the code there is an exeption that is saying that fa-icon is not known. That means that the module has not been imported. That is why in your temporary module you need to import Fontawesome:

const tmpModule = NgModule({
      imports: [CommonModule, FontAwesomeModule],...
});

answered Jan 18 '20 at 14:36

StyrianDev

254
1
8

Nope, still not working if I import the FontAwesomeModule – Peng Jan 19 '20 at 22:06

score 0 · Accepted Answer · answered Jan 20 '20 at 08:12

0

I managed to fix your problem in stackblitz. Running example: https://stackblitz.com/edit/dynamic-module-with-fontawesome-z6zq2h

You have to add the icon as iconProp to your component instance because otherwise it is undefined in the fa-icon component:

this.cmpRef.instance.myIcon = faSpinner;
this.cmpRef.instance.iconProp = faSpinner;

answered Jan 20 '20 at 08:12

StyrianDev

254
1
8

Thanks for your active reply, mate. The icon do get loaded, however, the template string contains other html element, now only the icon is load...Looks like the dynamic module has been treated as a whole FontAwesome component – Peng Jan 22 '20 at 03:51
That was because we were using only the first factory: const f = factories.componentFactories[0]; I updated the stackblitz, now it shows all the components but I think there is one additional icon, maybe you know if there is some reference to this additional component: https://stackblitz.com/edit/dynamic-module-with-fontawesome-z6zq2h?file=src%2Fapp%2Fdynamic-template.component.ts – StyrianDev Jan 22 '20 at 09:10

Angular use Fontawesome directive in dynamic module

2 Answers2