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

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy