CODEWITHSUNDEEP
testingangular-materialangular-cliangular6
ellier7
ellier7

Reputation: 427

Ng Test - Can't bind to 'value' since it isn't a known property of 'mat-select'

I have an Angular6 application using Material Design. When running 'ng test', I get the following error:

Failed: Template parse errors: Can't bind to 'value' since it isn't a known property of 'mat-select'.

I have included MatSelectModule in my imports and exports. It works fine in the application but fails during testing.

material-design.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MatFormFieldModule, MatInputModule, MatSelectModule} from '@angular/material';

@NgModule({
  imports: [MatFormFieldModule, MatInputModule, MatSelectModule],
  exports: [MatFormFieldModule, MatInputModule, MatSelectModule],
})
export class MaterialDesignModule { }

Select example:

<mat-form-field class='select_buttons'>
  <mat-select (selectionChange)='typeSelection_changed($event)' [(value)]='type'>
    <mat-option *ngFor="let type of types" [value]="type"> {{type.name}}</mat-option>
  </mat-select>
</mat-form-field>

Upvotes: 13

Views: 28964

Answers (3)

Suprabhat Kumar
Suprabhat Kumar

Reputation: 685

Follow following steps -

  1. import { MatSelectModule } from '@angular/material/select'; in your-file-name.module.ts

  2. Add MatSelectModule in imports-

@NgModule({
  declarations: [MyComponent],
  imports: [
    MatSelectModule,
  ]
})

Upvotes: 6

Takatalvi
Takatalvi

Reputation: 688

You must import MatSelectModule from import { MatSelectModule } from '@angular/material'; and add it to your spec imports

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ MatSelectModule ],
    declarations: [ FooComponent ]
  })
  .compileComponents();
}));

Upvotes: 3

Martine Dowden
Martine Dowden

Reputation: 51

Are you importing the material module in your spec.ts file?

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ MaterialDesignModule ],
    declarations: [ FooComponent ]
  })
  .compileComponents();
}));

Upvotes: 4

Related Questions