flex-layout is not applying the inline styles on host elements

[mcwebdev]

flex-layout is not applying the inline styles on host elements where the host elements are getting their flex-layout attributes via @HostBinding

    @Component({
        selector: 'column-node',  //flex-layout not working on host elements
        host: { '[@visibility]': 'visibility' },
        template: `<ng-content></ng-content>`,
    })    
    
    export class LayoutColumnNodeComponent {
        @HostBinding('attr.fxLayout') fxlayout = 'column';
    }

fxLayout attribute is added in DOM <column-node fxLayout="column"> but flex-layout inline styles are not being applied.

[mcwebdev]

Added two attributes to the <test-app> selector.
`@HostBinding('attr.fxLayout') fxlayout = 'column';

@HostBinding('attr.fxLayoutAlign') alignment = 'start start'; `

DEMO : plunkr

[ThomasBurleson]

K. While this was not an intended usage, it does present some odd ideas.

[ThomasBurleson]

With your hostBindings, your are hoping to set this equivalent?

<test-app fxLayout="column" fxLayoutAlign="start start"></test-app>

but you have only one child within test-app. So what do you expect to happen ?

[mcwebdev]

My expectation is that <test-app fxLayout="column" fxLayoutAlign="start start"></test-app> get the flex styling applied, I may dynamically add children in later. My issue is that host selectors don't generate any kind of inline flex css. Looking at the inspector in chrome. element.style is empty, however it should not be given the flex properties fxLayout="column" fxLayoutAlign="start start" bound to <test-app>.

element.style should reflect

 {
    box-sizing: border-box;
    max-height: 100%;
    display: flex;
    flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    -webkit-box-align: center;
}```

[mcwebdev]

[ThomasBurleson]

I am not certain HostBinding(s) will actually create a compiled, active directive. Most likely it considers the attr.fxLayout to be a static attribute (which is NOT compiled).

This is a known bug/feature request on Angular core.

[mcwebdev]

This will cause a huge amount of redundant markup in my html files. For every node I will have to code inline all the flex properties rather than setting them once in the reusable component.

my html file will be very busy with all this repeated flex attributes on each selector. Seems I should be able to set this once in the column-node.component.ts

<column-node fxLayout="row" fxLayoutAlign="space-between center" fxFlex.xs="10" fxFlex.sm="25" fxFlex.md="50" fxFlex.lg="100"> 
   ...COLUMN NODE CONTENT...
</column-node>

//could be many nodes cluttering up the file, making it difficult to scan.

<column-node></column-node> would be much cleaner and all the flex attributes set in the column-node.component.ts

`