CODEWITHSUNDEEP
angularangular5
Tom Mettam
Tom Mettam

Reputation: 2973

Angular 5: Dynamic Templates

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

Upvotes: 2

Views: 2047

Answers (1)

Aviad P.
Aviad P.

Reputation: 32659

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>

Upvotes: 2

Related Questions