Simple <mat-option> not working. No error in IDE or browser

Question

I am a student trying to learn angular but having some trouble so sorry if this is a stupid question.

Basically I have a mat-form-field with a mat-select. The mat-select shows up in the browser but the options do not drop down. Here's the html and .ts

HTML:

<mat-form-field>
  <mat-select placeholder="Gender">
    <mat-option *ngFor="let Gender of genders" [value]="Gender.value">
      {{Gender.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<!--Form for Gender-->

.ts:

export interface Gender {
value: string;
viewValue: string;
}

export class SelectGender {
genders: Gender[] = [
   { value: 'm', viewValue: 'Male' },
   { value: 'f', viewValue: 'Female' },];}

I have all the Imports already working, but here's the app.module.ts incase:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { PostDetailsComponent } from './post-details/post-details.component';
    import { PostService } from './services/post.service';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { RouterModule, Routes } from '@angular/router';

    import { FormsModule } from "@angular/forms";
    import {
      MatInputModule,
      MatMenuModule,
      MatCardModule,
      MatButtonModule,
      MatIconModule,
      MatToolbarModule,
      MatExpansionModule,
      DateAdapter,
      MatFormFieldModule,
      MatNativeDateModule,
      MatSelectModule,

    } from '@angular/material';
    import { MatDatepickerModule } from '@angular/material/datepicker';
    import { MatRadioModule } from '@angular/material/radio';
    import { PostCreateComponent } from './post-create/post-create.component';
    import { PostEditComponent } from './post-edit/post-edit.component';
    import { PostSigninComponent } from './post-signin/post-signin.component';
    import { MembershipTypesComponent } from './membership-types/membership-types.component';

    const appRoutes: Routes = [
      {
        path: 'list',
        component: PostDetailsComponent
      },
      {
        path: 'create',
        component: PostCreateComponent
      },
      {
        path: 'edit/:id',
        component: PostEditComponent
      },
      {
        path: 'membershipTypes',
        component: MembershipTypesComponent
      }
    ];


    @NgModule({
      declarations: [
        AppComponent,
        PostDetailsComponent,
        PostCreateComponent,
        PostEditComponent,
        PostSigninComponent,
        MembershipTypesComponent
      ],
      imports: [
        RouterModule.forRoot(appRoutes),
        BrowserModule,
        FormsModule,
        HttpClientModule,
        MatIconModule,
        MatButtonModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
        MatCardModule,
        MatButtonModule,
        MatToolbarModule,
        MatExpansionModule,
        MatMenuModule,
        MatSelectModule,   //imported for gender picker + membership type
        MatDatepickerModule,     //imported for datepicker
        MatNativeDateModule, //for date picker
        MatRadioModule//radio buttons
      ],
      providers: [PostService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Adding in entire component.ts

    import { Component, OnInit } from '@angular/core';
    import { NgForm } from "@angular/forms";
    import { PostService } from '../services/post.service';
    import { MatSelectModule } from '@angular/material/select';



    @Component({
      selector: 'app-post-create',
      templateUrl: './post-create.component.html',
      styleUrls: ['./post-create.component.css'],
    })
    export class PostCreateComponent implements OnInit {

      constructor(private service: PostService) { }

      onAddPost(form: NgForm) {

        this.service.addPost(form.value.FirstName, form.value.SurName, form.value.Address, form.value.phoneNumber).subscribe();
        //when adding anything here make sure to add it to post.service as well as post.model.ts and server.js/app.post

        console.log(form.value);
        form.resetForm();
      }

      ngOnInit() {
      }

    } export interface Gender {
      value: string;
      viewValue: string;
    }

    export class SelectOverviewExample {
      genders: Gender[] = [
        { value: 'm', viewValue: 'Male' },
        { value: 'f', viewValue: 'Female' }
      ]
    }

    export interface type {
      value: string;
      viewValue: string;
    }

    export class MembershipType {
      types: type[] = [
        { value: '1day', viewValue: 'Single Session : €8 / €6.40' },
        { value: '1month', viewValue: '1 month: €30/€24' },
        { value: '3months', viewValue: '3 month: €75/ €60' },
        { value: '6months', viewValue: '6 month: €129/ €103' },
        { value: '12Months', viewValue: '12 month: €199/ €160' },

      ];
    }

I've been at it for a while and its probably a stupid Mistake but any help would be appreciated thanks

Answer 1

I think that was because of your component SelectGender, seems it was not declared in your @NgModule metadata.

• PS: also I do not see any @Component decorator, in that way it is considered as a model more than a component, unless you forget to paste that part.

Here is a working stackblitz where the AppComponent is your SelectGender.

---

UPDATE:

For your updated question, assuming your HTML snippet is a part of post-create.component.html, that wont work since you're trying loop over values that doesnt even exist on the relevant TS part (PostCreateComponent), you move :

genders: Gender[] = [
        { value: 'm', viewValue: 'Male' },
        { value: 'f', viewValue: 'Female' }
      ]

To PostCreateComponent Ts part merely.

Answer 2

You have to add this in your component class PostCreateComponent, not outside the component class. Since you declared it outside the component class, it won't be part of the component and that's why you were not able to see the options

 genders: Gender[] = [
        { value: 'm', viewValue: 'Male' },
        { value: 'f', viewValue: 'Female' }
      ]

Which goes like this:

 export class PostCreateComponent implements OnInit {

      constructor(private service: PostService) { }

       genders: Gender[] = [
            { value: 'm', viewValue: 'Male' },
            { value: 'f', viewValue: 'Female' }
          ]

      onAddPost(form: NgForm) {

        this.service.addPost(form.value.FirstName, form.value.SurName, form.value.Address, form.value.phoneNumber).subscribe();
        //when adding anything here make sure to add it to post.service as well as post.model.ts and server.js/app.post

        console.log(form.value);
        form.resetForm();
      }

  ngOnInit() {
  }

}