When trying to use mat-select in html....it is not working.

<mat-form-field appearance="fill">
      <mat-select>
        <mat-option value="one">First option</mat-option>
        <mat-option value="two">Second option</mat-option>
      </mat-select>
    </mat-form-field>

Results are displayed like below

results

P.S I have imported import {MatNativeDateModule} from '@angular/material/core'; and added MatNativeDateModule under imports in app.module.ts files

After adding MatSelectModule in app.module.ts file and imports section, Now select control and options are not visible.

Below is my app.module.ts file

import { NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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';
import {MatNativeDateModule} from '@angular/material/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    
  ],
  imports: [
    BrowserModule,
    MatNativeDateModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatFormFieldModule,
    BrowserAnimationsModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Select control not visible Disturb UI

CodePudding user response：

You may need to add Angular Material core theme. You can add one of the pre-built theme by adding an entry within the styles array of your project's angular.json file as:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    ...
    "assets": [
      ...
    ],
    "styles": [
      "src/styles.scss",
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
    ],
 ...
}

After adding the above entry, for changes to be reflected you should restart the server.

If you are still facing issue, you can try adding the theme within your global styles.css file as:

@import '@angular/material/prebuilt-themes/indigo-pink.css';

You can refer https://material.angular.io/guide/theming to explore more.

CodePudding user response：

this is the part you have to remove from your css:

:host {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

but in general your css is causing this situation.