Skip to content

BUG: typeCheckHostBindings: true not infering type correctly for host directive output #62783

@kukjevov

Description

@kukjevov

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When you enable typeCheckHostBindings in tsconfig compilation will fail for working code for code that works otherwise. When you attach directive with output using host directives to some component and at the same time you use host to bind to this output you will receive error about parameter type.

test.directive.ts

/**
 * Test directive
 */
@Directive(
{
    selector: '[test]',
})
export class TestDirective
{
    public out: OutputEmitterRef<number> = output<number>();
}

home.component.ts

/**
 * Home component
 */
@Component(
{
    selector: 'home-view',
    templateUrl: 'home.component.html',
    host:
    {
        '(out)': 'showOut($event)',
    },
    hostDirectives:
    [
        {
            directive: TestDirective,
            outputs: ['out'],
        },
    ],
    changeDetection: ChangeDetectionStrategy.OnPush
})
@ComponentRedirectRoute('', 'home')
@ComponentRoute({path: 'home'})
@WithScrollableCssClass()
export class HomeComponent
{
    public showOut(val: number): void
    {
        console.log('out', val);
    }
}

As you can see you have output of type number and event listener with same parameter type, so you are trying to assign number to number, but you will receive error Argument of type 'Event' is not assignable to parameter of type 'number'.

Minimal reproduction:

  • git clone https://github.com/kukjevov/ng-universal-demo.git demo
  • cd demo
  • git checkout bug/2.0
  • npm install
  • npm start
  • and you can see compilation error in console

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Argument of type 'Event' is not assignable to parameter of type 'number'.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: `20.1.2`
Node: `22.16.0`
Package Manager: npm `10.9.2`
OS: Windows 11 x64
Angular: `20.1.3`

Anything else?

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions