Angular2. Angular-calendar event cell detail template

Question

I' using [angular-calendar] from

github.com/mattlewis92/angular-calendar

.
My purpose is to insert own template as detail view on event.
I want to achieve similar effect to presented on photo: final effect
Till now I achieved only working custom formatting tags as returning string. When I typed some html input tags as I see after run in dom it disappeared.
Here is me plunker if you want to see or maybe you've got idea how to solve that issue.

Thanks in advance.

Answer 1

Angular sanitizes untrusted values for HTML. If you want to display input you should use DomSanitizer

import { DomSanitizer} from '@angular/platform-browser';

@Injectable()
export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
  constructor(@Inject(LOCALE_ID) private locale: string, private sanitizer: DomSanitizer) {
    super();
  }

  month(event: CalendarEvent): any {
    return this.sanitizer.bypassSecurityTrustHtml(`<form>
          First name: <input type="text" name="fname"><br>
                      <input type="submit" value="Submit">
              </form>`)
  }
  ...

Plunker Example