1

I'm using the mean stack with Angular 6 and i'm currently creating a notification system. I'm getting 'events' from my database and I want to be able to display their messages which may contain url links to other parts of the site. For example one might contain a message which is:

New job created <a [routerLink]="['/job', job._id]">{{jobName}}</a>

I can't use innerHTML as it strips the routerLink. So how do I evaluate it as a link?

I've tried ng-dynamic as suggested here: Angular2 Dynamic HTML with functional RouterLink

However I get the following error:

Uncaught TypeError: _angular_compiler__WEBPACK_IMPORTED_MODULE_1__.JitCompilerFactory is not a constructor
Michael B
  • 153
  • 4
  • 15
  • Well from my reading it seems if you switch to JIT compiler (and maybe do tweak some more options) error mentioned by you will go away because ng-dynamic seems quite outdated. But it isn't a solution really... Upvoted because you've piqued my curiosity – Tomasz Błachut Aug 17 '18 at 20:50
  • 1
    Just to add some options from me, if you control backend, consider sending object like `{prefix, suffix, url, label}` instead of ready HTML and then create template `{{prefix}}{{label}}{{suffix}}`. Maybe you even don't need suffix. – Tomasz Błachut Aug 17 '18 at 20:57
  • I could do something like that, but what if I want multiple links? And the structure of the message isn't consistent? This must be a common issue for something like a blog post..? – Michael B Aug 17 '18 at 20:59
  • Unfortunately I don't think that Angular authors wanted us to do things like that (dynamic directive instantiation). In your first example simple ngFor will suffice but I can agree that it will feel somewhat superfluous. – Tomasz Błachut Aug 17 '18 at 21:10
  • You could always make own, limited directive for intercepting links. RouterLink at it's core is only a few lines: `@HostListener('click', [...]) onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean { [...] this.router.navigateByUrl(this.urlTree, extras); return false; }` – Tomasz Błachut Aug 17 '18 at 21:11
  • Hello @MichaelB. Have you found a solution by any chance? – AngularChef Oct 01 '18 at 12:46

0 Answers0