Angular Material Form Controls Select (mat-select) Example

app.component.ts

<h2>Basic mat-select Example</h2>

<mat-form-field>

  <mat-label>Your student</mat-label>

  <mat-select>

    <mat-option *ngFor="let student of students" [value]="student.name">

      {{student.name}}

    </mat-option>

  </mat-select>

</mat-form-field>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatSelectModule } from '@angular/material/select';

import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    FormsModule,

  ReactiveFormsModule,

  MatSelectModule,

  MatFormFieldModule

    

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

import {Component} from '@angular/core';

import {FormControl} from '@angular/forms';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent{

  students: any[] = [

    { name: 'Michael' },

    { name: 'John'},

    { name: 'David' },

    { name: 'Robert' },

    {name:'james'},

    

];  

  }