<ng-content> applies wrong layout

[phil294]

<sub-app>
    <div fxFlex="30" style="background-color:lightgreen;"></div>
</sub-app>

with sub-app template being

<div fxLayout="column" style="height:100px; width:100px; background-color:lightgrey;">
    <ng-content></ng-content>
</div>

According to Chrome inspection, this results in: (omitted unimportant styles)

<sub-app>
   <div fxlayout="column">
      <div fxflex="30" style="max-width:30%;"></div>
   </div>
</sub-app>

However, the applied max-width:30%; is wrong, this should be max-height:30% since the layout direction is column.

Here is a plunker: https://plnkr.co/edit/wOzPHMFLSmXHtg1sKjHe?p=preview

[ThomasBurleson]

@phil294 - this is a good bug find!

Issue

The projected content has FlexDirective which instantiates & performs its ngOnInit() before the LayoutDirective (hosted on the parent of the projected content area) instantiates and runs ngOnInit().

Solution

FlexDirective needs to update itself AFTER the content projection finishes. I think the only way to do that currently is for the LayoutDirective to query for content children after content init.

This is not ideal, however, as this significantly complicates LayoutDirective with couplings to 5-10 other classes.

What would be better is a life-cycle hook that informs the projected content itself that the projection has completed. @vicb - Is there any way to achieve this currently ?

[mackelito]

Does this also apply to ng-template?

[phil294]

@mackelito If we are talking about nesting inside the same component (contrary to ng-content, which is used for displaying contents from the parent component), then no, this does not apply to ng-template and also not to ng-container. It works as expected. You can check here if you like

[ThomasBurleson]

This issue [here] reveals an instantiation and life-cycle issue between dependent components when used with content projection.

[djtahl]

we also have the issue when we try to use
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
the step.content template using flex-layout properties is not interpreted

is it going to be fixed in flex-layout ?