CODEWITHSUNDEEP
angularangular-material
Mohammad Fareed
Mohammad Fareed

Reputation: 1972

material select not displaying on angular5 component

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>

Upvotes: 0

Views: 361

Answers (1)

Davide
Davide

Reputation: 26

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

Upvotes: 1

Related Questions