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

Question

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>

Answer 1

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,
  ]
})

Answer 2

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();
}));