CODEWITHSUNDEEP
angular-materialangular5angular-cdk
Kaushik Nath
Kaushik Nath

Reputation: 116

Error in importing MatTabChangeEvent

I am trying to use the angular material library. I have added the dependency for @angular/material in package.json as follows 

"@angular/animations": "^5.0.0",
"@angular/cdk": "^6.0.0",
"@angular/material": "^5.2.5",

When I use 

import { MatTabChangeEvent } from '@angular/material';

It throws the error while compilation

ERROR in [at-loader] ./node_modules/@angular/material/stepper/typings/stepper.d.ts:28:5
TS2416: Property '_stepHeader' in type 'MatStepper' is not assignable to the same property in base type 'CdkStepper'.
Type 'QueryList<ElementRef>' is not assignable to type 'QueryList<FocusableOption>'.
Type 'ElementRef' is not assignable to type 'FocusableOption'.
  Property 'focus' is missing in type 'ElementRef'.

I haven't added any code related to angular material, except that import line.

Upvotes: 2

Views: 5445

Answers (2)

Shubham Shaw
Shubham Shaw

Reputation: 1005

in angular 9 the folder structure has changed

"@angular/material": "^9.2.0",

to get the type use

import { MatTabChangeEvent } from '@angular/material/tabs';

Upvotes: 4

Edric
Edric

Reputation: 26801

You need to ensure that you have the same versions of Angular CDK and Material, as well as have the Angular version for Angular Material and CDK.

In this case, upgrade all your dependencies to Angular 6:

npm install @angular/cdk @angular/material

Or:

npm update

Upvotes: 3

Related Questions