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
Improve this question
6
  • 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 Commented Aug 17, 2018 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}}<a [routerLink]="url">{{label}}</a>{{suffix}}. Maybe you even don't need suffix. Commented Aug 17, 2018 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..? Commented Aug 17, 2018 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. Commented Aug 17, 2018 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; } Commented Aug 17, 2018 at 21:11
Related questions
1
Angular2 routerLink directive dynamic parameter?
281
How to pass a parameter to routerLink that is somewhere inside the URL?
24
RouterLinkActive for RouterLink with parameters (/dynamic)
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.