Angular Child Inherit Flex From Parent

Viewed 180

I have a form with two date pickers like this:

<div fxLayout="row wrap" fxLayoutGap="10px">
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker2">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</div>

I would like to add a mat-select component that I created to be re-used like this:

<div fxLayout="row" fxLayoutGap="10px">
  <custom-select [formGroup]="formGroup"></custom-select> //---Custom Field
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker2">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</div>

When I do this my custom component doesn't look like it follows the flex rules of the form. I tried to add fxFlex to the the form component like this:

<custom-select fxFlex [formGroup]="formGroup"></custom-select>

And it fits on the screen better but if you shrink the screen size the field gets so small you can't even read the mat-label or anything. It doesn't jump to the previous row like others do.

My custom mat select looks like this:

<div [formGroup]="formGroup" fxFlex>
  <mat-form-field appearance="outline" fxFlex>
     <mat-label>Location</mat-label>
     <mat-select>
       <mat-option>....</mat-option>
     </mat-select>
  </mat-form-field>
</div>
0 Answers
Related