material select not displaying on angular5 component

Question

I am using Angular Material "MatSelectModule" for the select option when I call then in the controller the selection option is coming side by side like a text paragraph.

TypeScript File:

import { Component, OnInit, NgModule } from '@angular/core';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material';

@Component({
  selector: 'app-schedule-call',
  templateUrl: './schedule-call.component.html',
  styleUrls: ['./schedule-call.component.scss']
})


@NgModule({
  imports: [
    MatRadioModule,
    MatSelectModule
  ]
})


export class ScheduleCallComponent implements OnInit {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}

Component :

<div class="schedule-call-container">
    <mat-form-field>
        <mat-select placeholder="Favorite food">
          <mat-option *ngFor="let food of foods" [value]="food.value">
            {{ food.viewValue }}
          </mat-option>
        </mat-select>
      </mat-form-field>
</div>

Davide · Accepted Answer · 2018-02-03 21:08:25Z

1

Before you use any of the @angular/material components, import a theme like this:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

More info about customizing themes here: https://material.angular.io/guide/theming

answered Feb 3, 2018 at 21:08

Davide

265 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammad Fareed Over a year ago

Yes i have included this in style sass file still i don't see any change when i am inspected its coming but somewhere design are overriding

Edric Over a year ago

Is it in your Angular CLI configuration file? (aka .angular-cli.json)

Collectives™ on Stack Overflow

material select not displaying on angular5 component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related