how to render angular directive in Highcharts tool tip in Angular8

I am using Highcharts in Angular project. We have a set of very complex tooltips to display, so was wondering if it is possible to render angular directives in Highcharts tooltips.

here is the snippet of the Highcharts code, I want to render the html from tool tip which is angular component.

tooltip : {
  userHTML: true,
  formatter: function() {
    return "<app-tooltip></app-tooltip>";
  }
}

Here the the tooltip component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.scss']
})
export class TooltipComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

HTML of the component is as follows

<p>tooltip </p>

But it does not render anything. Is it possible to specify tooltips in this way?