How to put export class of component in angular material - angular-material

Question

Hello i want to insert a select dropdownlist with angular material.
My question is where we put this exactly :
export interface Food {
value: string;
viewValue: string;
}
export class SelectOverviewExample {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
}
Link of the component
I did this :
app.module .ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {MatTabsModule} from '#angular/material/tabs';
import {MatSelectModule} from '#angular/material/select';
import {MatInputModule} from '#angular/material/input';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { InterfaceComponent } from './interface/interface.component';
#NgModule({
declarations: [
AppComponent,
InterfaceComponent
],
imports: [
BrowserModule,
MatTabsModule,
BrowserAnimationsModule,
MatSelectModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And i added html code in app.component.html
Result :
select list but without options cause i didn't know where i will put the export details
enter image description here

Answer 1

for this case you have to put in the app.component.ts like:
import { Component } from '#angular/core';
interface Food {
value: string;
viewValue: string;
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
}