How to use angular component in bubble HTML

Hello,
I am trying to use an angular component I’ve created myself (event-bubble) as the bubble HTML for an event.

The following is the html in event-bubble.component.html

Hello from event bubble html

And this is the code in event-bubble.component.ts

import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-event-bubble',
templateUrl: './event-bubble.component.html',
styleUrls: ['./event-bubble.component.css']
})
export class EventBubbleComponent {
constructor() { }
}

This is how I’m trying to use it for my event:

let mapped: DayPilot.EventData = {
id: 1,
text: “Event 1”,
start: <some date>,
end: <some date>,
resource: 1,
bubbleHtml: `<app-event-bubble></app-event-bubble>`
}

But for some reason it appears like the image I’ve attached


How can i use my own components in event bubbles?