Material <mat-select> not displaying properly in Ionic/Angular Project

Issue

I'm trying to add a <mat-select> into my Ionic/Angular project but it isn't rendering properly..

I'm using angular-material doc

But this is the result displaying on my page:

Here is my code:

<ion-content>
  <ion-title>Contact Us</ion-title>
  <mat-form-field>
    <mat-select>
      <mat-option>None</mat-option>
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2">Option 2</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>
</ion-content>

Yes, I've imported MatFormFieldModule, MatSelectModule in both the module that I'm using it in, as well as my app.module.ts. I use other Material components in my Ionic project but for some reason, the <mat-select> component just won't work. I can't figure it out. I've tried re-building the project, re-importing angular/material. This gives no errors - just won't render properly

When I try doing the <mat-select> with the *ngFor it does give an error such as: Can't bind to 'ngForOf' since it isn't a known property of 'mat-option'

I really don't know what to do.

Any help is appreciated!

Solution

I figured it out.. I didn't have my contact.page module imported into my app.module.ts, so it wasn't recognizing any other imports.

Answered By - Donald Groezinger