Angular/Typescript içinde tıklamadan sonra dinamik olarak bağla

Dinamik olarak bir span ile işaretlenmiş açıklamalar yaptığım bir metnim var. 'addClickEvent' fonksiyonu ile bir tıklama etkinliği ekliyorum, böylece kullanıcı açıklamalara tıkladığında daha fazla bilgi alabiliyor. Konsolda tıklamadan sonra tüm bilgileri alabiliyorum. Ama bu bilgiyi HTML ile bağlayamıyorum. Verdiğiniz ipuçları için çok teşekkür ederim.

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);
    }
  }
}

Cevap #1

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

ve senin ts'nde

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