Components: Mat Tab Group & Ivy: selectedIndex not a property of HTMLElement

[james-schwartzkopf]

Reproduction

https://github.com/james-schwartzkopf/ng8-issues/tree/mat-tab-group-ivy-selected-index

Steps to reproduce:

1. yarn
2. yarn run build

Expected Behavior

Should compile cleanly and tabs should work.

Actual Behavior

Error:

ERROR in src/app/app.component.html(2,16): Property 'selectedIndex' does not exist on type 'HTMLElement'.

Notes

May be related to #16750

The error doesn't occur using @angular/material 8.1.4 or with Ivy disabled.

I'm guessing this is due to the change to _MatTabGroupBase, maybe it needs an @Directive? Not 100% sure how
inheritance works in Ivy.
https://github.com/angular/angular/pull/31379

Environment

• Angular: 8.2.6
• CDK/Material: 8.2.0

[enstenr]

I am facing same issue after enabling IVY.

The above worked perfectly before enabling IVY

After enabling I get this error

Property 'selectedIndex' does not exist on type 'HTMLElement'.

Not sure if its related with IVY

[ottodranik]

I confirm that. I am facing same issue with ivy too.

Because of that I can't do any url on tab -> I can't use index of tab in url and use "selectedIndex" for dynamically change tabs :(

UPD. I found that this bug can be circumvented if we remove mat-tab-group node from template with *ngIf directive. mat-tab-group with selectedIndex and *ngIf directive works fine for me.

[GenuineRex]

Same issue in Angular 9.

[gdjennings]

This also happens with
<nav mat-tab-nav-bar> <a mat-tab-link [active]="...">
It's actually the only error I get now enabling Ivy in 8.2. Can workaround the error by disabling typecheck in tsconfig.app.json

"angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": false,
    "ivyTemplateTypeCheck": false,
    "allowEmptyCodegenFiles": true
  },

[obautista]

Any news on this issue?

[matteoulissi]

Apparently now it works though my code editor says:
"Property selectedIndex is not provided by any applicable directives nor by mat-tab-group element"

[TheParad0X]

Same here for any input or output of mat-tab-group:
selectedTabChange
selectedIndex

[robo3945]

I'm not sure if my error is the same but after I migrated my app from Angular 8.2.3 to 9, only in the Editor (IntelliJIdea), I got:

==> "Can't bind to [(selectedIndex)] since it is not provided by any applicable directives" on the "selectedIndex"

                          (selectedTabChange)="...">

==> "Event selectedTabChange is not emitted by any applicable directives nor by mat-tab-group element"

But this happens only in WebStorm (the editor) because if i run the application with "ng serve" it works fine!

Any idea about it?

Sorry if i'm OT

UPDATE:

In my case the problem is the Editor. So new RC solves the problem.

[mmalerba]

I ran the original reproduction that was given and created an Ivy stackblitz with the given code, in both cases it compiled fine, so I think this was fixed.

[mariusvn]

Error still happening here on webstorm ...
It compiles fine anyway

[TheParad0X]

Same here.

[mmalerba]

I wonder if something in the webstorm toolchain is on an old version that has the issue. I don't think there's anything the Angular Components team can do since its already compiling fine at HEAD

[robo3945]

I personally did the test with the Webstorm 2020.1.2 RC and it solves my problem.

[TheParad0X]

Webstorm 2020.1.2 solves the problem for me too

[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._}