mat-form-field as only child in component

Question

I have an error I cant understand.

I have a component quite simple myComponent.html:

<mat-form-field class="full-width">
   <mat-select [(ngModel)]="value"
           class="uppercase"
           name="name"
           placeholder="{{ 'NAME' | translate }}"
           (ngModelChange)="onChange($event)">
  <mat-option *ngFor="let element of elements" [value]="element.id">{{ element.name }}</mat-option>
</mat-select>
</mat-form-field>

and in parent.html:

<div fxLayout="row" class="header">
  <div fxFlex="50%" class="vehicle-selector">
     <my-component (change)="onSelectElement($event)"></my-component>
  </div>
</div>

If I have my code like this, mat-select is not shown properly:

But if I remove and include its code in parent.html it works fine.

How can I solve it?

Answer 1

It should work, btw you do not need the in your parent since you already have that in the child

<my-component ></my-component>

WORKING DEMO