how to add a (click) function inside the .ts

Question

I am working on a solution to rewrite links in an HTML element.

I get HTML information via a JSON string 'spanClass1'. In this string I need to rewrite a class to a link. This works wonderfully. Unfortunately, I use hash routing in Angular and can only link further via the toDocument() function. It doesn't work via a normal <a href="link">link name</a> tag

Via span.className.replace(/\D/g, '') I get the ID I need to link to the page.

Unfortunately I was not able to define an Angular (click) function including the ID to the page.
Also, I can't manipulate the code in the .html, only in the .ts.

document.ts

var div = document.createElement('div');
div.innerHTML = spanClass1;
div.querySelectorAll('[class^=doc-]').forEach(function (span) {
  var anchor = document.createElement('a');
  anchor.href = '/suche#/document/' + span.className.replace(/\D/g, '');
  anchor.href = span.className.split('doc-')[1];
  anchor.innerHTML = span.innerHTML;
  span.parentNode.replaceChild(anchor, span);
});
spanClass1 = div.innerHTML;

toDocument(id) {
  window.open('/suche#/document/' + id);
}

JSON

"spanClass1": "blablablablabla <span class=\"doc-158  \">Radleuchter,</span> blablablabla"

How do I add a (click)="toDocument(123)" function to the <a> tag inside the Component.

You probably want addEventListener, e.g. https://stackoverflow.com/q/41609937/925478 — Myk Willis, Feb 01 '21 at 17:11

score 0 · Answer 1 · edited Feb 01 '21 at 19:02

0

It seems that you want to add a event listener to a div you are creating at run time. A possible approach is to use the Renderer2 API, as provided by the Angular Team.

In this case, your code would look like the following:

In the constructor:

construct(private _renderer2: Renderer2, ...) { ... };

In the method where you create the div:

  var div = document.createElement('div');
  this._renderer2.listen(div, 'click', (event) => {
    // Code to be run here or callback.
  }
  div.innerHTML = spanClass1;
  ...

Furthermore, I would advise some caution on changing the DOM directly. It's best to use the renderer for this since it comes with built it methods that are far safer and expose less risks.

edited Feb 01 '21 at 19:02

Heretic Monkey

11,687
7
53
122

answered Feb 01 '21 at 18:54

IDK4real

757
6
14

How to use your method in my forEach Loop. Can you give me an example – Fonty Feb 01 '21 at 22:16
Consider that you have an array of div's, you could do the following: ```const divsArrays: HTMLDivElement = [div1, div2, div3]; divsArrays.forEach((div: HTMLDivElement) => { this._renderer2.listen(div, 'click', (event) => { // Code to run here or callback }); }); ``` – IDK4real Feb 02 '21 at 11:50

score 0 · Answer 2 · answered Feb 02 '21 at 00:43

You want to add an event listener to each a and listen for the click event. There are a few pieces of your code that I don't fully understand, but it's basically this:

function toDocument(id) {
  window.open('/suche#/document/' + id);
}

var div = document.createElement('div');
div.innerHTML = spanClass1;  // what is this?
div.querySelectorAll('[class^=doc-]').forEach(function (span) {
  var anchor = document.createElement('a');
  var id = span.className.split('doc-')[1];
  anchor.href = '/suche#/document/' + span.className.replace(/\D/g, '');
  anchor.innerHTML = span.innerHTML;
  anchor.addEventListener('click', function() {
     toDocument(id);
  })
  span.parentNode.replaceChild(anchor, span);
});
spanClass1 = div.innerHTML;

@Fonty - You tagged this as typescript but you are not using typescript in the code you posted. Do you want typescript or just javascript? — Linda Paiste, Feb 02 '21 at 00:44
Hi Linda, thanks in advance. It's basically an Angular Application, so I've tagged typescript. Testing your approach right now — Fonty, Feb 02 '21 at 08:41

how to add a (click) function inside the .ts

2 Answers2