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.

yurzui · Accepted Answer · 2017-05-17 19:03:05Z

2

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

answered May 17, 2017 at 19:03

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

makeLifeEasier Over a year ago

Thanks, however bypassing security isn't the best way for handling things. Maybe there is some elegant way, but I'm still researching.

yurzui Over a year ago

You use innerHTML. Which elegant way are you searching? :)

makeLifeEasier Over a year ago

However angular doesn't seem to perform binding. When I tried to invoke some function after (click) on button from component class or even from title-formatter.provider class it simply didn't happen. Instead of submit form data to component form group after submit click it make values visible in URL.

yurzui Over a year ago

Angular doesn't compile innerHTML. It won't work. You can create template dynamically or use event delegation

Collectives™ on Stack Overflow

Angular2. Angular-calendar event cell detail template

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related