Angular Material embed MatOption inside a component

<mat-form-field>
<mat-select placeholder="accessibility">
<mat-option value="PUBLIC">PUBLIC</mat-option>
<mat-option value="PRIVATE">PRIVATE</mat-option>
<mat-option value="ADMIN">ADMIN</mat-option>
</mat-select>
</mat-form-field>

SelectWrapper

  • You’ll have to redifined all the ControlValueAccessor methods
  • You’ll have to redefined all the MatSelect inputs to pass them to the MatSelect in your component
  • <mat-error> will not be supported

Embedded options

<mat-option value="PUBLIC">PUBLIC</mat-option>
<mat-option value="PRIVATE">PRIVATE</mat-option>
<mat-option value="ADMIN">ADMIN</mat-option>
<mat-form-field>
<mat-label>Accessibility</mat-label>
<mat-select [(ngModel)]="notWorking" placeholder="Accessibility">
<app-embedded-options-not-working></app-embedded-options-not- working>
</mat-select>
</mat-form-field>

Embedded options with registration

Create an abstraction

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Benjamin Maisonneuve

Benjamin Maisonneuve

Freelance web developer using angular and angular material since v2