search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to use angular component in bubble HTML

Asked by Anonymous
1 month ago.

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?

Answer posted by Dan Letecky [DayPilot]
1 month ago.

Sorry for the delay!

There is a tutorial that shows how to insert an Angular component to the bubble.

It is necessary to instantiate the component and add it to the bubble using onDomAdd.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.