Strange errors with HostBinding to observables (Can't bind to '$.class.xxx')

[loxy]

I use your lib to bind HostBinding to observables like describes here: https://indepth.dev/posts/1429/making-hostbinding-work-with-observables

So basically I do something like this:

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
})
export class LayoutComponent {
@HostBinding('$.class.collapsed')
@HostListener('$.class.collapsed')
readonly collapsed = this.ui.sideNav;

constructor(private ui: UiService) {}
...

It's working great. But our test are now broken (all components which are using this layout component). I'll get the following error (when running Jest):

Error: Template parse errors:
Can't bind to '$.class.collapsed' since it isn't a known property of 'app-layout'.
1. If 'app-layout' is an Angular component and it has '$.class.collapsed' input, then verify that it is part of this module.
2. If 'app-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
...

I have no idea how this could happen or how to fix this. Any hints?

Best regards,
Kersten

[waterplea]

Unfortunately for now it's not possible without hacks. You can remove @HostBinding and change your code to this:

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
})
export class LayoutComponent {
  @HostListener('$.class.collapsed')
  readonly collapsed = asCallable(this.ui.sideNav);

  constructor(
    {nativeElement}: ElementRef,
    private ui: UiService,
  ) {
    nativeElement['$.class.collapsed'] = this.ui.sideNav;
  }
}

Also note asCallable utility function, it is there just to trick @HostListener into believing it's a callback.

[loxy]

Ah ok, I re-read the article and there it stands You have to use NO_ERRORS_SCHEMA. I thought this is not needed if you use the library. Thank you anyway!

[waterplea]

Problem with NO_ERRORS_SCHEMA is that you have to use it in the parent module, because @HostBinding belongs to the parent view. Until custom allowed properties are added to Angular the solution from my first comment seems to be the cleanest one :(

[loxy]

Yeah, thats why I switched to "old school"...