Angular 2+ jQuery dynamically add routerLink to html

Question

I have a json object, which I want to show on the page with highlighting, folding etc. ngx-json-viewer allows rendering json with formatting, folding etc. In this json, there are certain values which I want to convert to hyperlinks. I am trying to dynamically add routerLink to these values.

I am able to use jQuery modify the json after it is rendered and add anchors like so:

main.find('.segment-key').each(function() {
  const key = $(this).html();
  if(key == replacement.key) {
    main.find('.segment-value').each(function() {
      let value = $(this).html();
      if(!_.startsWith(value, '<a')) {
        value = _.replace(value, '"', '');
        $(this).wrapInner(`<a href="${replacement.anchor}` + value + '" />');
      }
    });
  }
});

The anchors cause the page to refresh. I would like to replace the anchors with routerLink.

Any help would be greatly appreciated.

Thanks

PS: For anyone interested, I got this behaviour by adding a click event and handling the navigation in the controller:

main.find('.segment-key').each(function() {
  const key = $(this).html();
  if(key == replacement.key) {
    main.find('.segment-value').each(function() {
      let value = $(this).text();
      value = _.replace(value, new RegExp('\"','g'), '');
      if(!$(this).hasClass('hyperlink')) {
        $(this).addClass('hyperlink');
        $(this).on('click', function() {
          self.router.navigate([replacement.page, replacement.param + '/' + value]);
        });
      }
    });
  }
});

Grégory Elhaimer · Accepted Answer · 2019-03-09 11:35:50Z

1

You don't need jquery to dynamise your view. Standart Angular component can handle that.

Moreover, I strongly recommand you to avoid using JQuery with Angular. Anything triggered by JQuery is out of Angular's sight. This said, you'll have to enter in a way more complexe implementation.

You'd better manipulate your DOM with tools provided by Angular itself.

answered Mar 9, 2019 at 11:35

Grégory Elhaimer

2,8111 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yogesh Over a year ago

Any pointers to those "standard Angular components" would help. I am happy to enter in a way more complex implementation if standard Angular components do not exist (I couldnt find one).

Grégory Elhaimer Over a year ago

The main purpose of angular is to create your component. Then create one to handle your links. If you want more help you'll need to provide more information about your program (what's it's supposed to do for instance)

Yogesh Over a year ago

I have a json object, which I want to show on the page with highlighting, folding etc. ngx-json-viewer allows rendering json with formatting, folding etc. In this json, there are certain values which I want to convert to links (dynamically, since it is a dynamic json). I hope it makes sense?

Yogesh Over a year ago

I think, the easiest solution would be to add a click action and then do a router.navigate in controller.

Collectives™ on Stack Overflow

Angular 2+ jQuery dynamically add routerLink to html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related