CODEWITHSUNDEEP
angularangular-material
Yevhenii Kolisnyk
Yevhenii Kolisnyk

Reputation: 71

mat-select doesn't display until i click on it

mat-select doesn't display until i click on it, also does not display the value.

HTML

<mat-form-field class="select" appearance="fill">
  <mat-label>Flex property</mat-label>
  <mat-select placeholder="Choose property" [(ngModel)]="selectedItem">
    <mat-option *ngFor="let prop of flexProperties" [value]="prop.value">
      {{prop.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

TS

  selectedItem: string;



 flexProperties: flexProps[] = [
    {value: 'flexDirection', viewValue: 'flex-direction'},
    {value: 'justifyContent', viewValue: 'justify-content'},
    {value: 'flexWrap[enter image description here][1]', viewValue: 'flex-wrap'},
    {value: 'flexFlow', viewValue: 'flex-flow'},
    {value: 'order', viewValue: 'order'},
    {value: 'alignItems', viewValue: 'align-items'},
    {value: 'alignSelf', viewValue: 'align-self'},
    {value: 'alignContent', viewValue: 'align-content'},
    {value: 'flexGrow', viewValue: 'flex-grow'},
    {value: 'flexShrink', viewValue: 'flex-shrink'},
    {value: 'flexBasic', viewValue: 'flex-basic'}
  ]

This how select looks after selected option [1]: https://i.sstatic.net/K8Yt1.png

Upvotes: 0

Views: 1772

Answers (1)

Murilo G&#243;es de Almeida
Murilo G&#243;es de Almeida

Reputation: 1648

If you just want to show some message in your mat-select, you can do it:

<mat-form-field class="select" appearance="fill">
  <mat-label>Flex property</mat-label>
  <mat-select placeholder="Choose property" [(ngModel)]="selectedItem">
    <mat-option>Choose property</mat-option>
    <mat-option *ngFor="let prop of flexProperties" [value]="prop.value">
      {{prop.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Upvotes: 1

Related Questions