How to change the label color of Y-Axis on click in angular Gantt chart High Chart

Question

How to change the background color of the Y-axis on the click of the label. It's working fine with javascript but not with angular.

chart.yAxis[0].labelGroup.element.childNodes.forEach(function (label) {
  label.onclick = function () {
    alert(label.style);
    label.style.fill = "teal";
    let data = chart.series[0].data,
      visibleRows = 0,
      chartHeight;
    data.forEach((el) => {
      if (el.visible) {
        visibleRows++;
      }
    });
    if (visibleRows > 3) {
      alert("if");
      chartHeight = 40 * visibleRows;
    } else {
      alert("else");
      chartHeight = 40 * visibleRows + 110;
    }
    chart.update({
      chart: {
        height: chartHeight
      }
    });
  };
});

https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010

Answer 1

After long hours of research, got the solution.

this.chart.yAxis[0].labelGroup.element.childNodes.forEach(function (label) {
      label.onclick = function () {
        alert(label.style)
        label.style.fill = "teal";
      };
    });
  }

Stackblitz Url https://stackblitz.com/edit/highcharts-angular-gantt-un3avk?file=src%2Fapp%2Fapp.component.ts