mat-option in angular material not working

Question

I am trying to use angular-material with angular-6

My material.module.ts is like this

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule
  ],
  exports: [
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule
  ]
})
export class MaterialModule {}




<mat-form-field>
       <mat-select placeholder="Favorite food">
                <mat-option *ngFor="let food of foods" [value]="food.value">
                            {{ food.viewValue }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

It is giving error

    Uncaught Error: Template parse errors:
Can't bind to 'ngForOf' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.

Please help

Answer 1

You do not have to export all the Material related modules,

 exports: [
 ]

DEMO

Answer 2

in providers try to add ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher