Search code examples
htmlangularcalendarangular9angular-calendar

Angular-calendar label doesn't allow attributes in HTML label other than href

So I'm working on an application that uses the package angular-calendar to show calendars, but it seems to encounter a weird behavior in which I cannot see what I'm doing wrong.

I'm basically trying to add multiple attributes to an element (represented by label in code below), but none seem to work, other than href.

This is my code

      eAction = {
        label: `<a id='subscribe' style='margin: 10px;' href='${"/heroes/"}${hero.id}'>See hero</a>`,
        a11yLabel: "...",
        onClick: ...
      }

Other things that I tried:

  • Only having id attribute doesn't, does not show the attribute in the html.

  • Switching attribute postions doesn't seem to affect it.

  • Switching " for ` also doesn't help: <a id=${"Hello"} href='test'>Hello</a> still shows in the generated HTML as <a href="test">Hello</a>. Same case for <a id="Hello" href='test'>Hello</a> and <a id='Hello' href='test'>Hello</a>

There's a demo on stackblitz where you can try this yourself (line 67 or 70 in component.ts).

EDIT

I noticed a warning in the console that is related to this exact section.

enter image description here

So maybe it has to do with XSS. Either way my question stays the same: how do I fix it?

Solution

  • Adding encapsulation: ViewEncapsulation.None from @angular/core to my component fixed it.

    @Component({
  encapsulation: ViewEncapsulation.None,
  ...
})