Angular 5: Dynamic Templates

Question

Angular 5 removed the runtime compiler, and my understanding is that it's now impossible to dynamically compile templates due to this.

So I need to come up with another way of accomplishing what I need; hopefully someone can point me in the right direction.

I have a video platform written in Angular. People can post comments on the videos, and can include a timestamp somewhere in their comment, such as:

Great video! Maybe a bit more colour at 00:32, make it look more like 01:20?

I'm matching each timestamp using Regex, and attempting to add a call to the component in the timestamp link:

const exp = /\b[0-9]*\:[0-9]*\b/; comment.commentText = comment.commentText.replace(exp, (match) => { return '<a href="javascript:void(0);" (click)="jumpTo(\'' + match + '\')">' + match + '</a>'; });

With the ability to compile a custom template now missing, how can I get this to work?

Thanks in advance

I would say this is only true if your talking about Ahead of Time compilation of components. I'm starting to work on a way to do dynamic angular templates, and I've got to think it's still possible if you aren't using AOT. — GetFuzzy
– GetFuzzy, Commented Jan 3, 2018 at 0:44

Aviad P. · Accepted Answer · 2017-11-09 00:21:14Z

It's possible to create a TaggedCommentComponent which accepts the original comment text as input, parses it, and creates an array of interleaved texts and time tag links, to build on your example, it would be:

[ 'Great video! Maybe a bit more colour at ', '00:32', ', make it look more like ', '01:20', '?' ]

Then in the template for this component use something like:

<ng-container *ngFor="let t of texts; let even=even"> <ng-container *ngIf="even"> <a (click)="jumpTo(t)">{{t}}</a> </ng-container> <ng-container *ngIf="!even">{{t}}</ng-container> </ng-container>

Indeed, this would work in this particular example. However, since I want to expand it further to parse lots of other things as well, this will end up getting extremely convoluted. I'm hoping there's another way.
I would still choose this approach, it is more in line with MVC, your model should include the tagged text, including every nuance, and your view should render it properly. I mean, instead of replacing HTML, why not do all the replacement operations on a string and create an appropriate data structure?

Collectives™ on Stack Overflow

Angular 5: Dynamic Templates

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related