HTML usage inside ts file(Angular 8)

Question

I have some html code inside my ts file like this:

    generateSingleRow(values) {
    var elementCount = $("input[id^='SN_']").length;
    if (elementCount >= this.requestLimitCount) {
      //Limit max number of records
      this.toggleAddNewRowButtonState(false);
      return;
    }
    this.toggleAddNewRowButtonState(true);
    var serial = '<td><label for="SN_' + this.prevRowCount + '" (onmouseover)="createSNTooltip(this);" (onmouseout)="homeComponent.toolTipClear(this);">Serial Number:</label><input    id="SN_' + this.prevRowCount + '" size="15" name="SN_' + this.prevRowCount + '" type="text" value="" /></td>';
    //START - Added by Dinesh D for Samsung Change  
    var input = document.createElement("input");
    input.type = "hidden";
    input.id = "actSN" + this.prevRowCount;
    input.name = "actSN" + this.prevRowCount;
    document.getElementById('InputForm').appendChild(input);
    var product = '<td><label for="PN_' + this.prevRowCount + '" onmouseover="createProductTooltip($event);" onmouseout="toolTipClear($event);" #tooltipLabel>Product Number:</label><input id="PN_' + this.prevRowCount + '" size="15" name="PN_' + this.prevRowCount + '" type="text" value="" /></td>';
    var input = document.createElement("input");
    input.type = "hidden";
    input.id = "actPN" + this.prevRowCount;
    input.name = "actPN" + this.prevRowCount;
    document.getElementById('InputForm').appendChild(input);
    var country = "<td><label  onmouseover='createIsoCountryCodeTooltip($event);' onmouseout='toolTipClear($event);' for='divCountry_" + this.prevRowCount + "' #tooltipLabel>ISO Country Code:</label><input id='divCountry_" + this.prevRowCount + "' name='Country_" + this.prevRowCount + "'  type='text' value='US' /></td>";
    //if adding more than just 2 rows, the rest are dynamic and cleaned up on refresh
    var classType = elementCount >= 2 ? ' class="dynamicsearchrows"' : '';

    var tableRow = $('<tr' + classType + '>' + serial + product + /*checkDate + */country + '</tr>');
    $('#InputForm #inputtextrow').before(tableRow);
    $('#divCountry_' + this.prevRowCount);

    //Set input text value dynamically. This is prefered    
    //For performance, use javascript over jQuery       
    var serialNumber = <HTMLInputElement>document.getElementById("SN_" + this.prevRowCount);
    if (this.common.fieldNotEmpty(serialNumber)) {
      serialNumber.value = this.common.fieldNotEmpty(values[0]) ? values[0] : "";
    }
    var productNumber = <HTMLInputElement>document.getElementById("PN_" + this.prevRowCount);
    if (this.common.fieldNotEmpty(productNumber)) {
      productNumber.value = this.common.fieldNotEmpty(values[1]) ? values[1] : "";
    }
    this.prevRowCount++;
    //Initialize z-index for table (select tag)
    var zIndexValue = 1;
    //On click of div element select tag change the z-index value to higher than 10 (which is currently set for select tag)
    $("div[id^='divCountry_']").click(function () {
      var prevzIndexValue = $(this).find("table").css("z-index");
      zIndexValue = prevzIndexValue == 100 ? zIndexValue : prevzIndexValue;
      $(this).find("table").css("z-index", 100);
    });
    //restore z-index value
    $("div[id^='divCountry_']").focusout(function () {
      $(this).find("table").css("z-index", zIndexValue);
    });

    tableRow.ui_form(); //Apply theme for the entire row
  }

createSNTooltip(data) {
    console.log("Inside createSNTooltip")
  }

From the html code I am trying to call the function createSNTooltip which I have placed in the same ts file. But I always get createSNTooltip is not defined. what am I missing here? I have tried putting this function in a separate service.component.ts file and then calling this function like this:

constructor(
    private serviceComponent: ServiceComponent
  ) { }

var serial = '<td><label for="SN_' + this.prevRowCount + '" (onmouseover)="serviceComponent.createSNTooltip(this);" (onmouseout)="serviceComponent.toolTipClear(this);">Serial Number:</label><input    id="SN_' + this.prevRowCount + '" size="15" name="SN_' + this.prevRowCount + '" type="text" value="" /></td>';

But this also does not work. So my question is, if I want to write some html code in a ts file directly and want to bind an even trigger to it, how do I do it?