Setting angular material's textarea to 50% of component

Question

I'm creating an application in angular 6 (I plan to migrate it to ng7) and in one of component need to add 2 elements, ng material's textarea and my custom component. Each should take 50% of available height. I have a problem with textarea as generated mat-form-field-wrapper takes only as much space as it needs and I can't achieve my goal in that element (I don't want to use any ::ng-deep solutions as it isn't recommended)

Here's what I've done so far (a sample of course):

<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
  <mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
    <textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
  </mat-form-field>
</form>

<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

Answer 1

You will need to override style in your global style sheet as an alternative to using deep. I'm not confident you can make this work perfectly under all conditions because of the way elements of the form field are laid out and variable paddings etc, but here's a starting point:

<form [formGroup]="myGroup" style="display: flex; flex-direction: column; height: 50%;">
  <mat-form-field class="stretch-height">
    <textarea matInput formControlName="myControl"></textarea>
  </mat-form-field>
</form>

<my-custom-component style="height: 50%" *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

Global CSS:

.mat-form-field.stretch-height,
.mat-form-field.stretch-height .mat-form-field-flex,
.mat-form-field.stretch-height textarea {
  height: 100%;
}
.mat-form-field.stretch-height .mat-form-field-wrapper {
  height: calc(100% - 1.34375em);
}
.mat-form-field.stretch-height .mat-form-field-infix {
  height: calc(100% - 1.34375em - 2px);
}

It is vital that the parent container is 100% height or however you wish.

Here's a demo on StackBlitz.