import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSelectModule } from '@angular/material'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatSelectModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
export interface Food {
    value: string;
    display: string;
}
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'materialApp';
    selectedValue: string;
    foods: Food[] = [
            { value: 'steak', display: 'Steak' },
            { value: 'pizza', display: 'Pizza' },
            { value: 'tacos', display: 'Tacos' }
    ];
}

#### mat-select





            {{food.display}}





 Selected food: {{selectedValue}}