Dynamically bind after click in Angular / Typescript

Question

I have a text in which I make annotations that are dynamically marked with a span. With the function 'addClickEvent' I add a click-event, so that the user gets more information when clicking on the annotations. In the console I can get all information after the click. But I can't bind the information with the HTML. Thank you very much for your hints.

HTML

  <div id="description">
   <span class="dictCanon">{{descriptionDictCanon}}</span>
   <span class="coveredText">Covered text: {{descriptionCoveredText}}</span>
   <span class="sectionHeader">Category</span>
   <span class="val">{{descriptionCategory}}</span>
   <span class="sectionHeader">Group</span>
   <span class="val">{{descriptionGroup}}</span>
   <span class="sectionHeader otherSynonyms">Synonyms</span>
   <span class="val">{{descriptionSynonyms}}</span>
  </div>

JS

addClickEvent (obj) {

var rangyRoot = document.getElementById("rangy");
var elems = rangyRoot.getElementsByClassName('marker');

if (elems.length) {
  for (var i = 0, l = elems.length; i < l; i++) {
    (function(i) {
      elems[i].onclick = function() {
        var termToFind = elems[i].innerHTML;
        for (var item in obj) {
          var str = obj[item].coveredText;
          if (str === termToFind) {

             let d = obj[item];

             this.descriptionDictCanon = d.dictCanon;
             this.descriptionCoveredText = d.coveredText;
             this.descriptionCategory = d.parentCategory;
             this.descriptionGroup = d.parentGroup;
             this.descriptionSynonyms = d.otherSynonyms;

            };
          };
        }
      })(i);
    }
  }
}

Answer 1

<div id="description">
   <span class="dictCanon" (click)="spanCLicked(descriptionDictCanon)">{{descriptionDictCanon}}</span>
.
.
.
  </div>

and in your ts

spanCLicked(item: any)
{
    console.log(item)
}