Components: Material Menu: inputs are not recognized in ivy mode

[asapach]

Reproduction

(StackBlitz doesn't seem to support ivy)

Steps to reproduce:

1. npm install -g @angular/cli@next
2. ng new app
3. ng add @angular/material
4. ng update @angular/material --next
5. Add a basic menu example using overlapTrigger input:

  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>

1. ng build

Expected Behavior

The build should pass.

Actual Behavior

ERROR in src/app/app.component.html:339:29 - error TS8002: Can't bind to 'overlapTrigger' since it isn't a known property of 'mat-menu'.
1. If 'mat-menu' is an Angular component and it has 'overlapTrigger' input, then verify that it is part of this module.
2. If 'mat-menu' 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.

339   <mat-menu #menu="matMenu" [overlapTrigger]="false">
                                ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Environment

• Angular: 9.0.0-next.11
• CDK/Material: 9.0.0-next.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[manklu]

Still present in Angular: 9.0.0-next.12

As workaround you can deactivate the template type check in tsconfig.json

  "angularCompilerOptions": {
    "fullTemplateTypeCheck": false,
    "ivyTemplateTypeCheck": false,
    ...
}

[WojciechSlyp]

Still present with Angular 9.0 and Angular Material 8.2.3.

Disabling those checks just for this one component is not exactly a good tradeoff ;)

[cbejensen]

I was having this issue when using @angular/core@^9.0.0 with @angular/material@^8.2.3, and @angular/cdk@^8.2.3, but after upgrading Material and CDK to ^9.1.1 I no longer get this error.

[jpike88]

I have the latest stable version of angular, components, cdk etc and have this problem:

"@angular/animations": "^9.1.6",
        "@angular/cdk": "^9.2.3",
        "@angular/cli": "^9.1.5",
        "@angular/common": "^9.1.6",
        "@angular/compiler": "^9.1.6",
        "@angular/core": "^9.1.6",
        "@angular/flex-layout": "^9.0.0-beta.29",
        "@angular/forms": "^9.1.6",
        "@angular/material": "^9.2.3",
        "@angular/material-moment-adapter": "^9.2.3",
        "@angular/platform-browser": "^9.1.6",
        "@angular/platform-browser-dynamic": "^9.1.6",
        "@angular/router": "^9.1.6",

[crisbeto]

This issue will be thrown if the MatMenuModule hasn't been imported.

[fetis]

@crisbeto I have MatMenuModule imported in the module where my component declared, but I still have this issue with Material v8

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}