How to Apply a default attribute to an angular component

I'm trying to format some fields into neat rows and columns, and because I have to match some other components with very specific formatting, the html that works looks like this:

<div fxLayout="column" style="margin-right: -30px">
<div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px">
<div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start">
<some-component-1
fxFlex="45"
fxFlex.sm="90"
fxFlex.xs ="90"
></some-component-1>
<some-component-2
fxFlex="45"
fxFlex.sm="90"
fxFlex.xs ="90"
></some-component-2>
</div>
</div>
</div>


This is a lot to either type out or copy and paste, so I want to abstract some of these fxLayout divs away into an angular component so that it looks something like this:

<my-row>
<my-column>
<some-component-1></some-component-1>
</my-column>
<my-column>
<some-component-2></some-component-2>
</my-column>
</my-row>


I was able to create the my-row component like this:

row.component.html:

<div fxLayout="column" style="margin-right: -30px">
<div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px">
<div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start">
<ng-content></ng-content>
</div>
</div>
</div>


Which allows me to do this:

<my-row>
<some-component-1
fxFlex="45"
fxFlex.sm="90"
fxFlex.xs ="90"
></some-component-1>
<some-component-2
fxFlex="45"
fxFlex.sm="90"
fxFlex.xs ="90"
></some-component-2>
</my-row>


Still, I would like to not have to include these fxFlex attributes for each of the nested components. When I try to create the my-column component, I'm unable to apply the fxFlex fields to this component by default.

I've tried the following to no avail:

column.component.html:

<ng-container
fxFlex="45"
fxFlex.sm="90"
fxFlex.xs ="90"
>
<ng-content></ng-content>
</ng-container>


and

<ng-container>
<ng-content
fxFlex="45"
fxFlex.sm="90"
fxFlex.xs ="90"
></ng-content>
</ng-container>


Is there a way to automatically apply these fxFlex attributes to the my-column component?

Continue reading...